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>npx 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.
<Combobox>
<Label>Country</Label>
<ComboboxInput placeholder="Search countries..." />
<ComboboxContent>
<ListBoxItem id="us">United States</ListBoxItem>
<ListBoxItem id="uk">United Kingdom</ListBoxItem>
<ListBoxItem id="fr">France</ListBoxItem>
<ListBoxItem id="de">Germany</ListBoxItem>
<ListBoxItem id="jp">Japan</ListBoxItem>
</ComboboxContent>
</Combobox>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 | |
|---|---|---|---|
boolean | — | ||
boolean | — | ||
boolean | — | ||
MenuTriggerAction | 'input' | ||
((textValue: string, inputValue: string) => boolean) | — | ||
boolean | — | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
Iterable<T> | — | ||
Key | null | — | ||
Key | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
string | — | ||
string | — | ||
function | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
string | — | ||
"sm" | "md" | "lg" | 'md' | ||
boolean | — | ||
boolean | — | ||
union | — | ||
string | — | ||
string | — | ||
ReactNode | function | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
boolean | — | ||
DragAndDropHooks<NoInfer<T>> | — | ||
"grid" | "stack" | 'stack' | ||
Orientation | 'vertical' | ||
Placement | 'bottom' | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
ReactNode | function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
SelectionBehavior | "toggle" | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
"none" | "clearSelection" | 'clearSelection' | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.