vocab.design

component · forms

Switch

also called toggle switch (primer), toggle (community), on off switch (community)

A control shaped like a sliding track that turns one setting on or off and applies the change the moment it is flipped, with no separate save step.

A switch is a setting, not a command. Flipping it is the commit: there is no Save button waiting downstream and no Apply to forget, which is why it belongs in preferences and control panels rather than in forms. Label it with the setting’s name (Do not disturb, Two-factor authentication) rather than with an instruction, because the thumb’s position already says which way it is set, and a label that reads “Turn on notifications” leaves a reader working out what “off” means.

The near neighbour is the checkbox, and the difference is when the change lands. A checkbox states a value that something later collects, so it can sit in a group, carry a mixed state, and be undone by never submitting the form. A switch has no later: it is alone with one setting, it is on or off with no third state, and undo means flipping it back. A toggle button is a third thing again, a button that stays pressed, and it issues a command (bold this text) rather than holding a preference.

“Toggle” is the loosest word in this corner of the vocabulary. Apple and Carbon name the component Toggle, Material, Polaris, and the ARIA Authoring Practices Guide name it Switch, and in conversation “toggle” gets applied to anything with two states, including toggle buttons and disclosure triggers. Say switch when you mean the sliding on or off setting. In code, give it role="switch" (or a checkbox input carrying that role) so it announces on and off rather than checked and unchecked.

The immediacy is a promise, so a switch has to keep it. If the change is slow or can fail, either show the new state at once and roll it back with an explanation, or use a control that admits to a save step. Leaving the thumb sitting mid-flip while a request is in the air teaches readers that the position cannot be trusted, and that is the one thing the shape is for.

Which word?

If you wantsay
a setting that takes effect immediatelyswitch
each option is independently on or offcheckbox
one app feature deserves a place in system controlsquick settings tile
a button that stays down once you press ittoggle button

Implementations

Specimens illustrate the concept; for production use, start here.

aria-apgSwitch
materialSwitch
higToggle
carbonToggle
polarisSwitch
base-uiSwitch

Sources