Select
stableclientradix select
A styled single-choice picker. Costs a popover, a focus trap and a scroll lock — on touch, NativeSelect is usually better.
Styled and native
Both are first-class. The native one is one element and needs no JavaScript.
<Select label="Pin type" placeholder="Choose a type">
<SelectItem value="film">Film</SelectItem>
<SelectItem value="album">Album</SelectItem>
</Select>
<NativeSelect label="Pin type" defaultValue="album">
<option value="film">Film</option>
</NativeSelect>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Accessible name for the trigger. |
| placeholder | string | — | Shown until a value is chosen. |
| onValueChange | (value: string) => void | — | Fires on selection. |
Guidance
Do
- Reach for NativeSelect first. Use the styled one only when the native picker can't carry the design.
Don't
- Don't use a Select for fewer than four options — that's a RadioGroup, visible at a glance.
Accessibility
Typeahead, arrow keys, Home and End all work; Escape closes and returns focus to the trigger.
Radix keeps the list positioned inside the viewport, so it never opens off-screen.