Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch with On Label
A React switch with static On text label indicating the current enabled state with defaultChecked
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Some switches need state confirmation—is it on or off? This React switch shows static On label when checked. Built with shadcn/ui Switch with defaultChecked and span text, the label reinforces current state—perfect for power toggles, enable-disable controls, simple on-off switches, minimal UIs, or any switch where showing the current state as text (On when enabled) provides additional confirmation beyond visual switch position and users benefit from explicit state labeling.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Switch with State Labels
Dynamic on/off labels on both sides
Switch with Label
Switch with descriptive label
Switch with Description
Switch with label and description
Basic Switch
Switch without label
Status Badge
Status indicator component
Toggle Group
Group of toggle buttons