Select

Installation

Anatomy

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectIcon,
  SelectPopup,
  SelectList,
  SelectItem,
  SelectItemText,
  SelectItemIndicator,
} from "@/components/ui/select";

<Select>
  <SelectTrigger>
    <SelectValue />
    <SelectIcon />
  </SelectTrigger>
  <SelectPopup>
    <SelectList>
      <SelectItem>
        <SelectItemText />
        <SelectItemIndicator />
      </SelectItem>
    </SelectList>
  </SelectPopup>
</Select>;

Usage

Basic

Country

Formatting value

By default, SelectValue component renders the raw value of the selected / matching item.

Passing the items prop to the Select component renders the matching label for the rendered value.

A function can also be passed to the SelectValue component to render a formatted value.

Here we are doing lookup of the country label by the value in the SelectValue component. To avoid lookup, object values for each item can also be used.

Object values

Select items can use objects as values instead of primitives. This lets you access the full object in custom render functions, and can avoid needing to specify items for lookup.

Multiple Selection

Animation Presets

Scale

Wipe

Wipe Scale

Motion

Motion Blur

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with Pure UI quickly.

Important: Base UI changes how options are provided. Instead of deriving options from children only (Radix pattern), you should pass an items prop (array or record) so values and labels are known before hydration. This avoids SSR pitfalls and improves mount performance. Alternatively, provide a function child to SelectValue to format the label. See the Base UI Select docs.

Quick Checklist

• Set items prop on Select
• We've added placeholder prop to the SelectValue component, although Base UI doesn't have a placeholder prop on the Select.Value component.
• Prefer SelectPopup instead of SelectContent
• If you used asChild on parts, switch to the render prop

New Prop

Base UI introduces the alignItemWithTrigger prop to control whether the SelectPopup overlaps the SelectTrigger so the selected item's text is aligned with the trigger's value text.

Comparison Example

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="next">Next.js</SelectItem>
    <SelectItem value="vite">Vite</SelectItem>
    <SelectItem value="astro">Astro</SelectItem>
  </SelectContent>
</Select>

<Select
  items={[
    { label: "Select a framework", value: null },
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "Astro", value: "astro" },
  ]}
>
  <SelectTrigger>
    <SelectValue placeholder="Select a framework"/>
  </SelectTrigger>
  <SelectContent>
  <SelectPopup
   alignItemWithTrigger={false}
  >
    <SelectList>
      {items.map((item) => (
        <SelectItem key={item.value} value={item}>
          {item.label}
        </SelectItem>
      ))}
    </SelectList>
  </SelectPopup>
  <SelectContent>
</Select>