i

Toggle

Choosing · researched

A switch that turns a single setting on or off with immediate effect.

atom · also called Switch, Toggle switch

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Switch native: partly antd 6.6.5
Variants
—
Sizes
medium, small
States documented
default, disabled, loading
Accessibility guidance
no

Upstream rc-switch source renders a button with role=switch and aria-checked, not an input checkbox.

1 corrected on re-read
  • a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance

docs ↗ · code ↗

Carbon

Toggle native: partly @carbon/react 1.117.0
Variants
Default toggle, Small toggle
Sizes
default, small
States documented
focus, disabled
Accessibility guidance
yes

Source renders a button with role=switch (native button plus ARIA), not an input checkbox. Also documents on/off, read-only, skeleton states.

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Looked at the Components index (design-system.service.gov.uk/components/), the govuk-frontend src/govuk/components directory listing, and the direct URL /components/switch/ (404). Also checked /components/toggle/ (404).

Material Web

Switch native: partly @material/web 2.5.0
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Source renders <input type=checkbox role=switch>. Docs show selected state and optional icons.

1 corrected on re-read
  • builds_on_native: "yes" → "partly" renders <input type="checkbox" role="switch"> (native input plus role override)

docs ↗ · code ↗

Primer

ToggleSwitch native: partly @primer/react 38.40.1
Variants
—
Sizes
small, medium
States documented
disabled, loading
Accessibility guidance
yes

Renders a button with role=switch (confirmed in source), not a checkbox input. aria-labelledby is required.

2 corrected on re-read
  • builds_on_native: "no" → "partly" Renders <button aria-pressed> inside wrapper div/spans; no role=switch anywhere in file
  • a11y_documented: "unread" → "yes" Read /accessibility/: expectations, Keyboard, Screen reader, Touch target

docs ↗ · code ↗

Spectrum

Switch native: partly @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, active, focus, disabled
Accessibility guidance
yes

SWC 1st-gen Switch extends the checkbox base, rendering an <input> given role=switch. Has an isEmphasized boolean, no named variants.

1 corrected on re-read
  • builds_on_native: "yes" → "partly" Switch extends CheckboxBase (<input type=checkbox>) and sets role=switch on it: native element plus ARIA role override

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Not in the 48-item components index at designsystem.digital.gov/components/overview/ nor in the packages directory of github.com/uswds/uswds (develop); no toggle/switch package.

Platform facts

Native elementinput type=checkbox with the switch attribute (non-standard; not in the WHATWG HTML Living Standard)The WHATWG HTML Living Standard (snapshot dated 5 October 2026) has no switch attribute: the checkbox state section lists only checked and required as applicable content attributes, and the single-page spec has no attr-input-switch id. MDN documents it on input type=checkbox, flagged experimental and non-standard, and says the checkbox exposes switch ARIA semantics, looks like a switch, and :indeterminate never matches. @mdn/browser-compat-data 8.1.4 (html.elements.input.switch): Safari 17.4; Chrome, Edge, Firefox not supported; standard_track false, experimental true. For a portable switch use role=switch on a button or checkbox (APG offers div, button and checkbox-input examples).
Baselineunavailable
APG patternswitch
ARIA roleswitch
Shipped by5 of 7 systems

Anatomy

  1. switch — The control (role switch); APG names no visual parts.
  2. label — Visible text contained within the element with role switch, a visible label referenced by aria-labelledby, or aria-label (APG). APG: the label must not change when the state changes.
  3. group optional — role group with label, or fieldset/legend, for related switches.
  4. description optional — aria-describedby text.

Keys the APG binds

  • SpaceWhen focus is on the switch, changes the state of the switch.
  • Enter (Optional)When focus is on the switch, changes the state of the switch.

The seven states

default Off (aria-checked false) unless on.
hover Pointer-only CSS state.
focus Tab focus; Space toggles.
active Momentary press; on/off is the persistent state.
disabled Native disabled on the checkbox input.
error n/a — Binary on/off; APG defines no validity for switch. MDN says an input switch behaves as a checkbox otherwise, so required would apply; not verified that any source recommends it.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 5 of 35 fields changed on the second read — open any “corrected” note to see what it said before.