Switch & Toggle

Design a binary switch component that can be dropped into a settings form. Show the full control: label, helper text if needed, track, thumb, and the current on/off state. The default state should read clearly before interaction, with one state visually primary and the other clearly inactive.

Show the switch in its key states: off, on, hover, focus, pressed, and disabled. The animation should be short and functional, with the thumb sliding and the track updating at the same time. If you include text inside or beside the control, it must update with the state and never fight the label for attention.

Design for real form use, not a standalone demo. The control should align cleanly with surrounding content, keep a comfortable tap target, and preserve clarity in high-contrast or reduced-motion contexts. If you add a toggle-style variant, make sure it follows the same state logic and reads as a binary choice at a glance.

Use contrasting colors and clear labels to ensure the state of the switch is unmistakable at a glance. A playful click or slide sound effect can also elevate the tactile feel in the final interactive mockup.