FancyUI
Switch — thumb travel — preview

Switch — thumb travel

Thumb travel and track tint are one transition, so the change reads as one event.

#minimal#select

Open docs

Use in FancyUI

Type
Interaction
Interaction
Select
Style
Minimal
Code availability
Open source

Why it works

The thumb's travel and the track's colour run on the same timing, so on and off read as a single move rather than two changes.

When to use it

Settings that apply immediately, without a save button.

Things to watch

A native checkbox with `role="switch"`, so Space toggles it and the state is announced. Travel is gated by reduced motion.

Implementation clues

  • translateX on :checked
  • colour transition
  • size tokens
  • role=switch