Select

A dropdown select component with composable sub-components.

Radix UI Select (Radix styles)Base UI Select (base styles)

This is a standalone component that does not depend on the assistant-ui runtime. Use it anywhere in your application.

Installation

npx shadcn@latest add @assistant-ui/select

The @assistant-uinamespace 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

Usage

import { Select } from "@/components/assistant-ui/select";

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

export function FruitPicker() {
  const [value, setValue] = useState("apple");

  return (
    <Select
      value={value}
      onValueChange={setValue}
      options={options}
      placeholder="Select a fruit..."
    />
  );
}

Examples

Variants

Use the variant prop on SelectTrigger to change the visual style.

Outline (default)
Ghost
Muted
<SelectTrigger variant="outline" /> // Border (default)
<SelectTrigger variant="ghost" />   // No border
<SelectTrigger variant="muted" />   // Solid background

Sizes

Use the size prop on SelectTrigger to change the height.

Default
Small
<SelectTrigger size="default" /> // 36px (default)
<SelectTrigger size="sm" />      // 32px

Scrollable

Long lists automatically become scrollable.

Groups

Use the composable API for grouped options:

Disabled Items

With Placeholder

Disabled Select

API Reference

Composable API

ComponentDescription
SelectA convenience component that renders a complete select with options.
SelectRootThe root component that manages state.
SelectTriggerThe button that opens the dropdown. Accepts variant and size props.
SelectValueRenders the selected value or placeholder.
SelectContentThe dropdown content container with animations.
SelectItemAn individual selectable item.
SelectGroupGroups related items together.
SelectLabelA label for a group of items.
SelectSeparatorA visual separator between items or groups.
SelectScrollUpButtonScroll indicator for long lists.
SelectScrollDownButtonScroll indicator for long lists.

With the Base UI flavor, SelectValue resolves the trigger label from the items prop on SelectRoot; pass the same array you map into SelectItem children. The Radix flavor reads the label from the selected item's text automatically.

Select

A convenience component that renders a complete select with options.

SelectProps
value : string

The controlled value of the select.

onValueChange : (value: string) => void

Callback when the selected value changes.

options : SelectOption[]

Array of options to display.

placeholder ?: string

Placeholder text when no value is selected.

className ?: string

Additional CSS classes for the trigger.

disabled ?: boolean

Whether the select is disabled.

SelectOption

SelectOption
value : string

The value of the option.

label : ReactNode

The display label for the option.

textValue ?: string

Optional text value for typeahead. Defaults to label if it's a string.

disabled ?: boolean

Whether the option is disabled.

SelectTrigger

The button that opens the dropdown.

SelectTriggerProps
variant : "outline" | "ghost" | "muted" = "outline"

The visual style of the trigger.

size : "sm" | "default" | "lg" = "default"

The size of the trigger.

className ?: string

Additional CSS classes.

Style Variants (CVA)

ExportDescription
selectTriggerVariantsStyles for the select trigger button.
import { selectTriggerVariants } from "@/components/assistant-ui/select";

<button className={selectTriggerVariants({ variant: "ghost", size: "sm" })}>
  Custom Trigger
</button>