shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Standard
Simple Single Select Combobox for React
A single-select combobox that opens from a button and searches a list of frameworks.
The starting point for the rest of the gallery: an outline button that says Select framework..., and a list of five frameworks with a search box on top. Typing narrows the list, a click or Enter picks one, and the button shows its name. Use it for any field where people pick one value from a list long enough to search.
Preview
Installation
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.
Related
- With Default Selected Value ComboboxA combobox that starts with English
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Items with Avatars ComboboxA combobox of people with an avatar on
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- Create New Option Inline ComboboxA combobox that offers to create the
- Loading State ComboboxA combobox that shows skeleton rows while