Toggle Switch Slide
The knob travels across the track while the accent fill comes up under it, settling once.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Toggle Switch Slide
*
* The knob travels across the track while the accent fill comes up
* underneath it, and the whole control settles once. A real switch:About this pattern
The workhorse of every settings screen, built so it survives being fired thirty times in a row. The knob crosses on a spring damped just enough to land with a single soft settle — a switch that wobbles at the end of its throw reads as loose hardware — and the engaged track is a separate layer that fades in underneath rather than a background color interpolated on the main thread. Arrow keys address a side directly, so pressing off twice never turns it on, and the keyboard ring appears only for keyboard focus.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
The knob slides and the track changes colour as a preference flips.
Related patterns
- Checkbox Check DrawThe box fills from its center and the tick strokes itself in over the fill.
- Toggle Group SelectOne highlight slides between grouped buttons and resizes to each label.
- Multi Select ChipsPicked options become chips in the row above the list, and the chips already there slide over to take each new one in.