Combobox combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
<Combobox aria-label="country">
<ComboboxInput />
<ComboboxContent>
<ComboboxItem>Canada</ComboboxItem>
<ComboboxItem>France</ComboboxItem>
<ComboboxItem>Germany</ComboboxItem>
<ComboboxItem>Spain</ComboboxItem>
<ComboboxItem>Tunisia</ComboboxItem>
<ComboboxItem>United states</ComboboxItem>
<ComboboxItem>United Kingdom</ComboboxItem>
</ComboboxContent>
</Combobox>pnpm dlx shadcn@latest add @dotui/comboboxUse Combobox to allow users to filter a list of options to items matching a query and select an item from the list.
import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from "@/components/ui/combobox";<Combobox>
<ComboboxInput />
<ComboboxContent>
<ComboboxItem>Option 1</ComboboxItem>
<ComboboxItem>Option 2</ComboboxItem>
</ComboboxContent>
</Combobox>Use the controls below to experiment with different combobox props and see the live preview and code update.
A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| | ||
| | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Unknown>
<Dynamic(Label)>Country</Dynamic(Label)>
<Dynamic(ComboboxInput) placeholder="Search countries..." />
<Unknown>
<Unknown id="us">United States</Unknown>
<Unknown id="uk">United Kingdom</Unknown>
<Unknown id="fr">France</Unknown>
<Unknown id="de">Germany</Unknown>
<Unknown id="jp">Japan</Unknown>
</Unknown>
</Unknown>