Select

A single-value picker with a styled trigger, rich options, grouping, and responsive popup behavior.

Use Select for a moderate list of known choices where only one value may be selected. Use Combobox when people need search or fuzzy matching.

Framework

Labeled select

Installation

$npx shadcn@latest add @patchui/select

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/select.tsx.

Usage

<Field>
  <FieldLabel htmlFor="framework">Framework</FieldLabel>
  <Select id="framework" defaultValue="react">
    <SelectItem value="react">React</SelectItem>
    <SelectItem value="vue">Vue</SelectItem>
    <SelectItem value="svelte">Svelte</SelectItem>
  </Select>
</Field>

Match FieldLabel htmlFor to Select id. Every SelectItem needs a unique string value.

Composition

Select
├── SelectItem
├── SelectGroup
│   ├── SelectGroupLabel
│   └── SelectItem
└── SelectSeparator (optional)

The trigger, selected-value display, popup, and responsive positioning are rendered internally.

Examples

Grouped options

Group longer lists when categories make options easier to scan. Group labels provide structure but are not selectable.

Data region

Grouped options

API reference

Prop	Type	Default	Description
value / onValueChange	string / (value: string) => void	-	Controls the selected value.
defaultValue	string	-	Sets the initial uncontrolled selection.
size	"sm" \| "md" \| "lg"	"md"	Uses the shared 24, 32, or 40 pixel control heights.
variant	"default" \| "unstyled"	"default"	Removes trigger chrome when another component owns the surface.
placeholder	string	-	Displays when no value is selected.
prefix / suffix	ReactNode / ReactNode	-	Adds supporting content around the selected value.
renderValue	(value: string) => ReactNode	-	Maps stored values to a custom trigger display.

Select also supports native name, required, and disabled form behavior. Set invalid and connect FieldError when application validation fails.

Keyboard behavior

Enter, Space, Arrow Down, or Arrow Up opens the picker from its trigger.
Arrow keys move through enabled options. Typing moves to a matching option.
Enter selects the highlighted option. Escape closes without changing selection.
The selected option is indicated separately from temporary keyboard or pointer highlight.

Mobile behavior

On desktop, the popup aligns to the trigger and matches its minimum width. Below the md breakpoint, it becomes a centered panel with a backdrop, comfortable option rows, narrow viewport gutters, and locked body scrolling.