Switch

A checkbox with role="switch" becomes a switch. It is a real checkbox, so it submits with the form and reads as a switch to a screen reader.

Basic

<p style="display:grid;gap:1rem">
  <label><input type="checkbox" role="switch" checked> Rebuild on save</label>
  <label><input type="checkbox" role="switch"> Minify the output</label>
</p>

Clicking the label flips the switch, because the input sits inside it.

Notes

• role="switch" is the whole API; no data attribute and no JavaScript.
• The on state uses the go tone, the same green that marks an allowed thing everywhere else.
• Corners follow --s72-radius-pill, so the switch is square until you round it yourself.