Form Checkbox

invert

<div class="form-group form-checkbox form-checkbox--invert"> <input type="checkbox" id="invert01" name="checkboxGroup" /> <label for="invert01"> <span> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> </span> <span class="checkbox-label"> invert01 </span> </label> </div>

toggle switch

<div class="form-group form-checkbox toggle-switch"> <input type="checkbox" id="toggle" name="checkboxGroup" /> <label for="toggle"> <span> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> </span> <span class="checkbox-label"> toggle </span> </label> </div>

Checkbox Pattern

  • webshop
  • website
<div class="form-group form-checkbox "> <input type="checkbox" id="Checkbox-1" name="checkboxGroup" /> <label for="Checkbox-1"> <span> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> </span> <span class="checkbox-label"> Checkbox </span> </label> </div>