<div>
  <div class="sb-checkbox">
    <input type="checkbox" id="checkbox-1" class="sb-checkbox__input" checked>
    <label class="sb-checkbox__label" for="checkbox-1">
      <span class="sb-checkbox__faux">
       <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
         <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
       </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 11 11" focusable="false" aria-hidden="true" role="presentation">
         <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
       </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 11 11" focusable="false" aria-hidden="true" role="presentation">
         <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
      </span>
      <span class="sb-checkbox__text">Basic disabled and checked checkbox. </span>
    </label>
  </div>
</div>