Select
Pick exactly one option from a known list. Built on Radix Select: keyboard type-ahead, portalled listbox, announced value. For searchable or long lists use Combobox; for several choices use MultiSelect.
Purpose
Selects trade discoverability for compactness — every option is hidden behind a click. Use them when the list is familiar (benefit types, states), not when users need to compare options.
With groups
Group long lists; each group gets a muted SelectLabel.
States
Error styling comes from the Field wrapper + aria-invalid; disabled from the root.
Select a benefit type.
Structure
| Property | Value |
|---|---|
| Trigger height | 40px (h-10), 14px text |
| Border | 1px --input · focus --ring + 2px ring |
| Radius | --radius-md trigger · --radius-lg listbox |
| Listbox | --popover surface, --shadow-8, max-height 384px |
| Placeholder | --muted-foreground |
Best practices
Do
- Use Select for 5–15 known options; fewer than 5 →
RadioGroup, more →Combobox. - Order options by likelihood or a natural order (not alphabetically by default).
- Group long lists with
SelectGroup+SelectLabel. - Give it a default only when one option is clearly the common case.
Don't
- Use Select for yes/no — that is a
SwitchorCheckbox. - Hide the label; a placeholder is not a label.
- Use it for multi-choice — that is
MultiSelect. - Nest options more than one group deep.
Accessibility & keyboard
- The trigger is a real button announcing the current value; pair it with a
LabelorField. - Keyboard: Space/Enter opens; Arrow keys move; type-ahead jumps to matches; Enter selects; Esc closes.
- The listbox is portalled and focus-trapped by Radix; selection is announced.
Props
Select is a Radix composition — the root takes value/onValueChange/defaultValue/disabled; SelectTrigger, SelectContent, SelectGroup, SelectLabel and SelectItem accept their Radix props plus className. See the Storybook prop tables for the full generated API.
Compose labels, hints and errors with Field — see the Input reference for the field pattern.