0

Select

PreviousNext

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

import {
  Select,
  SelectContent,

Installation

bunx --bun shadcn@latest add @ondo-ui/select

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
const items = [
  { label: "Light", value: "light" },
  { label: "Dark", value: "dark" },
  { label: "System", value: "system" },
]
 
<Select items={items}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {items.map((item) => (
        <SelectItem key={item.value} value={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

Composition

Use the following composition to build a Select:

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

Examples

Size

Use the size prop on Select to scale the whole control. xs, sm, default, lg, xl, and 2xl.

At xl and 2xl the popup scales with the trigger — item text, padding, and the check indicator all grow, so the list matches the control that opened it. The smaller sizes change the trigger's height only, leaving the popup at its default scale.

SelectTrigger also accepts size, which overrides the root value for the trigger alone and leaves the popup unchanged.

import {
  Select,
  SelectContent,

Align Item With Trigger

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.

Toggle to align the item with the trigger.

"use client"

import * as React from "react"

Groups

Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

import {
  Select,
  SelectContent,

Scrollable

A select with many items that scrolls.

import {
  Select,
  SelectContent,

Disabled

import {
  Select,
  SelectContent,

Invalid

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

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

API reference

The component wraps Base UI Select and accepts all of its props.