Checkbox and radio

Plain <input type="checkbox"> and <input type="radio">, drawn to match the rest of the library. Group them in a <fieldset> with a <legend>.

Basic

<article data-tone="card" style="display:grid;gap:1.2rem">
  <fieldset><legend>Outputs</legend>
    <label><input type="checkbox" checked> HTML pages</label>
    <label><input type="checkbox"> RSS feed</label>
  </fieldset>
  <fieldset><legend>On a broken link</legend>
    <label><input type="radio" name="broken" checked> Warn and carry on</label>
    <label><input type="radio" name="broken"> Stop the build</label>
  </fieldset>
</article>

A <fieldset> without data-segmented is a plain group: no border, a bold legend and its own gap.

Notes

• Both are redrawn with appearance: none; the tick and the dot are ::after pseudo-elements.
• Checked uses the go tone with its -fg for the mark, the same green as the switch.
• The box carries --s72-sink, so a control that holds a value reads as a well.
• Radios inside fieldset[data-segmented] and label[data-chip] are left out of these rules, because those components hide them.