Expandable Picker

Expandable Picker opens to allow for the selection of a value from a list and returns the selected value when closed.

Behaviours & States


The expandable picker is a control with an expanded state and a collapsed state. Expandable picker is suitable for use within lists. Avoid using multiple expandable pickers with a large amount of content in a single list as it can push the list off screen making it difficult for a user to determine their location in the list.


By default selecting an entry in an expandable picker will close the picker and display the selected value in the closed state.


Expandable pickers can be grouped so only one expandable picker in group can be open at one time.


The Expandable Picker control can also be used for multiple selections. In this case, the user must select on the title to close the list. Multiple selection should only be used with a short list of items.


The control can be one (1) of these states at any given time:

  • Closed - Normal
  • Closed - Focus
  • Open


Normal state is used when there has been no interaction with the button but it is available for use.


Focus is when the control is hovered over or has the focus from 5-way navigation.


Open is when the control has been opened and changes can be made to the picker.


The width of the expandable control will automatically scale to fit the container.