Shadcn.io is not affiliated with official shadcn/ui
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
Some users need bigger controls—accessibility and touch-first design demand generous targets. This React toggle group pattern uses size lg with type multiple for prominent multi-select controls with Lucide React icons. Built with shadcn/ui ToggleGroup and Radix UI primitives with outline variant borders, the large grouped toggles prioritize accessibility—perfect for tablet editors, accessibility-focused interfaces, presentation mode controls, kiosk applications, elderly-focused designs, or any text editing interface where oversized formatting controls reduce interaction friction and ensure reliable activation for users with motor impairments or limited precision on touchscreens.
Large Toggle Group preview
Installation
Related Components
Small Toggle Group
Compact small-sized toggle group
Default Size Toggle Group
Standard medium-sized toggle group
Large Toggle
Individual large toggle button
Basic Toggle Group
Simple toggle group pattern
Large Button Group
Grouped large buttons
Large Toolbar
Toolbar with large controls
FAQ
Was this page helpful?
Sign in to leave feedback.
Default Size Toggle Group
A default medium-sized toggle group without size prop using type multiple for standard text formatting toolbars with outline variant
Default Toggle Group
Toggle group with multiple selection allowing several items active simultaneously using type="multiple" for independent checkbox-style toggles