Anatomy
- Selected value
- Label/placeholder
- Helper text (optional)
- Chevron icon (actionable)
- Border
- Check icon (indicates selected option)
- Options list
- Option hover state
- Option
Options
No styling options
The select component currently only supports one size and variant.
Behavior
Options list (Active)
Clicking or tapping the select field initiates the active state, revealing an options list that consists of a set of values. When in the active state, the label/placeholder is reduced in size and the chevron icon rotates 180 degrees, pointing upwards.
The options list may contain as many values as needed and becomes scrollable if there are more options than what is currently in view.
Making a selection (Active)
The options list can be navigated by mouse hover or via the up/down arrow keys (indicated by a faint highlight). clicking or tapping an option in the list will select the chosen value (indicated by the check icon)
Once a selection is made, the chosen value is displayed within the select field and the options list is automatically dismissed. Selection can also be achieved by pressing the Enter/Return key while an option is highlighted. to cancel selection/dismiss the options list, click or tap outside the element or press the Esc key.
Select groups
The options list can be segmented into groups. Grouping options within a select field can be helpful for creating categories or subcategories of similar items.
Text overflow
Overflow of the selected value is indicated by an ellipsis
Show required
Focus
Error
Success
Disabled
Accessibility
ARIA
Assistive technologies (e.g. screen readers) announce the element clearly to users, including its role, name and state.
Accessibility
The listbox position is adjusted (i.e. does not get cut off the screen).