<div>
  <div class="sb-checkbox">
    <input type="checkbox" id="checkbox-1" class="sb-checkbox__input">
    <label class="sb-checkbox__label" for="checkbox-1">
      <span class="sb-checkbox__faux">
        <svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
          <path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
        </svg>
      </span>
      <span class="sb-checkbox__text">Basic checkbox.</span>
    </label>
  </div>
  <div class="sb-checkbox">
    <input type="checkbox" id="checkbox-2" class="sb-checkbox__input" disabled>
    <label class="sb-checkbox__label" for="checkbox-2">
      <span class="sb-checkbox__faux">
        <svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
          <path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
        </svg>
      </span>
      <span class="sb-checkbox__text">Basic disabled checkbox.</span>
    </label>
  </div>
  <div class="sb-checkbox">
    <input type="checkbox" id="checkbox-3" class="sb-checkbox__input" disabled checked>
    <label class="sb-checkbox__label" for="checkbox-3">
      <span class="sb-checkbox__faux">
        <svg class="sb-checkbox__checkmark" viewBox="0 0 8 7">
          <path d="M7.68025,0 C5.067,1.97775 2.56075,4.6235 2.56075,4.6235 L0.7545,3 L0,3.7685 C0.74225,4.46625 2.46225,6.30925 3.044,7 C4.6815,4.26425 6.38375,2.224 8,0.3585 L7.68025,0 Z"></path>
        </svg>
      </span>
      <span class="sb-checkbox__text">Basic disabled and checked checkbox. </span>
    </label>
  </div>
</div>