Multi-Select Picker
How to use
Section titled “How to use”The Multi-Select Picker is similar to a dropdown Picker with the ability to select more than one option. You can pass an array of objects which represent the options to display (see Data Properties).
By default a new Screen Variable will be created and associated with the picker, however you can reassign the data source to another Variable.
There is a Trigger that lets you take any Actions that you need. By default it uses a Set Variable Action which updates the variable associated with the picker input.
Style Properties
Section titled “Style Properties”Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Configuration Properties
Section titled “Configuration Properties”| Name | Description |
|---|---|
| Component name | The name of the component as it appears in the Screen’s component tree |
| Dropdown Border Color | The border color of the dropdown container. (dropdown mode only) |
| Icon size | Size of icon |
| Icon color | Color of the icon |
| Auto-dismiss keyboard | Automatically dismiss keyboard when Picker is opened |
| Selected icon | The icon to display on selected items. |
| Selected icon color | The color of the icon displayed on selected items. |
| Dropdown background color | The background color of the dropdown container. |
| Selected icon size | The size of the icon displayed on selected items. |
| Dropdown border width | The border width of the dropdown container. |
| Dropdown border radius | The bottom border radius of the dropdown container. |
| Placeholder | The placeholder text of the picker |
| Placeholder text color | The color of the placeholder text. |
| Assistive text | Helper text to display below the picker |
| Left icon | The icon to display on the left |
| Left icon mode | The mode of the icon to display on the left - inset or outset |
| Right icon | The icon to display on the right |
| Appearance | Type of Picker - solid or underline |
Data Properties
Section titled “Data Properties”| Name | Description |
|---|---|
| Label | The label to be displayed on the picker |
| Options | Array of picker options. An array of objects containing a label and value. Usually a Variable Example [{label:'One', value:1}, {label:'Two', value:2}] |
| Disabled | Whether the picker should be disabled. Will prevent selection and show a greyed out state. |
| Error | Whether the picker should display the error state |
| Data source | The variable to associate with this input or Initial Value |
| Initial Value | The component will be initialized with this value. Only available when ‘Initial Value’ is selected for ‘Data source’ |
Conditional Display
Section titled “Conditional Display”You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Triggers
Section titled “Triggers”| Name | Description |
|---|---|
| On Value Change | Runs the Actions in the stack when the value changes |