Component · 12

Select

Pick one value from a list. The trigger is a flat field like Input; the list is raised, and the highlighted item is inked in like the selected tab. Built on Base UI for keyboard, typeahead and form behaviour.

Default

Open it, then use the arrow keys, type to jump, Enter to choose, Escape to close.

Favourite fruit

tsx

const fruits = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  …
];

<Select items={fruits}>
  <SelectLabel>Favourite fruit</SelectLabel>
  <SelectTrigger>
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    {fruits.map((f) => (
      <SelectItem key={f.value} value={f.value}>{f.label}</SelectItem>
    ))}
  </SelectContent>
</Select>

Groups and a default

tsx

<Select items={food} defaultValue="bread">
  <SelectTrigger aria-label="Food">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectGroupLabel>Fruit</SelectGroupLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectGroupLabel>Staples</SelectGroupLabel>
      <SelectItem value="bread">Bread</SelectItem>
      <SelectItem value="rice" disabled>Rice</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Disabled

tsx

<Select items={fruits} disabled>
  <SelectTrigger aria-label="Fruit">
    <SelectValue placeholder="Unavailable" />
  </SelectTrigger>
  …
</Select>

Props

Prop	Type	Default	Description
Select items	{ label, value }[]	-	Pass this so the trigger can show the selected label, not the raw value.
Select value / defaultValue / onValueChange	-	-	Controlled / uncontrolled selection.
Select name / required / disabled	-	-	Form integration. A hidden input submits the value.
SelectValue placeholder	ReactNode	-	Shown while nothing is selected.
SelectItem value	string	required	What is submitted and reported.
SelectItem disabled	boolean	false	Visible but not selectable.