Select

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

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "blueberry", label: "Blueberry" },
  { value: "grapes", label: "Grapes" },
  { value: "pineapple", label: "Pineapple" },
]

export default function SelectDemo() {
  return (
    <Select items={fruits}>
      <SelectTrigger aria-label="Fruit" className="w-48">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {fruits.map((fruit) => (
            <SelectItem key={fruit.value} value={fruit.value}>
              {fruit.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Select wraps the select primitive of the chosen base. SelectTrigger shows the current choice through SelectValue and a chevron icon; SelectContent renders the popup in a portal, positioned against the trigger, and holds SelectItem options. Use SelectGroup with a SelectLabel to title a set of options, and SelectSeparator to divide groups.

A highlight pill slides between options as the highlighted item changes, and the selected item shows a check mark. Use Select when people choose one value from a fixed list. For a few always-visible options, consider ToggleGroup or RadioGroup.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/select

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add select

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react @phosphor-icons/react

2. Copy the source into components/ui/select.tsx:

3. Update the import paths to match your project.

Usage

import { SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } 

<Select

Pass items to Select as { value, label } pairs so SelectValue can show the label for the chosen value, even before the popup opens. Use defaultValue for an uncontrolled select, or value with onValueChange to control it. SelectValue shows its placeholder until a value is chosen.

SelectContent opens below the trigger by default. It accepts the positioner props side, sideOffset, align, alignOffset and alignItemWithTrigger.

Examples

Open

Renders the popup open on mount with a value already selected.

With value

Starts with a default value, so the trigger shows its label.

Small

Uses the compact sm trigger size.

Grouped

Splits options into labelled groups with a separator between them.

With icons

Places an icon before each option's label.

Disabled

Disables the select so it can't be opened.

Invalid

Marks the trigger with aria-invalid to show an error state.

API Reference

Accessibility

• The trigger has the combobox role and the popup list has the listbox role; each item is an option with aria-selected on the chosen one.
• Give the trigger an accessible name, such as aria-label or an associated label.
• When the popup opens, focus moves to the selected option. Arrow keys move between options and Enter selects.
• Escape closes the popup without changing the value, and focus returns to the trigger.
• A SelectGroup with a SelectLabel is exposed as a named group.

Notes

• Parts carry data-slot attributes such as select-trigger, select-content, select-item and select-highlight.
• The trigger sets data-size, and styles data-placeholder, aria-invalid and disabled states. Invalid triggers use the destructive color.
• The popup uses bg-popover, the highlight uses bg-accent text-accent-foreground, and the check mark uses text-primary.
• The highlight animation is turned off when reduced motion is preferred.

Select is built on the select primitive. SelectTrigger is a pressable field with the combobox role and an up-down caret. SelectContent renders in a portal, positioned next to the trigger, and fades in and out with Reanimated. The list matches the trigger width.

The trigger comes in two sizes, default and sm. Use Select for picking one value from a short list; for a list that needs searching, use Combobox.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/select

$ pnpm dlx @esuiss/ui@latest add select

$ pnpm dlx @esuiss/ui@latest add select --platform swift