Toggle switch
An on or off control that looks like a sliding switch and usually applies the new setting immediately.
See it
What it is
A toggle switch is a binary control that shows and changes an on or off state. The sliding thumb borrows from a physical switch, and iPhone and Android settings made the pattern familiar. Unlike a checkbox in a form, flipping a switch usually applies the change immediately: turn on dark mode, mute notifications, enable Wi-Fi.
Reach for one when there are exactly two persistent states and the effect can happen as soon as the control changes. Use a checkbox when the choice joins other answers submitted later with Save, and use two radio buttons when both alternatives need words. Label the state being controlled, such as 'Email notifications', not the action 'Turn on'.
Gotcha: color and thumb position cannot carry the meaning alone. Keep the visible label, expose the checked state to assistive technology, and make the whole label row clickable. If changing the setting can fail, hold the old state until the request succeeds or show a clear error and restore it; a switch that lies about saved state is worse than a slow one.
Ask AI for it
Build a controlled toggle switch for 'Email notifications' using a button with role='switch' and a boolean aria-checked value. Make the track 44px by 24px with border-radius: 999px and a 20px circular thumb that moves using transform: translateX(). Let click, Enter, and Space toggle it, make the entire labelled row clickable, and show On or Off text without relying on color alone. Add a strong :focus-visible outline, animate background-color and transform over 160ms, disable the transition under prefers-reduced-motion, and expose disabled and pending states while an async settings request is saved.