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.

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

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.
Selected icon colorThe color of the icon displayed on selected items.
Dropdown background colorThe background color of the dropdown container.
Selected icon sizeThe size of the icon displayed on selected items.
Dropdown border widthThe border width of the dropdown container.
Dropdown border radiusThe bottom border radius of the dropdown container.
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

LabelThe label to be displayed on the picker
OptionsArray of picker options. An array of objects containing a label and value. Usually a Variable 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'

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.


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