Toggle

The thumb slides and the track color tweens.

Live demo

The preset here changes the whole site. Slow motion and reduced motion change this stage only.

Reduced motion

Notifications

Frame by frame

Every frame of the movement, on top of each other. Wide gaps are fast. Ghosts past the dashed outline are overshoot. It updates with the preset.

22 frames at 60 fps. Settles in 336 ms, no overshoot.

When to use

Switches and checkboxes: any control with two states that flips in place. The thumb moves on spring.fast, so it keeps up with fast repeated clicks. The track color is a tween, because color never springs.

Keep aria-checked on the control. The motion shows the change; the attribute carries it.

Recipe

Switches and checkboxes. The thumb slides and the track color tweens.

States of the toggle recipe
State	Property	Token	Now
off	progress	literal	0
	fill	literal	0
on	progress	literal	1
	fill	literal	1
transition	Movement (spring)	{spring.fast}	stiffness 715 · damping 53
transition	Fade duration	{duration.fast}	132ms
transition	Fade easing	{easing.standard}	cubic-bezier(0.2, 0, 0, 1)

Tokens used

spring.fast stiffness 715 · damping 53
duration.fast 132ms
easing.standard cubic-bezier(0.2, 0, 0, 1)

Code

/* toggle: Switches and checkboxes. The thumb slides and the track color tweens.
   Use: .motif-toggle on the track (role="switch" aria-checked), .motif-toggle-thumb on the thumb.
   The track is 2 thumbs wide, so the thumb travels 100% of its own width. */
.motif-toggle {
  transition: background-color var(--motif-duration-fast) var(--motif-ease-standard);
}
.motif-toggle-thumb {
  transition: transform var(--motif-spring-fast-duration) var(--motif-spring-fast);
}
.motif-toggle[aria-checked="true"] .motif-toggle-thumb {
  transform: translateX(100%);
}

/* Reduced motion: the variable overrides at the end of motif.css set
   travel to 0, scale to 1, and blur to 0, so this recipe needs no extra rule. */

Reduced motion

The thumb changes side at once, with no travel. The track color still fades.
Fades take 132ms (duration.fast), so the state change stays visible.
Turn on the Reduced motion box under the demo to preview it, or set your system to reduce motion.