Components
Select
An accessible dropdown built on Radix UI, styled to match the design system. Compose a trigger, value, and items; pair with a label and hint/error text for full form fields.
Basic usage
Compose SelectTrigger, SelectValue, and SelectItem children.
States
Pair the select with a label and hint/error text. Set aria-invalid on the trigger for the error style.
Choose your primary region.
Please select a country.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | string | — | Controlled / uncontrolled selected value (on Select). |
onValueChange | (value: string) => void | — | Callback fired when the selection changes (on Select). |
disabled | boolean | — | Disables the whole control (on Select). |
placeholder | string | — | Shown by SelectValue when nothing is selected. |
size | 'sm' | 'default' | 'default' | Trigger height (on SelectTrigger). |
aria-invalid | boolean | — | Set on SelectTrigger to apply the error (red) styling. |
Accessibility
- Built on Radix UI Select — full keyboard navigation and typeahead.
- Focus is managed and trapped within the open listbox.
- Associate a
<label>with the trigger viaid/aria-labelledby. aria-invalidon the trigger applies error styling.