Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Disabled Switch
Switch toggle with disabled prop for non-interactive read-only state with reduced opacity and no pointer events built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Not every control should be clickable—sometimes features aren't available yet, permissions restrict access, or prerequisites aren't met. This React switch uses disabled prop with shadcn/ui Switch component for non-interactive read-only binary state display. Built with Radix UI primitives with automatic opacity-50 styling and cursor-not-allowed, the disabled switch shows configuration without allowing changes—perfect for insufficient permissions, unavailable features, loading states, or any interface where users need to see toggle state but can't modify it yet.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Switch
Interactive unchecked switch
Checked Switch
Switch starting in checked state
Small Switch
Compact sized switch variant
Square Switch
Square corners minimal aesthetic
Disabled Button
Non-interactive button state
Disabled Input
Read-only text input field
Questions you might have
React Small Switch
Compact switch toggle with h-4 w-7 sizing for dense layouts space-constrained interfaces and desktop-only applications built with shadcn/ui
React Table with Vertical Lines
A React table with vertical border lines between columns using border-r for clear column separation and grid-like appearance