Switches

Best Practices

• Please read Label Guidance first.
• Use this when users can toggle a feature on or off.
• Users expect Switches to take immediate effect.
• Switches are custom-styled Checkboxes.

Usage

<div class="custom-control custom-control-inline custom-switch form-check form-switch">
  <input type="checkbox" class="custom-control-input form-check-input" role="switch" id="customSwitch1" checked>
  <label class="custom-control-label form-check-label" for="customSwitch1">Value 1</label>
</div>
<div class="custom-control custom-control-inline custom-switch form-check form-switch">
  <input type="checkbox" class="custom-control-input form-check-input" role="switch" id="customSwitch2">
  <label class="custom-control-label form-check-label" for="customSwitch2">Value 2</label>
</div>
<div class="custom-control custom-control-inline custom-switch form-check form-switch">
  <input type="checkbox" class="custom-control-input form-check-input" role="switch" id="customSwitch3" checked disabled>
  <label class="custom-control-label form-check-label" for="customSwitch3">Value 3</label>
</div>
<div class="custom-control custom-control-inline custom-switch form-check form-switch">
  <input type="checkbox" class="custom-control-input form-check-input" role="switch" id="customSwitch4" disabled>
  <label class="custom-control-label form-check-label" for="customSwitch4">Value 4</label>
</div>

Resources

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