Select

Picks one value from a list of options.

Plan

When to use

Use when: Choosing one value from a list of about five to fifteen options.
Avoid when: There are only two or three options; use Radio Group. Or many; use Combobox.

Installation

bunx shelf add select

The source lands in src/components/ui/select.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Select from "@/components/ui/select";

<Select.Root items={plans}>
  <Select.Trigger aria-label="Plan">
    <Select.Value placeholder="Choose a plan" />
  </Select.Trigger>
  <Select.Content>
    {plans.map((plan) => (
      <Select.Item key={plan.value} value={plan.value}>{plan.label}</Select.Item>
    ))}
  </Select.Content>
</Select.Root>

Examples

Groups

Group long lists with labels and separators.

Time zone

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Icons, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.