Multi-Select Picker
The Multi-Select Picker displays a list of options and allows the user to select multiple choices

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.
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. (dropdown mode only) |
Selected icon color | The color of the icon displayed on selected items. (dropdown mode only) |
Dropdown background color | The background color of the dropdown container. (dropdown mode only) |
Selected icon size | The size of the icon displayed on selected items. (dropdown mode only) |
Dropdown border width | The border width of the dropdown container. (dropdown mode only) |
Dropdown border radius | The bottom border radius of the dropdown container. (dropdown mode only) |
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
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. 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' |
Triggers
Name | Description |
---|---|
On Value Change | Runs the Actions in the stack when the value changes |
Updated 15 days ago