Checkbox

<div class="d-f ai-c g-2">
  <input type="checkbox" id="checkbox-basic" class="d-4 ac-slate" />
  <label for="checkbox-basic" class="fs-sm tc-slate">Accept terms and conditions</label>
</div>

<div class="d-f ai-c g-2">
  <input type="checkbox" id="checkbox-checked" class="d-4 ac-slate" checked />
  <label for="checkbox-checked" class="fs-sm tc-slate">Email notifications</label>
</div>

<div class="d-f fd-c g-3">
  <div class="d-f ai-c g-2">
    <input type="checkbox" id="checkbox-disabled" class="d-4 ac-slate" disabled />
    <label for="checkbox-disabled" class="fs-sm tc-slate-6">Disabled unchecked</label>
  </div>
  <div class="d-f ai-c g-2">
    <input type="checkbox" id="checkbox-disabled-checked" class="d-4 ac-slate" disabled checked />
    <label for="checkbox-disabled-checked" class="fs-sm tc-slate-6">Disabled checked</label>
  </div>
</div>

<div class="d-f as-fs g-2">
  <input type="checkbox" id="checkbox-desc" class="d-4 ac-slate mt-1" checked />
  <div>
    <label for="checkbox-desc" class="fs-sm fw-600 tc-slate d-b">Marketing emails</label>
    <p class="fs-sm tc-slate-6 m-0">Receive emails about new products and features.</p>
  </div>
</div>