Picker
A field for the user to make a selection from a scrollable list of predefined options.
Adding Picker component
- Select the Picker component from the Components drawer. You can open the list of components by clicking the
+button next to Components. - To display pre-defined values, add an array as a variable from the Variables modal in the top panel.
- Then, add the Picker component from the Components tree.
- Go to the Data tab (third tab) in the Properties Panel.
- For the Options property, select the variable key (in the example below,
datais the key that contains an array of strings). - Add an empty string
""in the Initial Value property.
Configuration Properties
| Property | Description |
|---|---|
| Component name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Picker. |
| Icon Size | Size of the icon. |
| Icon Color | To select the colour of the icon. |
| Placeholder | Placeholder text to display in the picker when the user has not made a selection. |
| Placeholder Text Color | Allows you to set the color of the placeholder text. |
| Assistive Text | Helper text to be displayed underneath the picker, useful for providing additional instructions. |
| Disabled | When enabled, the picker will be grayed out and the user will not be able to make a selection. |
| Left Icon Name | The name of the icon selected from the icon picker to be displayed on the left. |
| Left Icon Mode | Allows you to select the placement of the left icon, if one is selected. Inset displays the icon inside the border of the picker and outset displays the icon outside of the picker border. |
| Right Icon Name | The name of the icon selected from the icon picker to be displayed inset on the right. |
| Appearance | Appearance of the picker modal. Available values: sold or underlined. |
Data Configuration
| Property | Description |
|---|---|
| Label | The label of the picker which is displayed directly above the selected date. |
| Options | Here you are able to add the list options you want to be displayed in the picker with each option separated by a comma. The source of data can be static or remote (coming from a data source). For example, you can pass the options as [{"label":"foo","value":42},{"label":"bar","value":126}].The label is the key for each value displayed in the Picker component. |
| Error | When enabled, an outline matching the theme's defined Error color will appear around the picker. Must be a boolean value: true or false. |
| Data Source | Initialize the stateful component with a value from a data source. |
Updated 4 months ago