Select

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

formoverlayinteractive

Loading preview...

Installation

npx baseui-cn add select

Usage

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

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Frameworks</SelectLabel>
      <SelectItem value="next">Next.js</SelectItem>
      <SelectItem value="remix">Remix</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Examples

Basic

A simple select.

Loading preview...

Controlled

A controlled select.

Loading preview...

With groups

Group options with SelectGroup.

Loading preview...

Sizes

default and sm sizes.

Loading preview...

Disabled

A disabled select and disabled items.

Loading preview...

API

SelectTrigger

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Height of the select trigger button

SelectContent

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Side of the trigger the listbox appears on
`sideOffset`	`number`	`4`	Distance in px between the listbox and the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger
`alignOffset`	`number`	`0`	Offset in px along the alignment axis
`alignItemWithTrigger`	`boolean`	`true`	Visually align the selected item inside the popup with the trigger text

API Reference

See the Base UI Select documentation for the full API reference, including all props, data attributes, and CSS classes.