Checkboxes

Best Practices

• Please read Label Guidance first.
• When possible, present them in a vertical list.
• If only one item can be selected, use Radios.
• If the user needs to activate or deactivate something, use a Switch instead.
• Ensure the id of the input matches the for of the label.
• Set a checkbox as the default choice by adding the checked attribute to it.
• If a checkbox is required, add the required attribute to it.

Usage

<div class="form-group">
  <p class="label">Group of Checkboxes</p>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="checkboxValue1">
    <label class="custom-control-label" for="checkboxValue1">Value 1</label>
  </div>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="checkboxValue2" checked>
    <label class="custom-control-label" for="checkboxValue2">Value 2</label>
  </div>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="checkboxValue5" disabled>
    <label class="custom-control-label" for="checkboxValue5">Value 5</label>
  </div>
</div>

Resources

• Design.gov - Checkbox (Best Practices)
• Section 508 Guidelines
• Web Content Accessibility Guidelines (WCAG)
• Bootstrap Documentation - Forms