Select

A dropdown for selecting a single value from a list.

API Reference

Preview

Installation

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
<Select defaultValue="next">
  <SelectTrigger>
    <SelectValue placeholder="Select framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="next">Next.js</SelectItem>
    <SelectItem value="vite">Vite</SelectItem>
    <SelectItem value="astro">Astro</SelectItem>
  </SelectContent>
</Select>

API Reference

Select

Root component. Alias for Select.Root from Base UI.

SelectTrigger

Trigger button that opens the select dropdown. Styled wrapper for Select.Trigger from Base UI.

SelectValue

Displays the selected value. Styled wrapper for Select.Value from Base UI.

SelectContent

Popup container for select options. Wraps Select.Portal, Select.Positioner, and Select.Popup from Base UI.

SelectItem

Individual select option. Styled wrapper for Select.Item from Base UI with built-in indicator.

SelectGroup

Groups related select items. Alias for Select.Group from Base UI.

SelectLabel

Label for a select group. Styled wrapper for Select.GroupLabel from Base UI.

SelectSeparator

Visual separator between items. Styled wrapper for Select.Separator from Base UI.

Examples

For accessible labelling and validation, prefer using the Field component to wrap selects. See the related example: Select field.

Disabled

With Groups