Combobox
Text input with a filtered suggestion list.
Type to filter; the list narrows as you type.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/combobox.jsonUsage
Pass items to the root and render each item with function children on
ComboboxList; Base UI filters against the input automatically.
import {
Combobox, ComboboxInput, ComboboxContent, ComboboxList,
ComboboxItem, ComboboxEmptyState,
} from "@/components/ui/combobox";
<Combobox items={tools} value={tool} onValueChange={setTool}>
<ComboboxInput placeholder="Search tools…" />
<ComboboxContent>
<ComboboxEmptyState>No tools found.</ComboboxEmptyState>
<ComboboxList>
{(item: string) => (
<ComboboxItem key={item} value={item}>{item}</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>Objects work too: give the root itemToStringLabel and your items can be
{ id, name } shapes. multiple turns it into a multi-select with the same
markup.
Accessibility
- Base UI Combobox: full
combobox/listboxwiring, arrow-key navigation, and announcement of result counts via ComboboxStatus if you add it. - Prefer Select when the option list is short and known; a combobox earns its keep on long lists.