Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Default Size Toggle Group
A default medium-sized toggle group without size prop using type multiple for standard text formatting toolbars with outline variant
React Default Toggle Group
Toggle group with multiple selection allowing several items active simultaneously using type="multiple" for independent checkbox-style toggles