Select

A listbox for choosing a single value from a set of options, triggered by a button. Built on Base UI's select primitive. Looking for a searchable list instead? See Combobox.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/select

Usage

import {
 
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectGroupLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
 
const fruits = ["Apple", "Banana", "Blueberry"]
 
export function Example() {
  return (
    <Select>
      <SelectTrigger className="w-48">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectGroupLabel>Fruits</SelectGroupLabel>
          {fruits.map((fruit) => (
            <SelectItem key={fruit} value={fruit}>
              {fruit}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Examples

Groups

Use SelectGroup, SelectGroupLabel, and SelectSeparator to organize items.

Scrollable

A select with many items that scrolls.

Disabled

Use the disabled prop on Select to disable the whole control, or on an individual SelectItem to disable just that option.

Invalid

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

Align item with trigger

Use alignItemWithTrigger on SelectContent to control whether the selected item aligns with the trigger (default) or the popup aligns to the trigger's edge instead.

RTL

Mixed direction

Base UI's SelectContent renders through a portal, so it doesn't inherit dir from a nearby wrapper — only from document.documentElement. This Select measures the ambient direction where its trigger actually renders and pushes it down, so each popup below follows its own local dir island correctly — even though both selects share the same page.

API Reference