Select

Displays a list of options for the user to pick from—triggered by a button.

Installation


bunx --bun fabricator-ui@latest add select

Usage

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

const items = [
  { label: "Light", value: "light" },
  { label: "Dark", value: "dark" },
  { label: "System", value: "system" },
]
 
<Select placeholder="Theme">
  <SelectTrigger className="w-[180px]">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {items.map((item) => (
        <SelectItem key={item.value} id={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

Composition

Use the following composition to build a Select:

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

Groups

Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

Scrollable

A select with many items that scrolls.

Disabled

Invalid

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

<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <Select isInvalid>{/* ... */}</Select>
</Field>

Searchable

Use the Autocomplete component from React Aria to add search support.

API Reference

See the React Aria Select documentation.

Search documentation