Checkbox, radio, switch

[type="checkbox"] and [type="radio"] are restyled from scratch (appearance: none) with custom check/dash icons; adding role="switch" to a checkbox turns it into a toggle switch with no extra markup.

<fieldset>
  <legend>Checkboxes</legend>
  <label>
    <input type="checkbox" name="opt" checked>
    Checked
  </label>
  <label>
    <input type="checkbox" name="opt">
    Unchecked
  </label>
</fieldset>

<fieldset>
  <legend>Radios</legend>
  <label>
    <input type="radio" name="radio" value="a" checked>
    Option A
  </label>
  <label>
    <input type="radio" name="radio" value="b">
    Option B
  </label>
</fieldset>

<fieldset>
  <legend>Switch</legend>
  <label>
    <input type="checkbox" role="switch" checked>
    Enable notifications
  </label>
</fieldset>

<label><input type="checkbox" checked> Checked</label>
<label><input type="radio" name="r" checked> Option A</label>
<label><input type="checkbox" role="switch" checked> Enable notifications</label>

Behavior #

• Checked state uses --cirth-primary-surface and the matching border token, plus an inline check icon (--cirth-icon-checkbox); an indeterminate checkbox shows a dash (--cirth-icon-minus) instead.
• Radios are checked with a filled inner circle instead of an icon.
• A [type="checkbox"][role="switch"] becomes a pill shaped toggle: track color from --cirth-switch-background-color / --cirth-switch-checked-background-color, thumb color from --cirth-switch-color, which defaults to --cirth-primary-on-surface (the same token buttons use for their text) rather than a fixed white — keep the two in sync if you customize --cirth-primary-on-surface, and recheck contrast (WCAG 1.4.11, >= 3:1) against both --cirth-switch-background-color and --cirth-switch-checked-background-color if you do.
• aria-invalid="true"/"false" recolor the checked state the same way as other form elements (see Forms overview).
• A label that contains a checkbox/radio becomes cursor: pointer and sizes itself to its content instead of stretching full width.