Combobox
A searchable dropdown that allows users to filter and select from a list of options.
'use client';
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from '@/components/ui/combobox';
const frameworks = ['React', 'Vue', 'Angular', 'Svelte', 'Next.js', 'Nuxt'];
export function ComboboxDefault() {
return (
<Combobox items={frameworks}>
<ComboboxInput placeholder='Select a framework...' />
<ComboboxContent>
<ComboboxEmpty>No frameworks found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
);
}
Installation
Usage
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"const items = ['Apple', 'Banana', 'Orange', 'Grape'];
<Combobox items={items}>
<ComboboxInput placeholder='Select a fruit...' />
<ComboboxContent>
<ComboboxEmpty>No fruits found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>Examples
With Clear Button
'use client';
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from '@/components/ui/combobox';
const countries = [
'United States',
'United Kingdom',
'Canada',
'Australia',
'Germany',
'France',
];
export function ComboboxWithClear() {
return (
<Combobox items={countries}>
<ComboboxInput placeholder='Select a country...' showClear />
<ComboboxContent>
<ComboboxEmpty>No countries found.</ComboboxEmpty>
<ComboboxList>
{(item) => (
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
);
}