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

NameDescription
Component nameThe name of the component as it appears in the Screen's component tree
Dropdown Border ColorThe border color of the dropdown container. (dropdown mode only)
Icon sizeSize of icon
Icon colorColor of the icon
Auto-dismiss keyboardAutomatically dismiss keyboard when Picker is opened
Selected iconThe icon to display on selected items. (dropdown mode only)
Selected icon colorThe color of the icon displayed on selected items. (dropdown mode only)
Dropdown background colorThe background color of the dropdown container. (dropdown mode only)
Selected icon sizeThe size of the icon displayed on selected items. (dropdown mode only)
Dropdown border widthThe border width of the dropdown container. (dropdown mode only)
Dropdown border radiusThe bottom border radius of the dropdown container. (dropdown mode only)
PlaceholderThe placeholder text of the picker
Placeholder text colorThe color of the placeholder text.
Assistive textHelper text to display below the picker
Left iconThe icon to display on the left
Left icon modeThe mode of the icon to display on the left - inset or outset
Right iconThe icon to display on the right
AppearanceType of Picker - solid or underline

Data Properties

NameDescription
LabelThe label to be displayed on the picker
OptionsArray of picker options. An array of objects containing a label and value. Example [{label:'One', value:1}, {label:'Two', value:2}]
DisabledWhether the picker should be disabled. Will prevent selection and show a greyed out state.
ErrorWhether the picker should display the error state
Data sourceThe variable to associate with this input or Initial Value
Initial ValueThe component will be initialized with this value. Only available when 'Initial Value' is selected for 'Data source'

Triggers

NameDescription
On Value ChangeRuns the Actions in the stack when the value changes