Select
Single or multiple-selection dropdown control.
Quick Preview
Composition
Use this public composition when building Select:
Select
├── SelectTrigger
│ └── SelectValue
└── SelectContent
├── SelectGroup
├── SelectLabel
├── SelectItem
└── SelectSeparatorUsage
<Select defaultValue="standard"><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="standard">Standard</SelectItem></SelectContent></Select>Examples
Optional actions
Use the header and footer slots for actions that are not selectable values. SelectHeader is styled for a primary creation action; SelectFooter is a quieter secondary action suitable for clearing the current value.
Sizes
Use size to align trigger and menu density with the surrounding form.
Multiple Selection
Set multiple when the field accepts more than one selected value.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
size | `"sm" | "md" | "lg"` |
multiple | boolean | false | Allows multiple selected values. |
unstyled on SelectTrigger | boolean | false | Removes trigger styles for custom composition. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Select composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.