Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - With Select All Option
A React multi-select combobox with Select All option separated by CommandSeparator enabling bulk selection and deselection of all items with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Permissions need bulk actions—selecting one by one wastes time. This React multi-select combobox adds Select All CommandItem with font-medium styling using CommandSeparator visual boundary between bulk action and individual permissions. Built with shadcn/ui Command and Popover featuring allSelected check comparing selectedValues length to total items. The Select All pattern streamlines bulk operations—perfect for permission systems, feature toggles, notification preferences, or anywhere users frequently need all or most options eliminating tedious individual clicking through efficient batch selection.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Multiple Items with Badges
Badge display with removal buttons
With Clear All Functionality
Clear button in trigger
With Max Selections Limit
Limited selection count
With Item Count in Trigger
Count-based trigger display
Select All Checkbox
Checkbox-based select all pattern
Categories with Separators
CommandSeparator usage
Questions you might have
React Combobox - Multiple Items with Badges
A React multi-select combobox displaying selected items as removable badges with X icons inside the trigger button using flex-wrap layout with shadcn/ui
React Combobox - With Item Count in Trigger
A React multi-select combobox showing selected item count with proper pluralization in the trigger button displaying X skill(s) selected summary with shadcn/ui