shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Custom Actions
Recent Selections Section Combobox for React
A combobox with a Recent section of files above the full list.
A file picker that puts recently opened files first. package.json and index.tsx sit under Recent with a clock icon, and README.md, tsconfig.json and App.tsx follow under All Files. Use it for file pickers and switchers, where people go back to the same few items.
Preview
Installation
FAQ
How are the two sections built?
Two ComboboxGroups, Recent and All Files, with a ComboboxSeparator between them.
Each group starts with a ComboboxLabel.
How is the clock drawn?
A ClockIcon at size-3 opacity-50, only in the Recent rows and hidden from screen readers.
Why aren't recent files listed twice?
All Files leaves out the recent ones, so each file has one row and one value.
Does Recent update when I pick a file?
Not in this demo: the list is fixed. Store the last few picks, newest first, and build the Recent group from them to make it live.
Related
- With Quick Filters ComboboxA combobox with filter buttons above the
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- With Footer Actions ComboboxA workspace combobox with a Manage
- Simple Single Select ComboboxA single-select combobox that opens from
- Create New Option Inline ComboboxA combobox that offers to create the
- Simple Command MenuAn inline command menu with a search