Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Default Toggle Group
Toggle group with multiple selection allowing several items active simultaneously using type="multiple" for independent checkbox-style toggles
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text formatting needs multiple options at once—bold AND italic AND underline together—that's where toggle groups shine. This React toggle group uses shadcn/ui ToggleGroup with type equals multiple allowing independent toggles—click bold, click italic, both active simultaneously—checkbox behavior. Built with Radix UI state management and Lucide React formatting icons in connected pill layout, multi-select toggle groups create efficient toolbars—perfect for rich text editors, formatting controls, filter panels, view options, or any interface where users need to combine multiple binary states without mutual exclusivity.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Single Selection Toggle Group
Radio button behavior with type single
Outline Toggle Group
Outline variant styling
Disabled Toggle Group
Non-interactive disabled state
Default Toggle
Standalone toggle button
Default Checkbox
Multiple independent selections
Button Group
Grouped button controls
Questions you might have
React Large Toggle Group
A large toggle group with size lg and type multiple for prominent text formatting controls with generous touch targets and outline variant
React Outline Toggle Group
Outline variant toggle group with border-only styling using variant="outline" for subtle transparent appearance until items become active