Combobox
An input combined with a list of predefined items to select.
Preview
Installation
Usage
Single Selection
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"const items = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "orange", label: "Orange" },
]
<Combobox items={items}>
<ComboboxInput placeholder="Select a fruit..." />
<ComboboxContent>
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item.value} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>Multiple Selection
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/components/ui/combobox"const items = [
{ value: "react", label: "React" },
{ value: "vue", label: "Vue" },
{ value: "angular", label: "Angular" },
]
const anchorRef = useComboboxAnchor()
<Combobox items={items} multiple>
<ComboboxChips ref={anchorRef}>
<ComboboxValue>
{(selected: { value: string; label: string }[]) => (
<>
{selected.map((item) => (
<ComboboxChip key={item.value} aria-label={item.value}>
{item.label}
</ComboboxChip>
))}
<ComboboxChipsInput
placeholder={selected.length > 0 ? undefined : "Select..."}
aria-label="Select items"
/>
</>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxContent anchor={anchorRef}>
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item.value} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>API Reference
Combobox
Root component. Alias for Combobox.Root from Base UI.
ComboboxInput
Input field with optional trigger and clear buttons.
ComboboxContent
Popup container with positioner. Wraps Combobox.Portal, Combobox.Positioner, and Combobox.Popup.
ComboboxList
Scrollable container for combobox items.
ComboboxItem
Individual selectable combobox item. Includes a built-in check indicator.
ComboboxEmpty
Message displayed when no results match.
ComboboxGroup
Groups related combobox items together.
ComboboxLabel
Label for a combobox group. Alias for Combobox.GroupLabel from Base UI.
ComboboxCollection
Used within groups to wrap items for rendering. Alias for Combobox.Collection from Base UI.
ComboboxSeparator
Visual separator between groups. Alias for Combobox.Separator from Base UI.
ComboboxChips
Container for selected chips in multiple selection mode. Renders Combobox.Chips from Base UI.
ComboboxChip
Individual chip for a selected item. Renders as a Tag with a built-in remove button.
ComboboxChipsInput
Minimal input for use inside ComboboxChips. Alias for Combobox.Input from Base UI.
ComboboxValue
Provides access to the current value for custom rendering. Alias for Combobox.Value from Base UI.
useComboboxAnchor
Hook that returns a ref to anchor the popup to the chips container.
const anchorRef = useComboboxAnchor()