Select

Dropdown selection input with sm/md/lg/xl/2xl sizes and an error state, built on Radix UI.

Installation

npx paubha@latest add select

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

<Select onValueChange={setFramework}>
  <SelectTrigger aria-label="Framework">
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="react">React</SelectItem>
    <SelectItem value="vue">Vue</SelectItem>
  </SelectContent>
</Select>

Examples

Sizes

States

API reference

SelectTrigger

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Density: 32 / 40 / 48 / 56px trigger height.
error	boolean	—	Marks the trigger invalid, setting aria-invalid and the error border color.
disabled	boolean	—	Disables the trigger, preventing opening the listbox.

Select, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, and SelectSeparator pass their props straight through to the underlying Radix UI Select primitives.

Dropdown Menu: for actions, not selection
Radio Group: for small option sets
Field: wraps with label + helper

Accessibility

Role. The trigger has an implicit role="combobox" with aria-expanded reflecting the open state.
Listbox. aria-controls links the trigger to the listbox; aria-activedescendant tracks the highlighted option.
Keyboard. Arrow keys navigate options, Enter selects, Escape closes, and type-ahead search jumps to a matching option.
Error. The error prop sets aria-invalid="true" on the trigger.

SelectTrigger

On this page