Select
Native select menu styled to match the design system
Category: inputs · WCAG 2.2-AA · form, dropdown, menu
Sizes
- sm
- md
- lg
States
- idle
- focused
- error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label for the control. |
hint | string | — | Supplementary hint text shown with the control. |
error | string | — | Error message shown when the value is invalid. |
placeholder | string | — | Placeholder text shown when the field is empty. |
options | { value: string; label: string; disabled?: boolean }[] | — | The selectable options. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-text-muted--cascivo-radius-input--cascivo-focus-ring
When to use
- Choosing exactly one value from a known, finite list inside a form
- A compact single-value picker where the native OS dropdown UX is acceptable
- You want zero-JS reliability and built-in mobile/keyboard handling from a real <select>
When not to use
- Users need to filter/search a long list — use Combobox
- Multiple values must be selectable — use MultiSelect
- Triggering actions or commands rather than picking a form value — use Dropdown or Menu
How to build an accessible Select in React →
Examples
Basic
<Select label="Role" options={[{ value: "admin", label: "Admin" }]} />With placeholder
<Select label="Country" placeholder="Choose…" options={countries} />Related components
- Combobox — Use when the list is long and needs filtering/search
- MultiSelect — Use when more than one value can be chosen
- Dropdown — Use for action menus, not single-value form selection