Select
A dropdown component that allows users to select one or multiple options from a list.
Overview
- Toggles
- disabled, multiple
All options
Selection and state
| mode \ state | placeholder | selected | disabled |
|---|---|---|---|
| single | Select an option | Option 1 | Select an option |
| multiple | Select multiple | Option 1, Option 2 | Select multiple |
Decoration icon
| icon \ state | enabled | disabled |
|---|---|---|
| none | Select an option | Select an option |
| decoIconName | Select with deco icon | Select with deco icon |
Examples
Basic
Select an option
Options with icons
Select with icon
Multiple
Select multiple
Accessibility
Keyboard
Focus the select and press Enter, Space or an arrow key to open it. Arrow keys move through the options, Home and End jump to the first and last, Enter picks the highlighted option and Escape closes the list.
Semantics
The trigger is a combobox that controls a listbox of option items; the highlighted option is exposed with aria-activedescendant while focus stays on the trigger. Multiple selects set aria-multiselectable, and a disabled select is removed from the Tab order.
Props
SelectOption
| Prop | Type | Required | Description |
|---|---|---|---|
| value | string | Yes | — |
| label | string | Yes | — |
| iconName | string | No | — |
SelectProps
| Prop | Type | Required | Description |
|---|---|---|---|
| value | string | string[] | No | — |
| options | SelectOption[] | Yes | — |
| onChange | (value: string | string[]) => void | No | — |
| disabled | boolean | No | — |
| placeholder | string | No | — |
| decoIconName | string | No | — |
| width | number | string | No | — |
| multiple | boolean | No | — |
| className | string | No | — |