Figma toggle components

A toggle makes one promise: flip it, and the change happens now. No save button, no confirmation step. That immediacy is what makes toggles feel great in settings screens, notification preferences, and pricing page billing switches, and also what makes them wrong for half the places they end up. A well-built toggle is small enough to ignore and clear enough to trust, and both qualities come from details that are easy to skip. The 2 toggle components and 64 variants above handle the visual side; the semantics are worth two minutes of your attention.

Toggle, switch, checkbox: which one?

Toggle and switch are two names for the same control, and covering both matters because iOS and Material call it a switch while most Figma libraries say toggle. The real decision is toggle vs checkbox. Nielsen Norman Group's guidelines draw the line cleanly: a toggle applies its change immediately, while a checkbox belongs in forms where changes are gathered up and submitted together.

A toggle is also strictly binary. If you're tempted by a third state, you want radio buttons instead.

One more boundary worth respecting: because toggles act immediately, they're wrong for destructive or hard-to-reverse changes. Deleting data or downgrading a plan deserves a deliberate action and a confirmation modal, not a switch someone can brush on a touchscreen.

Anatomy and the two styles

Each toggle is a track with a sliding thumb, in two visual styles: the default filled style and a slim style where the thumb overhangs a thinner track. Both come in two sizes (the default style measures 36×20px at sm and 44×24px at md) and in versions with a label and supporting text beside the control.

Use the sm size in dense settings lists where a dozen toggles stack vertically, and md when a toggle stands alone, like the billing period switch on a pricing page. The supporting text line is for consequences ("You'll be notified about mentions and replies"), which beats making users flip the switch to find out.

One rule worth enforcing from the NN/g guidance: the label describes what the toggle controls and stays static. "Email notifications" is right; a label that flips between "On" and "Off" as you click makes people wonder whether it's the state or the action.

Every interactive state

Both styles cover off and on in default, hover, focus, and disabled states. The focus ring is there because keyboard users flip switches with the Space key and need to see which control they're on, which is also the core of the W3C switch pattern your developers will implement.

And since touchscreens have no hover, the on/off difference is carried by the thumb position and track color, not by a hover-only affordance.

Prototyping the flip in Figma

Because on and off exist as variants of one component, a working toggle is one "change to" interaction with Smart Animate, which slides the thumb across the track instead of teleporting it. Set it up once inside the component set and every toggle in your prototype flips on click, which turns a static settings mockup into something user testing participants can actually poke at. Figma's guide to interactive components covers the mechanics.

When it's time to build, the same toggles exist in code. Untitled UI React toggles are open source, built with Tailwind CSS and React Aria's Switch, with keyboard behavior and switch semantics handled for you.