shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Multi Select
Selected Items List Below Combobox for React
A multi-select combobox with a count on the button and the picked topics as badges below it.
A topic picker that keeps the button short. It says 2 topic(s) selected, and the picked topics show as badges underneath, so the button stays one line however many are chosen. Frontend and Backend start selected. Use it in forms where the picks should stay visible without crowding the field.
Preview
Installation
FAQ
Where is the selection kept?
In the demo's state, passed to Combobox and updated on every change. Both the button and the badges read from it.
The value is an array of topic items, starting with the first two.
What does the button show?
The number of picked topics, as 2 topic(s) selected, or Select topics... when none are.
How are the badges rendered?
A flex flex-wrap gap-1 row of secondary Badges, one per picked topic, below the combobox. The row is hidden when nothing is selected.
How do I remove a topic?
Open the list and pick it again: in a multiple combobox a second pick clears it. The badges are display only. Add a remove button to them if people should clear picks from there.
Related
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- With Item Count in Trigger ComboboxA multi-select combobox that sums up the
- With Clear All Functionality ComboboxA multi-select combobox with a button
- Recent Selections Section ComboboxA combobox with a Recent section of files
- With Select All Option ComboboxA multi-select combobox with a Select All
- With Checkboxes Visible ComboboxA multi-select combobox that marks each