Combobox
An input combined with a list of predefined items to select.
Overview
Use a combobox when users choose one or more values from a list and search or filtering helps them find the right option.
Combobox is useful for large lists, people pickers, labels, projects, countries, commands, and multi-select workflows.
Anatomy
A combobox has a trigger or input, popup, list, items, and selection state. Single-selection comboboxes store one value. Multiple-selection comboboxes store a list of values.
Behavior
Use single selection when one value is allowed. Use multiple selection for tags, filters, permissions, or categories. Use clear buttons when users often reset the value.
Accessibility
Give the combobox a label and keep keyboard navigation intact. Users should be able to open the popup, move through options, select items, clear values, and close the popup without a mouse.
Installation
npx love-ui@latest add comboboxUsage
Single Selection
import {
Combobox,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxPopup,
} from "@/components/ui/combobox"const items = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "orange", label: "Orange" },
{ value: "grape", label: "Grape" },
]
<Combobox items={items}>
<ComboboxInput placeholder="Select an item..." />
<ComboboxPopup>
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
{(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
</ComboboxList>
</ComboboxPopup>
</Combobox>Multiple Selection
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxPopup,
ComboboxValue,
} from "@/components/ui/combobox"const items = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "orange", label: "Orange" },
{ value: "grape", label: "Grape" },
]
<Combobox items={items} multiple>
<ComboboxChips>
<ComboboxValue>
{(value: { value: string; label: string }[]) => (
<>
{value?.map((item) => (
<ComboboxChip key={item.value} aria-label={item.value}>
{item.label}
</ComboboxChip>
))}
<ComboboxInput
placeholder={value.length > 0 ? undefined : "Select a Select an item..."}
aria-label="Select an item"
/>
</>
)}
</ComboboxValue>
</ComboboxChips>
<ComboboxPopup>
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
{(item) => <ComboboxItem value={item}>{item.label}</ComboboxItem>}
</ComboboxList>
</ComboboxPopup>
</Combobox>API Reference
The ComboboxInput component extends the original Base UI component with a few extra props:
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "default" | The size variant of the input field. |
showTrigger | boolean | true | Whether to display a trigger button (chevron icon) on the right side of the input. |
showClear | boolean | false | Whether to display a clear button (X icon) on the right side of the input when there is a value. |
Examples
The examples show disabled, sized, labeled, grouped, single-selection, multiple-selection, input-in-popup, and form-connected comboboxes.
Disabled
Small Size
Large Size
With Label
Auto Highlight
Automatically highlight the first matching option.