Micro-interaction

Toggle Switch

Also called Switch, Switch Thumb Slide

A round knob slides along a track and the track color changes between off and on.

Settings, dark mode

  • checkbox-hack toggle
  • role=switch

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Toggle Switch" animation (also called a switch) to [where].
When it is turned on or off, the round knob should slide smoothly to the other end of the track while the track color changes: quick and crisp, with no bounce.
Keep it a real accessible switch (role="switch" with its checked state) that also works with the keyboard.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.