shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Grouped
Recent vs All Items Combobox for React
A combobox with recently used projects above the rest.
A project picker that puts recent work first. Project Alpha and Project Beta sit under Recent with a clock icon, and Charlie, Delta and Echo follow under All Projects. Use it in switchers where people go back to the same few items most of the time.
Preview
Installation
FAQ
How are Recent and All Projects built?
Two ComboboxGroups with a ComboboxSeparator between them. Each project belongs to one of them.
How is the clock drawn?
A ClockIcon at size-3 opacity-50, rendered only in the Recent rows and hidden from screen readers.
Why aren't recent projects listed twice?
All Projects lists only those that aren't recent, so each project has one row and one value.
Does the search cover both groups?
Yes. A group with no matches is hidden, and No project found. shows when neither has one.
How do I keep Recent up to date?
The demo's list is fixed. In an app, store the last few picks, newest first, and build both groups from them on each render. Recent Selections Section shows a version that updates as you pick.
Related
- Recent Selections Section ComboboxA combobox with a Recent section of files
- Favorites + All Items ComboboxA combobox with starred favorites above
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Categories with Separators ComboboxA combobox whose pages are split into
- Simple Single Select ComboboxA single-select combobox that opens from
- Groups with Item Counts ComboboxA combobox whose group headings show how