Custom Checkboxes Components

Checkboxes

<div class="checkbox-group"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input" checked> <span class="checkbox-custom"></span> <span class="label-text">Option 1</span> </label> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input"> <span class="checkbox-custom"></span> <span class="label-text">Option 2</span> </label> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input"> <span class="checkbox-custom"></span> <span class="label-text">Option 3</span> </label> <label class="checkbox-label disabled"> <input type="checkbox" class="checkbox-input" disabled> <span class="checkbox-custom"></span> <span class="label-text">Disabled option</span> </label> </div>

Checkboxes Inline

<div class="checkbox-group checkbox-group--inline"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input" checked> <span class="checkbox-custom"></span> <span class="label-text">Option 1</span> </label> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input"> <span class="checkbox-custom"></span> <span class="label-text">Option 2</span> </label> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input"> <span class="checkbox-custom"></span> <span class="label-text">Option 3</span> </label> <label class="checkbox-label disabled"> <input type="checkbox" class="checkbox-input" disabled> <span class="checkbox-custom"></span> <span class="label-text">Disabled option</span> </label> </div>