Select

A form component used to allow the user to pick a value from a list

Select

A form component used to allow the user to pick a value from a list

DayDate RangeThe Select component.

Usage

The Select input is useful when the user needs to select an option from a long list, typically more than seven options. Users can click on a control to let the list drop down and the user can then scroll through and pick the desired option. Alternatively the control lets a user select the field and start typing and the list of options will appear and is filtered by the value the user has typed.

Anatomy

1051231030BoatsTransportPlanesBusesTrainsBoatsCombinedAnatomy of the Select component.LabelItem2Value3Container1Sheet45Item (Active)6
  1. Container. The Container wraps the entire component. When the Select is focused, the sheet expands from the bottom of the Select, covering any content immediately below the Select component.
  2. Label. The label provides context to the options available in the Select.
  3. Value. The Value is the currently selected Item from the Sheet.
  4. Sheet. By default, the Sheet is hidden. When the Select is in a focused state, the Sheet will appear with the list of Select items available. It can only display a maximum of five items before it scrolls.
  5. Item. An Item in the Sheet can be selected by the user. When the user clicks on the item, the sheet collapses and changes the Value to the selected Item.
  6. Item Active. When the user opens the Sheet again, the last selected Item will be highlighted.

States

DefaultItem (Default)Item (Active)Item (Hovered)Active1051231030BoatsTransportPlanesBusesTrainsBoatsCombinedThe Select states.DayDate Range

The Select component and the Select Item sub component both have two states - Default and Active.