Combobox

Installation

Composition

Simple

A single-line input and a flat list.

Combobox
├── ComboboxInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxItem
        └── ComboboxItem

With chips

Multi-select with multiple, chips, and a chips input.

Combobox
├── ComboboxChips
│   ├── ComboboxValue
│   │   └── ComboboxChip
│   └── ComboboxChipsInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxItem
        └── ComboboxItem

With groups and collection

Nested items per group using ComboboxCollection inside each ComboboxGroup, with a separator between groups.

Combobox
├── ComboboxInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxGroup
        │   ├── ComboboxLabel
        │   └── ComboboxCollection
        │       ├── ComboboxItem
        │       └── ComboboxItem
        ├── ComboboxSeparator
        └── ComboboxGroup
            ├── ComboboxLabel
            └── ComboboxCollection
                ├── ComboboxItem
                └── ComboboxItem

Examples

Multiple Selection

Pass multiple to allow selecting more than one item. Use ComboboxChips and ComboboxChipsInput for the chip-based input.

Groups

Use ComboboxCollection, ComboboxGroup, ComboboxLabel, and ComboboxSeparator to organise items into labelled sections.

Custom Items

Render any content inside ComboboxItem for rich layouts with icons and descriptions.

Popup Style

Use ComboboxTrigger with a Button and ComboboxValue for a traditional select-style popup trigger.

Clear Button

Pass showClear to ComboboxInput to render a clear button that resets the value when an item is selected.

Invalid State

API Reference

Built on Base UI's Combobox primitive — see the full API reference there.

Combobox

ComboboxInput