Installation

Barrel

// code example

Granular

// code example

Usage

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

export default function Example() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <Combobox value={value} onValueChange={setValue} items={fruits}>
      <Combobox.TriggerInput placeholder="Select a fruit" />
      <Combobox.Content>
        <Combobox.Empty />
        <Combobox.List>
          {(item) => (
            <Combobox.Item key={item} value={item}>
              {item}
            </Combobox.Item>
          )}
        </Combobox.List>
      </Combobox.Content>
    </Combobox>
  );
}

Examples

Sizes

The Combobox supports four size variants that match the Input component: xs, sm, base (default), and lg.

Size also applies to `TriggerValue` (searchable inside variant):

Searchable Item (Inside)

A searchable select component inside popup that allows users to filter and
select.

Searchable Select with Placeholder

Use `TriggerValue` with a `placeholder` prop to create a searchable Select-style field.
The placeholder is displayed until a value is selected.

Custom Trigger

Use Combobox.Trigger with a render prop to replace the default input-like trigger with your own element. Pair with Combobox.Value to display the selected value. Useful for account switchers, sidebar navigation, or anywhere the default chrome doesn't fit.

Grouped

Group items into categories using the Group and GroupLabel components.

Multiple

Allow users to select multiple options from the list.

With Field

Add label and description using the built-in Field wrapper.

Disabled

Pass the disabled prop to prevent interaction. Works with both TriggerInput and TriggerValue.

Disabled Items

Pass the disabled prop to an individual Combobox.Item to make it non-selectable. Disabled rows are rendered with a muted style and skipped during keyboard navigation selection.

Error State

Display validation errors with the error prop.

Customizing Dropdown Height

By default, <code class="text-surface">Combobox.Content</code> has a max height of <code class="text-surface">24rem</code> (384px) or the available viewport space, whichever is smaller. The dropdown scrolls automatically when content exceeds this height.


To customize the max height, pass a className to <code class="text-surface">Combobox.Content</code>:

// Shorter dropdown (200px)
<Combobox.Content className="max-h-[200px]">

// Taller dropdown (500px)
<Combobox.Content className="max-h-[500px]">

// Use Tailwind presets
<Combobox.Content className="max-h-64">  // 256px
<Combobox.Content className="max-h-96">  // 384px (same as default)

API Reference

Combobox

Root component for the searchable select.

Combobox.Content

Dropdown container for the list.

Combobox.Item

Individual selectable option.

Additional Sub-components

• `Combobox.TriggerInput` - Single-select input trigger
• `Combobox.TriggerValue` - Button trigger showing selected value
• `Combobox.TriggerMultipleWithInput` - Multi-select with chips
• `Combobox.Input` - Search input inside dropdown
• `Combobox.List` - List container with render prop
• `Combobox.Group` - Group container for categorized items
• `Combobox.GroupLabel` - Header label for a group
• `Combobox.Collection` - Items container within a group
• `Combobox.Chip` - Selected item chip
• `Combobox.Empty` - Empty state message