6 #Checkbox Checkbox

<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>

 <div style="width: 100px">
   <div class="sf-checkbox -ellipsis">
       <input type="checkbox" class="sf-checkbox__input" id="id_6" checked />
       <label class="sf-checkbox__label" for="id_6">
            <span class="sf-checkbox__icon"></span>
             <span class="sf-checkbox__text">Checkbox ellipsis</span>
         </label>
   </div>
 </div>

<div class="sf-checkbox">
   <input type="checkbox" class="sf-checkbox__input" id="id_5" checked />
   <label class="sf-checkbox__label" for="id_5">
        <span class="sf-checkbox__icon"></span>
     </label>
</div>