Select
Select components allow users to choose from a list of options. Built on Radix UI primitives for full accessibility support.
Basic Usage
Simple select
Basic dropdown selection
Sizes
Default size
Standard trigger height (36px)
Small size
Compact trigger height (32px)
With Groups
Grouped options
Organize options into labeled groups
With Icons
Items with icons
Visual indicators for each option
States
Disabled
Non-interactive select
With disabled item
Individual option disabled
SelectTrigger Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "default" | The size of the trigger button |
placeholder | string | — | Placeholder text when no value is selected |
Sub-components
| Prop | Type | Default | Description |
|---|---|---|---|
Select | SelectPrimitive.Root | — | Root component managing state |
SelectTrigger | SelectPrimitive.Trigger & { size } | — | The button that toggles the dropdown |
SelectValue | SelectPrimitive.Value | — | Displays the selected value |
SelectContent | SelectPrimitive.Content | — | The dropdown container |
SelectItem | SelectPrimitive.Item | — | Individual selectable option |
SelectGroup | SelectPrimitive.Group | — | Group of related items |
SelectLabel | SelectPrimitive.Label | — | Label for a group |
SelectSeparator | SelectPrimitive.Separator | — | Visual divider between items |