Components

• Introduction
• Link
• List
• Description-list
• Table
• Button
• Button-group
• Message
• Input
• Select
• Textarea
• Checkbox
• Radio-group
• Segmented-control
• Content-container
• Form-container
• Media
• Summary
• Skip-link
• Header
• Footer
• Icons

Checkbox

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.

Accessibility

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

---

.checkbox

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>
</div>

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>
  </label>
</div>

---

.checkbox--invalid

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

<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>
  </label>
  <p class="message--error--radio-group" id="error3">
    <span class="fas fa-times">
      <span class="u-hidden">Error</span>
    </span>
    Error message
  </p>
</div>

---

.checkbox--disabled

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>
</div>