shadcn.io is an independent project built on shadcn/ui
An outline button says Select framework... The list holds Next.js, SvelteKit, Nuxt.js, Remix, and Astro, with a search box on top. Typing narrows it. A click or Enter picks one, and the button shows that name.
Start here when people pick one value from a list they might search. A handful of options they can scan is a Select. In React, Base UI moves the highlight with the arrow keys.
Installation
Anatomy
Usage
<Combobox items={frameworks}>
<ComboboxTrigger
render={
<Button className="w-[200px] justify-between" variant="outline" />
}
>
<ComboboxValue placeholder="Select framework..." />
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput placeholder="Search framework..." showTrigger={false} />
<ComboboxEmpty>No framework found.</ComboboxEmpty>
<ComboboxList>
{(item: Framework) => (
<ComboboxItem key={item.value} value={item}>
{item.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>FAQ
Which parts make up this combobox?
ComboboxTrigger is the button, and ComboboxContent holds ComboboxInput, ComboboxEmpty and ComboboxList with a ComboboxItem per framework. Because the search box lives in the popup, ComboboxInput has showTrigger turned off.
The trigger renders an outline Button through render.
How does the search filter the frameworks?
The frameworks are passed as items, and the combobox filters them by label as you type.
What does the button show?
Select framework... until something is picked, then that framework's label.
ComboboxValue renders the selected label, and its placeholder covers the empty state.
How is the current row marked?
ComboboxItem draws a check at the end of the selected row. There's nothing to wire up: the item knows when it's selected.
API Reference
Combobox
Sets items={frameworks}, placeholder="Select framework...", placeholder="Search framework...", showTrigger={false} and value={item}. The rest is on the Combobox page.
Button
Sets variant="outline". The rest is on the Button page.
