Select

System specimen

The selection and search family shares control geometry, popup surfaces and option rows. Select and Combobox keep persistent selection checks while the highlighted row marks transient keyboard navigation. This specimen includes async results, loading, empty states, chips, Command content, and a 500-project list.

Installation

npx baseui-cn add select

Usage

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

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Frameworks</SelectLabel>
      <SelectItem value="next">Next.js</SelectItem>
      <SelectItem value="remix">Remix</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Examples

Basic

A simple select.

Controlled

A controlled select.

With groups

Group options with SelectGroup.

Sizes

default and sm sizes.

Disabled

A disabled select and disabled items.

API

SelectTrigger

SelectContent