Combobox

Selection with search: type to filter, pick one or many, and a clear empty state.

Framework

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add combobox

What add combobox installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

Framework

A visible label, filtering as you type, a clear button and an empty state.

Items grouped by region; the label lives inside each group.

multiple turns the selection into removable chips inside the field.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`Combobox` Root; items, value/defaultValue, onValueChange, multiple, itemToStringLabel and autoHighlight.	`—`	—
`ComboboxInput` Search field in a bordered group; showTrigger (true) and showClear (false) add the icon buttons.	`input`	—
`ComboboxChips / ComboboxChip / ComboboxChipsInput` Multiple selection: chips with a remove button and the input in one wrapping field.	`div / div / input`	—
`ComboboxContent` Portaled popup as wide as the field; side, align and sideOffset.	`div`	—
`ComboboxList` Scrollable list; pass a render function to map the filtered items.	`div`	—
`ComboboxItem` Option with a check indicator when selected.	`div`	—
`ComboboxEmpty` Shown only when nothing matches the query.	`div`	—
`ComboboxGroup / ComboboxGroupLabel / ComboboxCollection` Grouped items; the label must be inside a group.	`div`	—
`ComboboxValue` Render function over the selected value(s), used for chips.	`—`	—

The states that apply to this component and their visual treatment.

State	Treatment
Closed	The field shows the selected value or the placeholder.
Open	Opens on typing or the trigger; the first match can be highlighted with autoHighlight.
Filtered	Only matching items remain; ComboboxEmpty covers zero results.
Selected	A check marks the selected option; showClear resets it.
Multiple	Selected items become removable chips that wrap in the field.
Invalid / Disabled	aria-invalid or Field's data-invalid paints the border destructive; disabled dims the field.

The input is a combobox with aria-expanded and aria-activedescendant: arrows move through options, Enter selects, Escape closes and then clears.

Label the input with a visible Label (htmlFor/id) or aria-label; the trigger and clear buttons already have names.

Filtering happens as you type and ComboboxEmpty explains when nothing matches instead of showing an empty box.

In multiple mode, chips are reachable with the arrow keys from the input and each one has a remove button.