3.5.5 atoms.form-controls.input-checkbox Input checkbox

Toggle example guides Toggle HTML markup

The input element should have a parent with class checkbox. The label always comes after the input. The visual part of the element is only the label. The user clicks on the label and the :before pseudo-element changes in style. The input itself stays hidden from the user as it iss not themable.

The for attribute is necessary to bind the our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.

Example
Markup: 02-atoms/form-controls/form-input-checkbox.twig
<div class="form-group">
  <div class="checkbox">
    <input type="checkbox" id="test5">
    <label for="test5">Red</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="test6" checked="">
    <label for="test6">Yellow</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="test7" checked="" disabled="disabled">
    <label for="test7">Green</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="test8" disabled="disabled">
    <label for="test8">Brown</label>
  </div>
</div>
Source: 02-atoms/form-controls/_radio-checkbox.scss, line 18