Single-choice select on the field well with avatars, status dots, icons, groups and an optional search box; a volt highlight glides between options and the panel springs open, flipping above near the viewport edge.
selectdropdownlistboxformpickersearch
Installation
$npx shadcn@latest add @geturui/select
Also installs: Field
Usage
usage.tsx
1import { Select } from "@/components/ui/select";
2
3const people = [
4 { value: "maya", label: "Maya Okafor", description: "@maya", avatar: true },
5 { value: "theo", label: "Theo Lindqvist", description: "@theo", avatar: true },
6 { value: "ada", label: "Ada Mensah", description: "@ada", avatar: true, disabled: true },
7];
8
9export function AssigneeField() {
10 return <Select label="Assignee" required options={people} defaultValue="maya" name="assignee" hint="They get a notification." />;
11}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options* | SelectEntry[] | — | { value, label, description?, icon?, avatar?: boolean | string, dot?: "success" | "warning" | "danger" | "info" | "neutral", meta?, shortcut?, disabled?, keywords? }, a group { heading, options } or { separator: true } |
value / defaultValue | string | null | — | Selected value, controlled or uncontrolled. |
onValueChange | (value, option) => void | — | Fires with the new value and its option. |
open / defaultOpen / onOpenChange | boolean / (open) => void | — | Control the panel. |
size | "sm" | "md" | "lg" | "md" | Well height 32 / 40 / 48, matching Button. Rows, icons and the list height scale with it. |
label / hint / error | ReactNode | — | Field chrome. Any error marks the control invalid and swaps the hint for the message. |
required | boolean | false | Volt asterisk on the label and aria-required on the control. |
disabled | boolean | false | Dims the well and blocks interaction. |
name | string | — | Form field name; values post through hidden inputs. |
placeholder | string | "Select an option" | Shown until something is picked. |
iconLeading | ComponentType<{ className }> | — | Trigger icon, replaced by the selected option's own avatar, dot or icon. |
searchable | boolean | false | Search box at the top of the panel; matches are highlighted, accents and case ignored. |
shortcut | string | — | Letter that opens the select with ⌘ (Ctrl on Windows and Linux), shown as a key hint. |
showDescription | boolean | true | Show the selected option's description beside its label. |
emptyText | ReactNode | "No matches" | Shown when the search finds nothing. |
Accessibility
- APG select-only combobox: the trigger keeps focus and points at the highlighted option with aria-activedescendant.
- Arrow keys, Home/End, Page Up/Down and typeahead move the highlight; Enter, Space or Tab commit; Escape closes and returns focus.
- With search on, focus moves into the search box, which becomes the combobox; Tab hands focus back to the trigger.
- Groups use role=group labelled by their heading; disabled options are skipped and marked aria-disabled.
- Highlight and check animations drop to instant changes when reduced motion is on.