shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Grouped
Nested/Hierarchical Groups Combobox for React
A combobox that lists countries under their regions, with a chevron marking each one as a child.
A country picker grouped by region: North America, Europe and Asia, three countries each. Every country row starts with a small chevron, so it reads as a child of the region above it. Use it for two-level data such as regions and countries or teams and members.
Preview
Installation
FAQ
Is this a real tree?
No. It's one level of groups, each region a ComboboxGroup with its name as the heading. The chevron is what suggests the nesting.
How is the chevron drawn?
A ChevronRightIcon at size-3 opacity-50 before each country name, hidden from screen readers. The rows add gap-2 for the space.
Which countries are listed?
United States, Canada and Mexico under North America. United Kingdom, Germany and France under Europe. Japan, China and India under Asia.
Can I search by region?
No, the search matches country names only. Typing Europe finds nothing, and No country found. shows. Add the region to each country's text if people search that way.
How would I show a third level?
A combobox list has one level of groups. For deeper trees, put the path in the label, such as Europe / Germany / Berlin, or use a Tree View.
Related
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Categories with Separators ComboboxA combobox whose pages are split into
- Collapsible Groups ComboboxA combobox whose department groups open
- Nested Sidebar Items CollapsibleA two-level sidebar tree where
- Simple Single Select ComboboxA single-select combobox that opens from
- Groups with Item Counts ComboboxA combobox whose group headings show how