Shadcn.io is not affiliated with official shadcn/ui
Switch with On Label
A React switch with static On text label indicating the current enabled state with defaultChecked
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.
Switch with On Label preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.