Multi-Select Picker

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