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.

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

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

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

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

Triggers

Name	Description
On Value Change	Runs the Actions in the stack when the value changes