shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Grouped
Collapsible Groups Combobox for React
A combobox whose department groups open and close from their headings.
A department picker where each group heading is a button with a chevron. Engineering starts open and Marketing starts closed, and a click on a heading toggles its items. Use it for long grouped lists where people usually need one section and the rest can stay folded away.
Preview
Installation
FAQ
How is the collapsed state stored?
In a record of group names, which starts with Marketing collapsed. The heading button flips the entry for its group, read from a data-group attribute.
What is in each heading?
A button inside the group label with a ChevronRightIcon when closed or a ChevronDownIcon when open, then the group name. It sets aria-expanded to match.
Does the search find items in a closed group?
No. Only open groups are searched, the way the closed group's items are hidden. Open the group first, or expand every group while the search box has text.
Related
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Nested/Hierarchical Groups ComboboxA combobox that lists countries under
- Nested Sidebar Items CollapsibleA two-level sidebar tree where
- Standard Accordion with ChevronA bordered accordion of three questions
- Categories with Separators ComboboxA combobox whose pages are split into
- Simple Single Select ComboboxA single-select combobox that opens from