Select

A dropdown select input built on Base UI. Supports grouped options, custom styling, animated transitions, and keyboard navigation. For native mobile behavior, see NativeSelect.

Anatomy

<Select> wraps a <SelectTrigger> (the button) and <SelectContent> (the dropdown). Content holds <SelectItem> elements, optionally organized with <SelectGroup> and <SelectLabel>.

Examples

Basic

With groups

With label

Design Guidelines

Do

  • Use for 5+ options. Fewer options work better as RadioGroup or ToggleGroup.
  • Provide a clear placeholder. "Select a..." helps users understand what to choose.
  • Group related items. Use SelectGroup and SelectLabel for categorized lists.
  • Use NativeSelect on mobile-heavy forms. Native selects provide better mobile UX with system pickers.

Don't

  • Don't use for searchable lists. If users need to type to filter, use Combobox instead.
  • Don't nest selects. Avoid putting a select inside another select's content.
  • Don't use for actions. Select is for picking values, not triggering actions — use DropdownMenu for that.

Developer Reference

Accessibility

  • Built on Base UI Select — full ARIA listbox pattern with keyboard navigation.
  • Arrow keys navigate items, Enter/Space selects, Escape closes.
  • Trigger sizing: h-8 sm:h-9 lg:h-10 (matches Input component).
  • aria-invalid triggers destructive ring on the trigger.
  • Content animates with slide-in, fade-in, and zoom-in transitions.
  • Scroll buttons appear when content overflows the viewport.

Usage

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

// Basic
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
  </SelectContent>
</Select>

// Grouped options
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a role" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Engineering</SelectLabel>
      <SelectItem value="frontend">Frontend</SelectItem>
      <SelectItem value="backend">Backend</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Design</SelectLabel>
      <SelectItem value="ui">UI Designer</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

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