Home

Select

A field that opens a list of fixed options and holds the one picked.

ui.selectcomponents/ui/select.tsx

Use case

For the AI

Use it to pick one value from a short, known list inside a form or a filter bar: an order's status, a client's province, a payment method, an invoice's currency. The trigger looks like a field and shows the picked label; the list opens over it with a tick on the current option, and options can be grouped under quiet labels.

Use it when

  • One value from a fixed list that fits on screen
  • A status or category on a record
  • A filter above a table (status, payment method)
  • Options grouped under labels (`SelectGroup`, `SelectGroupLabel`)

Use something else when

  • A long list, or one that comes from data, where typing finds it faster (a client among hundreds): Combobox
  • The person may type a value that is not in the list (a city): Autocomplete
  • The list is actions to run, not a value to hold: Dropdown menu
  • Two or three options that should all stay visible with their details: Radio group

Examples

The chevron turns while open

Code

Import

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

Usage

const STATUSES = [
  { value: "draft", label: "Draft" },
  { value: "sent", label: "Sent" },
  { value: "paid", label: "Paid" },
  { value: "overdue", label: "Overdue" },
]

<Select name="status" defaultValue="sent" items={STATUSES}>
  <SelectTrigger aria-label="Status">
    <SelectValue />
  </SelectTrigger>
  <SelectPopup>
    {STATUSES.map((s) => (
      <SelectItem key={s.value} value={s.value}>
        {s.label}
      </SelectItem>
    ))}
  </SelectPopup>
</Select>

Rules

  • Pass `items` (`{ value, label }` pairs) to `Select` so the trigger prints the label, not the raw value.
  • Name it: `SelectLabel` inside `Select` for a visible label, or `aria-label` on `SelectTrigger`.
  • Options are values, written in sentence case ("In review"), unlike menu items.
  • Inside a form, pass `name` so the picked value is submitted; `SelectValue` takes a `placeholder` for no value yet.