« Back to home

Testing the switch attribute

switch is a boolean attribute valid only on <input type="checkbox">. When present, it renders the checkbox as an on/off switch rather than a traditional checkbox, and the browser exposes it to assistive technology with role="switch" automatically, no ARIA required. The underlying behaviour doesn't change, it's still a checkbox for form submission purposes, and a switch never supports the indeterminate state that an ordinary checkbox can.

This is a newer HTML feature with still-evolving browser support. Unsupported browsers silently ignore the attribute and render an ordinary checkbox instead, worth confirming directly which of your standard browsers and screen readers actually recognise it.

Default

A standard checkbox, no switch attribute, included for comparison.

<input id="switch-default" type="checkbox">
<label for="switch-default">Enable notifications</label>

Switch present

The same checkbox with the switch attribute added. Where supported, this changes its visual appearance to an on/off switch and its accessible role to switch instead of checkbox, automatically.

<input id="switch-present" type="checkbox" switch>
<label for="switch-present">Enable notifications</label>

Custom styled switch

This example uses switch purely as a CSS hook (input[switch]), not for its native rendering. The checkbox itself stays fully keyboard-operable and its checked state is untouched, it's just made visually invisible and overlaid on a custom OFF/ON track built with plain CSS (:has() and sibling styling). Unlike Safari's own switch pseudo-elements, which are still behind an experimental flag, this renders consistently in any current browser.

<label for="switch-styled">Enable notifications</label>
<span class="switch-track">
  <input class="switch-input" type="checkbox" switch id="switch-styled">
  <span class="switch-off" aria-hidden="true">OFF</span>
  <span class="switch-on" aria-hidden="true">ON</span>
</span>

« Back to home