Picker

The Picker component is a type of input that lets the user select an item from a list of options. You've used them a million times on websites and apps. You might also know them as Dropdowns or Select inputs.

In some cases, the Picker might be part of a longer form with other types of inputs whose data gets sent to your backend using a REST API Endpoint when a Button is pressed. For example, to let users select a size, color, and quantity of a shirt from predefined options in an online store you likely want a Picker.

It could also be used on it's own as a way to let users sort a list or maybe switch between different settings, for example. Any time you need to let the user select from a list of specific options and store their selection, the Picker is a good choice.

📘

Multi-select

If you need to allow your users to select multiple options, check out the Multi-Select Picker

How it works

When you add any new input component to a Screen Draftbit automatically creates a new Screen Variable and associates that variable with the input component's Data Source prop in the Data tab of the right panel.

A Set Variable Action is also added to the component's On Value Change Trigger which updates the Screen Variable that was automatically created for the input.

With this default setup, the input will update the value held by the variable whenever an item is selected from the available options. Of course, you can rename these variables to whatever you like and adjust the created Action flow in the Action Editor.

Picker Options

The options that are displayed to the user are passed to the Picker as a JSON object array where each object in the array has a label and value key. In this case, the label will be shown to the user and the value will be available to the Actions on the Picker's Triggers.

The most flexible and convenient way to pass options into the Picker component is to have a REST API Endpoint that returns the options already formatted. Using this approach means you don't need to worry about reformatting in the app and also allows you to dynamically change those options from your backend.

Alternatively, you can also enter the object array as the default value of a Variable and pass that variable to the Picker, or enter it directly in the Picker's Options Data prop. You can even get more complicated and store your options in a File, then populate a variable with those values using a Screen's On Screen Load Trigger.

⚠️

The drawback to storing your options as the default value of a variable or in a custom file is that whenever you want to change those options it will require you to republish the app, and for users to update the app, in order for those changes to take effect for users.

Example

[
  {
    "label": "Red",
    "value": "#e11d48"
  },
  {
    "label": "Yellow",
    "value": "#facc15"
  },
  {
    "label": "Blue",
    "value": "#2563eb"
  }
]

Picker Modes

Native mode

This mode provide a seamless, platform-specific user experience. It has the native look and feel of pickers on Web, iOS, and Android. See below for an example.

❗️

This mode is incompatible with Modals.

Dropdown mode

This mode creates a dropdown-style interface as commonly seen on the web. This mode ensures a consistent UI across iOS and Android platforms. See below for an example.

In this mode you can use the Picker Item to further customize how the options are styled in the dropdown.

⚠️

When using multiple Picker components nested within different View components in dropdown mode, the options of the upper Picker may be obscured by the View component containing the second Picker. To avoid this issue, consider placing all Picker components under a single parent View. Alternatively, increasing the z-index of the first View component can also resolve the overlap.

https://youtu.be/hMllSEpbmq0

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.

Component Specific Styles

Configuration Properties

Data Properties

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

Examples

Native mode

This mode provides a seamless, platform-specific user experience. It has the native look and feel of pickers on Web, iOS, and Android.

Dropdown mode

This mode creates a dropdown-style interface as commonly seen on the web. This mode ensures a consistent UI across Web, iOS, and Android platforms. You can further customize the dropdown items using the Picker Item component.

Dropdown-modal mode

This mode is similar to dropdown mode. It's useful in situations where the picker options could become hidden by other components, as can happen with dropdown mode, ensuring better visibility and user experience.