Select
Dropdown selection component for choosing a single option from a list. Supports placeholder text, option groups, disabled states, and keyboard navigation.
Anatomy
- 1 Container — border, background, and padding define the field area
- 2 Chevron indicator — signals the field opens a dropdown
- 3 Text / placeholder — selected value or hint text
Options
States
Table of options
| Property | Values | Default |
|---|---|---|
| options | Array of {value, label} or {group, items} | [] |
| placeholder | text | — |
| value | text (selected option value) | — |
| disabled | true / false | false |
| state | default / hover / active / focus / disabled | default |
Behaviors
Full width
Select expands to fill the available inline size of its container.
Keyboard focus
The focus state changes the border color and adds a focus ring. Users can navigate options with arrow keys.
Disabled state
A disabled select cannot be opened. It is removed from the tab order and uses reduced contrast.
Option groups
Options can be organized into labeled groups using optgroup for categorized lists.
Usage guidelines
Always pair with a label
<label for="country">Country</label>
Do
Every select must have a visible label or an aria-label.
Don't
Don't use placeholder text as the only label.
Use select for 5+ options
Select with 5+ options
Do
Use a select when there are 5 or more options. It keeps the interface compact.
Select with 2 options
Don't
For 2–4 options, prefer radio buttons for visibility and fewer interactions.
Content standards
- Placeholder text should describe what to select, not repeat the label.
- Option labels should be short and scannable.
- Use sentence case for option labels.
- Group related options when the list exceeds 7 items.
Keyboard interactions
| Key | Interaction |
|---|---|
| Tab | Moves focus into or out of the select. |
| Space / Enter | Opens the dropdown list. |
| ↑ ↓ | Navigates between options. |
| Home / End | Moves to the first or last option. |
| Escape | Closes the dropdown without changing selection. |
| Type-ahead | Jumps to the first option matching typed characters. |
Accessibility
- Uses the native
<select>element which provides built-in keyboard support and screen reader semantics. - Every select must have a programmatic label via
<label>,aria-label, oraria-labelledby. - Placeholder text is not an accessible label — it disappears once an option is selected.
- Disabled selects use the native
disabledattribute which removes them from the tab order. - Option groups use
<optgroup>with alabelattribute for screen reader announcement. - Focus indicators meet 3:1 contrast.
Enhanced dropdown (base-select)
In browsers that support appearance: base-select (Chromium 136+), the select
dropdown is fully styleable — including the options list, individual options, and
the picker icon. This enhancement is applied automatically via @supports and
requires no markup changes.
What changes in supported browsers:
- The dropdown panel inherits the component's border radius and shadow tokens.
- Options receive padding, hover, and selected-state styling via component tokens.
- The chevron indicator is rendered as a
::picker-iconpseudo-element instead of a background SVG.
Fallback:
In unsupported browsers, the select renders identically to before — with
appearance: none and an inline SVG chevron as background-image. No visual
regression occurs.
Theming
Select adapts automatically across brands and color modes through component tokens. Use the hero preview switches above to see it in action.
For the full theming architecture see Foundations: Theming.