Select

Displays a list of options for the user to pick from—triggered by a button.

Radix UI Base UI

Installation

Scroll Area Separator

On This Page

Installation Usage Examples Align Item With Trigger Groups Scrollable Disabled Invalid API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add select

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

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

Use alignItemWithTrigger on SelectContent to control whether the selected item aligns with the trigger. When true (default), the popup positions so the selected item appears over the trigger. When false, the popup aligns to the trigger edge.

Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

Add the data-invalid attribute to the Field component and the aria-invalid attribute to the SelectTrigger component to show an error state.

<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>

import {
  Select,
  SelectContent,

"use client"

import * as React from "react"

import {
  Select,
  SelectContent,

import {
  Select,
  SelectContent,

import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import {
  Select,

import {
  Select,
  SelectContent,