Shadcn.io is not affiliated with official shadcn/ui
Default Toggle Group
Toggle group with multiple selection allowing several items active simultaneously using type="multiple" for independent checkbox-style toggles
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.
Default Toggle Group preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Outline Toggle Group
Outline variant toggle group with border-only styling using variant="outline" for subtle transparent appearance until items become active