iOS Toggle Switch
Native checkbox toggle whose knob can be tapped or dragged, snaps to the nearer side, stretches while pressed and cross-fades the track colour.
About This Component
An on/off switch that answers to both habits: tap it and the knob springs across, or take hold of the knob and push it, and it snaps to whichever side it was nearer when you let go. A short push still counts as a toggle, so the gesture never feels fussy.
Read the full effect overview
The control is a real input type="checkbox" with role="switch", so focus, Space, form submission and screen reader state all come from the browser. GSAP owns the knob's x and the track's colour cross-fade; the knob carries no CSS transform of its own. Ships in three looks, vault, glass and corporate, switched with one data-variant attribute.
What's Included
- Tap the track or drag the knob, both reach the same state
- Draggable with bounds, snapping to the nearer side on release
- A short drag still toggles, so a nudge is never ignored
- Track colour cross-fades between the off and on custom properties
- Knob stretches toward the direction of travel while pressed
- Optional label whose text follows the state
- Disabled state that refuses the pointer and the keyboard
- Three shipped variants: vault, glass, corporate
Perfect For
- Settings and preference panels
- Feature and notification opt-ins in account screens
- Filter and mode switches in dashboards
- Consent and permission rows in onboarding flows
How It Works
The checkbox is the state
Every path writes into the native checkbox and dispatches change; the animation is a listener on that one event. Clicking the track hits the transparent input directly, so the browser does the toggling, and the knob's drag path sets checked before dispatching. Nothing tracks the state in a variable of its own.
Snap, then reset
Draggable is created with type x and numeric bounds measured from the track. On release the knob is either within a few pixels of where it started, which counts as a tap and toggles, or it snaps to the nearer end. The tween always finishes with y at 0 and calls draggable.update(), so the next press starts from a clean measurement.
Colour from custom properties
The track colour is interpolated with gsap.utils.interpolate between the values read from --track-off and --track-on at the moment the gesture starts, so it tracks the knob live during a drag and cross-fades on a tap. A new variant changes CSS only.