6.1 #Checkbox.default Checkbox

Toggle example guides Toggle HTML markup

.sf-checkbox

Html
<div class="sf-checkbox">
  <input type="checkbox" class="sf-checkbox__input" id="id_1"/>
  <label class="sf-checkbox__label" for="id_1">
       <span class="sf-checkbox__icon"></span>
        <span class="sf-checkbox__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
    </label>
 </div>
<div class="sf-checkbox">
  <input type="checkbox" class="sf-checkbox__input" id="id_3" checked/>
  <label class="sf-checkbox__label" for="id_3">
       <span class="sf-checkbox__icon"></span>
        <span class="sf-checkbox__text">CheckBox checked</span>
    </label>
</div>
<div class="sf-checkbox">
  <input type="checkbox" class="sf-checkbox__input" id="id_2" disabled/>
  <label class="sf-checkbox__label" for="id_2">
       <span class="sf-checkbox__icon"></span>
        <span class="sf-checkbox__text">Checkbox disabled</span>
    </label>
</div>
<div class="sf-checkbox">
  <input type="checkbox" class="sf-checkbox__input" id="id_4" checked disabled />
  <label class="sf-checkbox__label" for="id_4">
       <span class="sf-checkbox__icon"></span>
        <span class="sf-checkbox__text">Checkbox disabled checked</span>
    </label>
</div>