components

Select

Use Select when the answer is one of a known, short list (≤30 options). For bigger sets or free-text filtering, reach for a Combobox instead — it's coming in v0.3.

Read the full spec

Default

A bare trigger + content with a flat list of items. Click, tap or type to open; arrow keys to navigate.

Monitored area

tsx

<Select>
  <SelectTrigger className="w-[220px]">
    <SelectValue placeholder="Pick an area" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="camps-bay">Camps Bay</SelectItem>
    <SelectItem value="sea-point">Sea Point</SelectItem>
    …
  </SelectContent>
</Select>

Controlled

Pass `value` and `onValueChange` to drive the select from state. The current value shows live below.

Priority

Current value: —

tsx

const [value, setValue] = useState("");
<Select value={value} onValueChange={setValue}>…</Select>

Grouped with labels

Use `SelectGroup` and `SelectLabel` to organise large option sets. Separators help break logical clusters.

Location

tsx

<SelectContent>
  <SelectGroup>
    <SelectLabel>Cape Town</SelectLabel>
    <SelectItem value="camps-bay">Camps Bay</SelectItem>
    <SelectItem value="sea-point">Sea Point</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>Johannesburg</SelectLabel>
    <SelectItem value="sandton">Sandton</SelectItem>
    <SelectItem value="rosebank">Rosebank</SelectItem>
  </SelectGroup>
</SelectContent>

States

Disabled trigger, invalid trigger via `aria-invalid`, and disabled individual items.

Disabled

Invalid