Checkbox

Use the checkbox module to create custom checkboxes.

Examples

Basic

Option 1

<label class="checkbox">
  <input class="checkbox__input" name="check1" type="checkbox" required>
  <div class="checkbox__box">
    <div class="checkbox__icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8">
        <title>Checkmark</title>
        <path fill="#fff" d="M4,8.3c-0.2,0-0.4-0.1-0.5-0.2L0.2,4.9c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0L4,6.5l6.4-6.3c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L4.5,8.1C4.4,8.2,4.2,8.3,4,8.3z"/>
      </svg>      
    </div>
  </div>
  <span class="checkbox__label">Option 1</span>
</label>

Toggle Switch

<label class="toggle-switch">
  <input class="toggle-switch__input" type="checkbox" name="switch_1">
  <div class="toggle-switch__background">
    <div class="toggle-switch__indicator"></div>
  </div>
</label>