Switches

Best practices

Use switches only when the user needs to decide between two opposing, mutually exclusive states.
The action of a switch should take affect immediately and change the applicable data or content on the screen. Users should not be required to use a button or link to apply the intent of the switch.
Switch option labels should be concise and direct.

How it works

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

Toggle this switch element

Disabled switch element

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>