Components
Select
Picks one value from a few known ones.
shadcn/uiForms and inputs
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/select.tsxPreview
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add selectExamples
Groups
A placeholder until something is picked; labelled groups for longer lists.
Disabled
Props
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| value | string | – |
| defaultValue | string | – |
| onValueChange | (value: string) => void | – |
| name | string | – |
Guidelines
Use it
- Five to fifteen options.
- In server-action forms, FormSelect (components/settings/form-select.tsx), which posts the value.
Don't
- Use it for two options: a switch or radio group is quicker.
- Use a native <select>.
Used in
The screens in this Base that show it, found in the code.
Accessibility
- Arrow keys move, Enter picks, Escape closes.
- Typing a letter jumps to the option.