Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Square Switch with Text
Square switch toggle with animated ON/OFF text labels that slide with thumb for explicit state indication built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Plain toggles make users guess—ON/OFF text removes all doubt. This React square switch combines shadcn/ui Switch with sliding text labels that animate with thumb position using cubic-bezier easing and translate transforms. Built with Radix UI primitives, controlled state, and custom grid layout with peer selectors, the animated text provides explicit state feedback—perfect for critical toggles, power buttons, mode switches, enable/disable controls, or any interface where ambiguous toggle states cause confusion and explicit ON/OFF labeling prevents user errors through clear visual confirmation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Square Switch
Basic square switch without text
Square Switch with Label
Square switch with external label
Square Theme Toggle
Square switch with theme icons
Standard Switch
Default rounded switch
Destructive Button
Button with explicit action text
Badge
Status badge component