Combobox
An input that filters a list of options as you type. Built on Base UI's combobox primitive, so filtering, keyboard navigation, and ARIA wiring come for free. Looking for a ready-made province & city picker? See City Selector.
Last updated January 1, 1980
Overview
Installation
Usage
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxIcon,
ComboboxInput,
ComboboxInputGroup,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
export function Example() {
return (
<Combobox items={frameworks}>
<ComboboxInputGroup>
<ComboboxInput placeholder="Select a framework" />
<ComboboxIcon />
</ComboboxInputGroup>
<ComboboxContent>
<ComboboxEmpty>No frameworks found.</ComboboxEmpty>
<ComboboxList>
{(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
</ComboboxList>
</ComboboxContent>
</Combobox>
)
}Examples
Multiple selection
Groups
Clear button
Disabled
API Reference
Combobox
API reference: Base UI Combobox .