Checkboxes

Checkboxes allow users to select one or more options at the same time.

Edit on GitHub

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.

Usage

Group of Checkboxes

Value 1

Value 2

Value 5

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

Checkboxes

On this page:

Best Practices

Usage

Resources