Select

A composable select component built on Base UI's Select primitive. It provides a trigger button, a positioned popup with scrollable content, grouped items, labels, and separators.

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

export default function SelectDemo() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="orange">Orange</SelectItem>
        <SelectItem value="grape">Grape</SelectItem>
        <SelectItem value="mango">Mango</SelectItem>
      </SelectContent>
    </Select>
  )
}

Anatomy

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

<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>

Examples

Basic select

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

Grouped items

Use SelectGroup and SelectLabel to organize options into labelled sections.

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
      <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
      <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
      <SelectItem value="cet">Central European Time (CET)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Small trigger

Pass size="sm" to SelectTrigger for a compact trigger button.

<Select>
  <SelectTrigger size="sm">
    <SelectValue placeholder="Size" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="s">Small</SelectItem>
    <SelectItem value="m">Medium</SelectItem>
    <SelectItem value="l">Large</SelectItem>
  </SelectContent>
</Select>

Disabled state

<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="Disabled" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
  </SelectContent>
</Select>

API Reference

Select

The root component. A direct re-export of Base UI's Select.Root.

Prop	Type	Default	Description
`value`	`string`	—	The controlled value.
`defaultValue`	`string`	—	The initial uncontrolled value.
`onValueChange`	`(value: string) => void`	—	Callback when the value changes.
`disabled`	`boolean`	`false`	Whether the select is disabled.

SelectTrigger

The button that opens the select popup and displays the current value.

Prop	Type	Default	Description
`size`	`"sm" \| "default"`	`"default"`	The trigger height. `"default"` is `h-9`, `"sm"` is `h-8`.
`className`	`string`	—
`children`	`ReactNode`	—

SelectValue

Renders the selected value text inside the trigger. Accepts a placeholder prop for empty state.

Prop	Type	Default
`placeholder`	`string`	—
`className`	`string`	—

SelectContent

The positioned popup that contains the list of items. Wraps items in a portal with a positioner.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	The preferred side of the trigger to render against.
`sideOffset`	`number`	`4`	Distance in pixels from the trigger.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the trigger edge.
`alignOffset`	`number`	`0`	Offset from the alignment edge in pixels.
`alignItemWithTrigger`	`boolean`	`true`	Whether to align the selected item with the trigger.
`className`	`string`	—
`children`	`ReactNode`	—

SelectGroup

Groups related items together. Renders Base UI's Select.Group.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

SelectLabel

A label for a SelectGroup. Renders as non-interactive styled text.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

SelectItem

A selectable option within the list. Displays a check indicator when selected.

Prop	Type	Default	Description
`value`	`string`	—	The value for this item.
`disabled`	`boolean`	`false`	Whether the item is disabled.
`className`	`string`	—
`children`	`ReactNode`	—

SelectSeparator

A visual divider between groups or items.

Prop	Type	Default
`className`	`string`	—

SelectScrollUpButton

A scroll arrow displayed at the top of the list when there are items above the visible area.

Prop	Type	Default
`className`	`string`	—

SelectScrollDownButton

A scroll arrow displayed at the bottom of the list when there are items below the visible area.

Prop	Type	Default
`className`	`string`	—