Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← UI patterns

Toggle / Switch

A binary on/off control that takes effect the moment you flip it, no Save button, like flicking a light switch.

Settings

Tab to a switch, press Space to flip it. Each change applies immediately, with no Save. The dependent sound switch is disabled while Notifications is off.

Behavior

Keyboard

Tab
Moves focus to the switch, which shows a visible focus indicator. The whole control is reachable in the normal tab order.
Space
Toggles the switch between on and off and applies the change immediately. This is the expected and required key for a switch.
Enter
Optionally also toggles the switch. A native checkbox does not respond to Enter, so support it explicitly only on a custom button-based switch where users may expect it.
Parts

Track

The pill-shaped groove the thumb travels along. Its two ends represent off and on, and it typically shifts color or fill (off usually neutral, on usually the accent) to reinforce the state change. Color is a supporting cue, never the only one.

Thumb (handle / knob)

The circle that slides inside the track. Its position is the primary visual signal of state: one side off, the other on. The thumb must move when toggled, mimicking a physical switch, and can carry a small check or cross icon for an extra, non-color cue.

Label

The persistent text naming the setting, such as Wi-Fi or Email notifications. It must read clearly with on or off appended and must not change when the state changes, so a user is never unsure whether the label describes the current state or the action.

On/off indicator

An optional textual or iconographic cue (the words On and Off, or a check and cross) that states the current value independently of thumb position and track color. It resolves the which-state-am-I-in ambiguity for users who cannot perceive color or position.

States

Toggle and immediate feedback

Activating the control flips it between on and off and applies the change at once: the thumb slides, the track updates, and the underlying setting changes with no further step. Every flip needs an immediate, honest response on screen, because a toggle that produces no visible change reads as broken.

On, off, focus, disabled states

A switch carries four core states: on, off, a visible keyboard focus indicator, and disabled. Disabled means the setting cannot currently be changed (often because a parent setting is off) and should look clearly inert, not merely a dimmer shade of off, so it is not mistaken for the off value.

Loading and optimistic update

When the change must round-trip to a server, the switch may show a brief in-progress state (a spinner on the thumb or a disabled track) and then settle, or update optimistically and revert with a message if the request fails. Either way the control must end in a state that matches reality, never stranded mid-flip.

Generous, consistent hit target

The whole row, label included, should be tappable, and the target should meet a comfortable minimum (WCAG 2.2 sets 24 by 24 CSS pixels as the floor, with larger preferred for touch). Place and operate switches consistently across the product so people are not forced to relearn the control.

References

W3C APG Switch pattern page describing role switch, the required aria-checked attribute, and Space-key keyboard support.
APG: Switch patternW3C WAI
A rendered Notifications switch from the W3C APG example shown in the on position with the thumb slid to the right.
APG switch example, rendered and onW3C WAI

Use it

Figma
A switch component with on, off, focus, and disabled states
  1. Build a Switch component set with a State property: Off, On, Focus, and Disabled, plus a boolean for the on/off value.
  2. Make the track a pill (an Auto Layout or fixed frame) holding a circular thumb pinned left for off and right for on; expose the track fill and thumb fill as variables.
  3. For Focus, add a visible focus ring as a separate stroked layer so the developer can match a real :focus-visible outline.
  4. For Disabled, mute both track and thumb to a clearly inert treatment that is distinct from the plain Off state, not just a lighter off.

Add a Smart Animate transition between Off and On so the thumb slides rather than jumps, mirroring the physical-switch feel real users expect.

A settings row that switches versus one that submits
  1. Lay out two rows: one with a switch labeled Dark mode (immediate), one with a checkbox labeled I agree to the terms inside a form with a Save button.
  2. Annotate the switch row as instant-apply, no Save, reversible, single setting.
  3. Annotate the checkbox row as deferred, confirmed on submit, the right call for consent and multi-select.
  4. Add a one-line rule on the frame: if it needs a Save button or is legal consent, it is a checkbox, not a switch.

Keep this pair in the team library so the switch-versus-checkbox decision is settled once, not re-argued per feature.

Label the state, not just the color
  1. Add On and Off text (or a check and cross icon) to the On and Off variants so the value is stated in more than the thumb position.
  2. Keep the setting's name label fixed across variants; only the value indicator changes, never the label text.
  3. Check both variants against a grayscale preview to confirm the state is still distinguishable with color removed.
  4. Note for the build that the visible label must be programmatically associated with the control (label, aria-labelledby, or aria-label).

Run the Figma color-blindness or grayscale check on the component: if you cannot tell on from off without color, the variant needs a text or icon cue.

Accessibility

A switch is an operable binary control, so it must be a real focusable widget with an accurate state and a stable label. Build it from a native checkbox styled as a switch, or apply role=switch with the required aria-checked. The label names the setting and never changes with the state; the position, color, and any on/off text together make the state unambiguous. Space toggles it; the change applies immediately. Note that screen-reader support for role=switch is uneven, which is why a styled native checkbox is the most robust choice.

  1. Make the keyboard focus indicator clearly visible on the switch (WCAG 2.4.7).
  2. Convey on versus off without relying on color or thumb position alone; add a clear label and ideally an on/off word or icon (WCAG 1.4.1, use of color).
  3. Apply the change immediately on toggle and reflect it on screen; never require a separate Save for a true switch.
  4. Meet a comfortable target size (WCAG 2.2 SC 2.5.8 sets 24 by 24 CSS pixels as the minimum) and make the full row, label included, activate the control.
  5. Use a checkbox in a submitted form for required legal consent, and confirm any destructive change rather than firing it from a bare switch.
Research notes & sources

WAI-ARIA Switch: role=switch with required aria-checked=true|false (or a native checkbox styled as a switch); Space toggles

  1. Switch Pattern (ARIA Authoring Practices Guide)W3C WAI
  2. Switch Example (ARIA Authoring Practices Guide)W3C WAI
  3. ARIA: switch roleMDN Web Docs
  4. Toggle-Switch GuidelinesNielsen Norman Group
  5. Checkboxes vs. Switches in FormsNielsen Norman Group
  6. Toggles (Human Interface Guidelines)Apple Developer
  7. Switches (Material Design)Google
  8. Switch Role Support
  9. Understanding SC 1.4.1: Use of Color (Level A)W3C WAI (WCAG 2.1)
  10. Understanding SC 2.4.7: Focus Visible (Level AA)W3C WAI (WCAG 2.1)
  11. Understanding SC 2.5.8: Target Size (Minimum) (Level AA)W3C WAI (WCAG 2.2)
  12. Toggle switch accessibility checklistAtomic A11y