shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Multi Select
With Clear All Functionality Combobox for React
A multi-select combobox with a button that clears every picked color at once.
A color picker with an X next to the chevron while anything is selected. One click clears every pick, instead of unpicking them one at a time. Red and Blue start selected. Use it for filters and other multi-selects people often reset.
Preview
Installation
FAQ
Where does the clear button sit?
In a relative wrapper around the combobox, positioned absolute end-8 so it lands just before the chevron. It's a sibling of the trigger, not inside it, since a button can't contain another button.
What does it clear?
The whole selection: the demo sets the value to an empty array, and the button goes back to Select colors....
How is the button styled?
A ghost, pill, icon-xs Button with an XIcon. It has aria-label Clear colors, since the icon has no text.
Related
- With Select All Option ComboboxA multi-select combobox with a Select All
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- Clear/Reset Button ComboboxA combobox with a button that clears the
- With Item Count in Trigger ComboboxA multi-select combobox that sums up the
- With Max Selections Limit ComboboxA multi-select combobox that stops at
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend