Tabris.js Widgets: Picker

The Picker widget provides a drop-down list of items to choose from. It is a native alternative for the select HTML tag. Unlike select, there is no multi-select option for the Picker, meaning that only one item can be selected at a time. To allow a user to select multiple items, you might want to take a look at the CheckBox widget.

Properties and events

  • Property selectionIndex stores the selected item index. Use it to get the Picker current value
  • With the style property, you can enforce one of the preset styles for the Picker. See example #2 for all the available options
  • Set the message property to display a hint message
  • You can also use fillColor, borderColor, and textColor properties to customize the widget looks


  1. A simple Picker example in JS syntax, demonstrating different style property values. As you can see, the Stack widget can help when creating a set of drop-downs, eliminating the need to set positioning properties for every Picker.
  2. And here is an example in JSX syntax. Simply scan the QR code to see it nicely in action.

For more detailed information about the Picker widget, see the Picker documentation page.