Select

Component select-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx createui@latest add select
Copy

Usage

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

Copy<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

Examples

Align Item With Trigger

Use alignItemWithTrigger on SelectContent to control whether the selected item aligns with the trigger. When true (default), the popup positions so the selected item appears over the trigger. When false, the popup aligns to the trigger edge.

Component select-align-item not found in registry.

Groups

Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

Component select-groups not found in registry.

Scrollable

A select with many items that scrolls.

Component select-scrollable not found in registry.

Disabled

Component select-disabled not found in registry.

Invalid

Add the data-invalid attribute to the Field component and the aria-invalid attribute to the SelectTrigger component to show an error state.

Copy<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>

Component select-invalid not found in registry.

API Reference

See the Base UI Select documentation.