Dropdown select component built on Base UI. Chevron rotates when open.
| Name | Type | Default | Description |
|---|---|---|---|
| placeholder | string | — | Placeholder text when nothing selected (SelectValue) |
| size | "default" | "sm" | "lg" | default | Size variant (SelectTrigger) |
| disabled | boolean | — | Disable select |
| side | "top" | "right" | "bottom" | "left" | bottom | Preferred side to position dropdown (SelectContent) |
| sideOffset | number | 8 | Distance in pixels from anchor (SelectContent) |
| align | "start" | "center" | "end" | start | Alignment against anchor (SelectContent) |
| alignOffset | number | 0 | Offset in pixels from alignment edge (SelectContent) |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.background | var(--background) | Select background | |
| Border | color.input | var(--input) | Select border color | |
| Text | color.foreground | var(--foreground) | Selected text color | |
| Placeholder | color.muted-foreground | var(--muted-foreground) | Placeholder text | |
| Content Background | color.popover | var(--popover) | Dropdown background | |
| Hover | color.accent | var(--accent) | Option hover background | |
| Border Radius | borderRadius.md | var(--radius) | Medium corner rounding | |
| Height (sm) | spacing.9 | 2.25rem | Small trigger height | |
| Height (default) | spacing.10 | 2.5rem | Default trigger height | |
| Height (lg) | spacing.11 | 2.75rem | Large trigger height | |
| Font Size (sm) | fontSize.xs | 0.75rem | Extra small text for sm size | |
| Font Size (default) | fontSize.sm | 0.875rem | Small text for default size | |
| Font Size (lg) | fontSize.base | 1rem | Base text for lg size |
Basic select with placeholder and options.
<Select value={value} onValueChange={setValue}>
<SelectTrigger>
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>Available size variants for different contexts.
<SelectTrigger size="sm">...</SelectTrigger> <SelectTrigger>...</SelectTrigger> <SelectTrigger size="lg">...</SelectTrigger>
Pre-select an option using value prop.
<Select value="banana" onValueChange={setValue}>
...
</Select>Organize options into labeled groups with separators.
<SelectContent>
<SelectGroup>
<SelectLabel>North America</SelectLabel>
<SelectItem value="est">Eastern Time</SelectItem>
<SelectItem value="pst">Pacific Time</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Europe</SelectLabel>
<SelectItem value="gmt">GMT</SelectItem>
</SelectGroup>
</SelectContent>Disable individual options or the entire select.
<SelectItem value="enterprise" disabled> Enterprise (Coming soon) </SelectItem> <Select disabled>...</Select>
Complete form pattern with labels, descriptions, and validation.
<div className="flex flex-col">
<Label id="role-label">Role</Label>
<Select value={role} onValueChange={setRole}>
<SelectTrigger aria-labelledby="role-label">
<SelectValue />
</SelectTrigger>
<SelectContent>...</SelectContent>
</Select>
{error && <FieldError>{error}</FieldError>}
</div>