Search for a command to run...
A typeahead select built on `@base-ui/react`. An input field that filters a popover list as the user types. Single, multi-select, and chips modes. Reach for it when a `Select` would be too rigid (long lists, free-text matching, multi-tag entry).
Items can be plain strings or objects. When you pass { value, label } objects, base-ui uses label as the display string automatically. Pass items to Combobox for built-in filtering — ComboboxList's render-function child receives each filtered item.
ComboboxPass-through wrapper around @base-ui/react's Combobox.Root. Forwards every base-ui prop. Most-used:
| Prop | Type | Default | Description |
|---|---|---|---|
items | Item[] | — | The data source. When provided, ComboboxList filters automatically and exposes each matching item via render-function children. |
value / onValueChange | Item | Item[] | null / (value) => void | — | Controlled selection. With multiple, the value is an array. |
defaultValue | Item | Item[] | null | null | Uncontrolled initial selection. |
multiple | boolean | false | Allow more than one selection. Switches the value shape to an array; pair with ComboboxChips. |
itemToStringLabel | (item) => string | item.label if object | Converts object items into the display string. Defaults to item.label when items are { value, label } shapes. |
autoHighlight | boolean | false | Highlight the first match while filtering — useful for quick keyboard-only flows. |
ComboboxInputWraps base-ui's Combobox.Input in an InputGroup. Auto-renders a trigger chevron (showTrigger, default true) and an optional clear button (showClear, default false). For chips mode use ComboboxChips + ComboboxChipsInput instead.
ComboboxContentThe portaled popup. Forwards base-ui's Combobox.Popup props plus the positioner shorthand props side (default "bottom"), align (default "start"), sideOffset (default 6), alignOffset, and anchor (for chips mode — pass the ref from useComboboxAnchor()).
ComboboxList · ComboboxItem · ComboboxEmptyThe scrollable list, each entry, and the no-match state. ComboboxList accepts a render-function child (item, index) => ReactNode when items is passed to Combobox; otherwise pass static ComboboxItem children. ComboboxEmpty renders only when ComboboxList is empty.
ComboboxGroup · ComboboxLabel · ComboboxSeparatorGroup adjacent items under a label with optional separator rules between groups. ComboboxCollection is also available for virtualization-ready static collections.
ComboboxChips · ComboboxChip · ComboboxChipsInputChips mode replaces the single input field with a wrapping pill row of selected chips and an inline input for adding more. Pair Combobox's multiple prop with useComboboxAnchor() to anchor the popup to the chips container instead of the input.
Reach for Combobox when the list is long, free-text matching matters, or the user might type to
find an option. For short curated lists where the user must pick exactly one, prefer Select.
Use chips mode (multiple + ComboboxChips) for multi-select with visible state — tag pickers,
audience filters, anything where the selection itself is the artifact the user is composing.
Always render a ComboboxEmpty. Searches with no matches must telegraph the empty state so the
user knows they're not stuck.
Open-code a Popover + Input + filter loop. That's exactly what Combobox is — base-ui
handles keyboard nav, type-ahead, and ARIA wiring you'd otherwise reinvent.
Force Combobox into a single-pick flow when the value is short and known. A Select is
cheaper to scan when the user doesn't need to type.