Select

Composition preview

Try Select alongside its related fields & validation components. These examples keep all actions local.

Usage

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

<>
<Select defaultValue="draft">
  <SelectTrigger aria-label="Status"><SelectValue /></SelectTrigger>
  <SelectContent><SelectGroup>
    <SelectItem value="draft">Draft</SelectItem>
    <SelectItem value="approved">Approved</SelectItem>
  </SelectGroup></SelectContent>
</Select>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

value/defaultValue, onValueChange, name, required, disabled; SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem

Usage & accessibility

Keep items inside a group. Use the dialog portal container for a select inside a native modal.

Implementation contract

src/components/ui/select.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.