Mozilla Protocol
  • 19.1.0

Checkboxes

Checkboxes represent a set of options where multiple selections are allowed.

See the Choices component for custom styled checkboxes.

Tips

  • Wrap the <label> element around both the control and its text label. This offers a bigger target for clicking.
  • Use the mzp-u-inline class to override the base block-level label styling.
  • Use a single checkbox for a binary choice (such as a yes or no question) rather than two radio buttons, especially if the field isn’t required. A checked radio button can’t be unchecked, whereas a single checkbox behaves as a switch to let a user toggle between the two states (you can uncheck a checked checkbox).
<label for="checkbox-1" class="mzp-u-inline">
    <input type="checkbox" name="checkboxes" id="checkbox-1"> Option 1
</label>
<label for="checkbox-2" class="mzp-u-inline">
    <input type="checkbox" name="checkboxes" id="checkbox-2"> Option 2
</label>