2.6.1 #Components.checkbox.fake Fake checkbox

Toggle example guides Toggle HTML markup

A checkbox without the input to be used when you want full control of the input outside of the component.

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

Basic fake checkbox.
Basic fake checked checkbox.
Basic fake disabled checkbox.
Basic fake checked and disabled checkbox.
Markup 
<div>
  <div class="sb-checkbox">
    <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 fake checkbox. </span>
  </div>
  <div class="sb-checkbox sb-checkbox--checked">
    <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 fake checked checkbox. </span>
  </div>
  <div class="sb-checkbox sb-checkbox--disabled">
    <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 fake disabled checkbox. </span>
  </div>
  <div class="sb-checkbox sb-checkbox--checked sb-checkbox--disabled">
    <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 fake checked and disabled checkbox. </span>
  </div>
</div>
Source: components/_checkbox.scss, line 49