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

Behaviour

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.

States

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.

Sizing

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

Illustration

EXPANDABLE_PICKER.png

Navigation