shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Custom Actions
With Footer Actions Combobox for React
A workspace combobox with a Manage Workspaces button below the list.
A workspace switcher with an action under the list. A separator and a Manage Workspaces button with a settings icon close off the popup, for what you'd do besides switching. Personal Workspace starts selected. Use it for switchers that also need a way to add or manage what they list.
Preview
Installation
FAQ
Where does the footer live?
Inside ComboboxContent, after ComboboxList: a ComboboxSeparator, then a p-1 block with a full-width ghost Button, justify-start text-xs.
What does Manage Workspaces do?
It closes the list. Open your settings page or a dialog from the same handler.
The demo controls open and sets it to false.
Can the footer be reached with the arrow keys?
No, the arrow keys move between workspaces. Reach the button with Tab or the pointer. Make it an option in the list if keyboard users need it often.
Related
- Create New Option Inline ComboboxA combobox that offers to create the
- Recent Selections Section ComboboxA combobox with a Recent section of files
- Clear/Reset Button ComboboxA combobox with a button that clears the
- Simple Single Select ComboboxA single-select combobox that opens from
- Standard DialogA share dialog with a read-only link, a
- Async/Dynamic Search ComboboxA combobox that fetches its options as