Shadcn Select

A select is a button that opens a custom list. Click an option and the list closes. Use it for theme, status, or timezone — a closed set that should match the rest of the form.

Usage

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

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="light">Light</SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

defaultValue for uncontrolled. value plus onValueChange when you own the state.

Composition

Align Item With Trigger

position="item-aligned" (the default) parks the selected row on the trigger. position="popper" docks to the edge like a popover.

Groups

SelectGroup plus SelectLabel, with a SelectSeparator between chunks.

Scrollable

Timezones by region. Scroll buttons appear when the list is taller than the viewport.

Disabled

disabled on Select greys the trigger. On SelectItem it keeps the row in the list.

Invalid

aria-invalid on SelectTrigger. data-invalid on Field. Both, or the label stays the wrong color.

RTL

Wrap with DirectionProvider and dir="rtl". Copy stays Arabic.

API

SelectTrigger

SelectContent

SelectItem

SelectValue takes placeholder. SelectGroup, SelectLabel, and SelectSeparator take className.

Keyboard

Notes

Give Root a name if it should post with the form. Radix already renders a hidden native <select>.

With other components

Questions

Related