Checkbox & Radio

Selection controls. Use .checkbox or .radio on native input elements.

Checkbox

Unchecked Checked Disabled

<div style="display:flex;gap:1rem;align-items:center;">
  <input class="checkbox" type="checkbox" id="c1" />
  <label for="c1">Unchecked</label>
  <input class="checkbox" type="checkbox" id="c2" checked />
  <label for="c2">Checked</label>
  <input class="checkbox" type="checkbox" disabled />
  <label>Disabled</label>
</div>

Radio

Option A Option B

<div style="display:flex;gap:1rem;align-items:center;">
  <input class="radio" type="radio" name="r" id="r1" checked />
  <label for="r1">Option A</label>
  <input class="radio" type="radio" name="r" id="r2" />
  <label for="r2">Option B</label>
</div>

Class Reference

Class	Description
.checkbox	Styled checkbox with checkmark icon when checked
.radio	Styled radio button with dot icon when checked