Switches

Switches allow users to enable or disable something, like a light switch.

On this page:

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">
  <input type="checkbox" class="custom-control-input" id="customSwitch1" checked="true">
  <label class="custom-control-label" for="customSwitch1">Value 1</label>
</div>
<div class="custom-control custom-control-inline custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Value 2</label>
</div>
<div class="custom-control custom-control-inline custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch3" checked="true" disabled>
  <label class="custom-control-label" for="customSwitch3">Value 3</label>
</div>
<div class="custom-control custom-control-inline custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch4" disabled>
  <label class="custom-control-label" for="customSwitch4">Value 4</label>
</div>

Resources

Previous page
Next page