Shadcn.io is not affiliated with official shadcn/ui
Disabled Toggle Group
Disabled toggle group with non-interactive state using disabled prop applying opacity-50 and cursor-not-allowed to all items simultaneously
Sometimes entire toolbars aren't available—loading states, insufficient permissions, incompatible document modes—users need to see unavailable controls. This React toggle group uses shadcn/ui's disabled prop on the group level with Radix UI applying opacity-50 and cursor-not-allowed to all items automatically—grayed out toolbar signals unavailability clearly. Built with Lucide React formatting icons in connected pill layout, disabled toggle groups stay visible but non-interactive—perfect for conditional formatting options, permission-restricted features, loading placeholders, read-only modes, or any interface where showing unavailable grouped controls with clear visual feedback matters more than hiding them completely.
Disabled Toggle Group preview
Installation
Related Components
Default Toggle Group
Interactive enabled multiple selection
Outline Toggle Group
Outline variant styling
Single Selection Toggle Group
Radio button behavior
Disabled Toggle
Single disabled toggle button
Button Group
Grouped button controls
Toolbar
Complete toolbar component
FAQ
Was this page helpful?
Sign in to leave feedback.
Single Selection Toggle Group
Single selection toggle group using type="single" for radio button behavior allowing only one active item with mutually exclusive choices
Tooltip with Title and Description
A tooltip with structured content showing title in font-semibold and description in text-xs using flex-col gap-1 layout