Shadcn.io is not affiliated with official shadcn/ui
Disabled Switch
Switch toggle with disabled prop for non-interactive read-only state with reduced opacity and no pointer events built with shadcn/ui
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.
Disabled Switch preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Table with Vertical Lines
A React table with vertical border lines between columns using border-r for clear column separation and grid-like appearance