Toggle Switch

Toggle switches are used to switch between two possible states.

Examples

To render a toggle switch, apply the classes a-input and -toggle to an input type="checkbox". For proper styling, toggle switches require an empty label element defined immediately after their declaration.

Base

<input type="checkbox" class="a-input -toggle" id="toggle1">
<label for="toggle1"></label>

Disabled

<input type="checkbox" class="a-input -toggle" id="toggle2" disabled>
<label for="toggle2"></label>

No Label

By default, toggle switches are labeled with text ON/OFF. To disable this, apply the modifier -noText.

<input type="checkbox" class="a-input -toggle -noText" id="toggle3">
<label for="toggle3"></label>

Stacked

Group toggle switches in m-formGroup for easy stacking.

<div class="m-formGroup -mb--2">
  <input type="checkbox" class="a-input -toggle -noText" id="toggle4">
  <label for="toggle4"></label>
  <label class="-text" for="toggle4">Notifications</label>
</div>
<div class="m-formGroup">
  <input type="checkbox" class="a-input -toggle -noText" id="toggle5">
  <label for="toggle5"></label>
  <label class="-text" for="toggle5">Outage Alerts</label>
</div>

Inline

Apply the class -inline to m-formGroup to display toggle switches inline.

<div class="m-formGroup -inline -mr--3">
  <input type="checkbox" class="a-input -toggle -noText" id="toggle6">
  <label class="-mr--1" for="toggle6"></label>
  <label class="-text" for="toggle6">Notifications</label>
</div>
<div class="m-formGroup -inline">
  <input type="checkbox" class="a-input -toggle -noText" id="toggle7">
  <label class="-mr--1" for="toggle7"></label>
  <label class="-text" for="toggle7">Outage Alerts</label>
</div>