The checkbox component represents an <input> element with a type of checkbox and its explicitly associated <label> element.

Overall usage

Used to present one or more single or multiple choice options to users.


  • The <input> element needs an explicitly associated <label>.
  • The contents of the <label> must come after the <input> element.


Used to display an <input> form control with the type of checkbox, and an explicitly associated <label>.

<div class="checkbox">
  <input class="checkbox__control" type="checkbox" id="example1">
  <label class="checkbox__label" for="example1">Checkbox label</label>

A required flag can be placed inside the <label> element using the message--required class. The required boolean attribute must be added to the <input>.

<div class="checkbox">
  <input class="checkbox__control" type="checkbox" id="example2" required>
  <label class="checkbox__label" for="example2">
    Checkbox label
    <span class="message--required">(Required)</span>


Used to inform the user that the form control has not been filled-in correctly.

Error Error message

<div class="checkbox checkbox--invalid">
  <input class="checkbox__control" type="checkbox" id="example3" required aria-describedby="error3">
  <label class="checkbox__label" for="example3">
    Checkbox label
    <span class="message--required">(Required)</span>
  <p class="message--error--radio-group" id="error3">
    <span class="fas fa-times">
      <span class="u-hidden">Error</span>
    Error message


Used to present a disabled <input> element and label. The disabled boolean attribute must be added to the <input>.

<div class="checkbox checkbox--disabled">
  <input class="checkbox__control" type="checkbox" id="example4" disabled>
  <label class="checkbox__label" for="example4">Checkbox label</label>