Checkbox group

Checkbox 1

Checkbox 2

Checkbox 3

HTML

    
<fieldset class="form__field checkbox-group">
  
  <div class="checkbox">
    <label>
      <input id="checkboxes-checkbox_1" name="checkboxes" value="checkbox_1" type="checkbox"   />
      Checkbox 1
      <span class="checkmark"></span>
    </label>
  </div>
  
  <div class="checkbox">
    <label>
      <input id="checkboxes-checkbox_2" name="checkboxes" value="checkbox_2" type="checkbox"   />
      Checkbox 2
      <span class="checkmark"></span>
    </label>
  </div>
  
  <div class="checkbox">
    <label>
      <input id="checkboxes-checkbox_3" name="checkboxes" value="checkbox_3" type="checkbox"   />
      Checkbox 3
      <span class="checkmark"></span>
    </label>
  </div>
  
</fieldset>

SCSS

    .checkbox-group {
  position:relative;
  border: none;
  margin: 0 0 28px;
  padding: 0;
}

.checkbox-group--compact {
  .checkbox {
    display: inline;
  }
}

Connect Dementia Research

Pattern Library

Checkbox group

HTML

SCSS