Select

Installation

npx shadcn@latest add @assistant-ui/select

The @assistant-ui namespace resolves the Radix or Base UI flavor from your project's style through the style-aware registry entry in components.json. Without that entry, add by direct URL instead:

npx shadcn@latest add https://r.assistant-ui.com/base/select.json

Main Component

npm install @base-ui/react class-variance-authority

components/assistant-ui/select.tsx

Usage

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

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
];

export function FruitPicker() {
  return (
    <Select defaultValue="apple" items={fruits}>
      <SelectTrigger className="w-44">
        <SelectValue placeholder="Select a fruit..." />
      </SelectTrigger>
      <SelectContent>
        {fruits.map((fruit) => (
          <SelectItem key={fruit.value} value={fruit.value}>
            {fruit.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

The Base UI flavor uses the items prop to resolve the selected label. Radix reads the label from the selected item, so the prop can be omitted there.

Examples

Sizes

Use the size prop on SelectTrigger to change the trigger height.

Default

Small

<SelectTrigger size="default" /> // 36px
<SelectTrigger size="sm" />      // 32px

Scrollable

Long lists automatically become scrollable.

Groups

Group related items with SelectGroup and SelectLabel.

Disabled items

With placeholder

Disabled select

API Reference

Composable API

Component	Description
`Select`	The root component that manages selection state.
`SelectTrigger`	The button that opens the dropdown.
`SelectValue`	The selected value or placeholder.
`SelectContent`	The dropdown content container.
`SelectItem`	An individual selectable item.
`SelectGroup`	A group of related items.
`SelectLabel`	A label for a group.
`SelectSeparator`	A visual separator between items or groups.
`SelectScrollUpButton`	The upward scroll control for long lists.
`SelectScrollDownButton`	The downward scroll control for long lists.

Select

SelectProps

defaultValue ?: string: The initial selected value for an uncontrolled select.
value ?: string | null: The controlled selected value.
onValueChange ?: (value: string | null) => void: Called when the selected value changes.
items ?: Array<{ value: string; label: ReactNode; disabled?: boolean }>: Base UI item metadata used to resolve labels and disabled state.
disabled ?: boolean: Whether the select is disabled.

SelectTrigger

SelectTriggerProps

size : "sm" | "default" = "default": The trigger height.
className ?: string: Additional CSS classes.