Select
Accessible React single-select field built on Radix, with label, helper text, error state, placeholder, and disabled options. Inherits dark mode and RTL.
Compose Select with SelectItem children, each with a stable value. The dropdown inherits dark mode and RTL from the provider.
When to use
Use Select when the user picks one option from a known list of roughly five to fifteen items, such as a region or a document type. For long lists that need searching, or for multi-select, use Dropdown. For four or fewer options, RadioGroup is faster to scan.
Pass a placeholder that describes the choice, not an instruction.
Examples
Props
Props declared by Select. Native attributes of the underlying element pass through.
<Select>
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | ||
label | react.ReactNode | Visible label above the trigger, associated via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the trigger. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the trigger when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
placeholder | react.ReactNode | Placeholder shown in the trigger when no value is selected. | |
childrenrequired | react.ReactNode | <SelectItem> children, rendered inside the dropdown panel. | |
id | string | Caller-supplied id for the trigger; falls back to a generated one. | |
className | string | Forwarded to the trigger (the focusable control). | |
aria-label | string | ||
aria-labelledby | string | ||
open | boolean | ||
defaultOpen | boolean | ||
onOpenChange | (open: boolean) => void | ||
name | string | ||
autoComplete | string | ||
disabled | boolean | ||
required | boolean | ||
form | string | ||
value | string | ||
defaultValue | string | ||
onValueChange | (value: string) => void |
<SelectItem>
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | react.ReactNode | The visible label for this item. | |
asChild | boolean | ||
valuerequired | string | ||
disabled | boolean | ||
textValue | string |
Accessibility
The trigger is a button linked to the visible label, and the list opens as a listbox with keyboard navigation from Radix: arrow keys move, typing jumps to a matching option, Enter selects, and Escape closes.
Helper text and errors are announced through aria-describedby and aria-invalid. The open list renders inside the provider portal, so it inherits direction and dark mode.