Switch

Switches are toggle element that switch between an Off and On state on tap or click. They make use of checkbox inputs (or radio buttons) and require no javascript.

Checkbox Switch

A checkbox switch can be made with minimal markup


View HTML 
<div class="switch">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>

Radio Switch

When using radio buttons, each switch will turn off the other switches in the group.


View HTML 
<div class="switch">
  <input id="radioSwitch1" type="radio" name="radioGroup" checked="checked">
  <label for="radioSwitch1"></label>
</div>


<div class="switch">
  <input id="radioSwitch2" type="radio" name="radioGroup">
  <label for="radioSwitch2"></label>
</div>


<div class="switch">
  <input id="radioSwitch3" type="radio" name="radioGroup">
  <label for="radioSwitch3"></label>
</div>

Switch Sizes

The switch supports three additional sizes, tiny, small, and large.

Tiny


View HTML 
<div class="switch tiny inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>

Small


View HTML 
<div class="switch small inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>

Regular


View HTML 
<div class="switch regular inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>

large


View HTML 
<div class="switch large inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>

Brand Support

The switches support brand colors for checked states and light/dark themes for the unchecked states.

.switch


View HTML 
<div class="switch">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.inverse.switch


View HTML 
<div class="switch inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.alt.switch


View HTML 
<div class="switch alt">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.alt.inverse.switch


View HTML 
<div class="switch alt inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.play1.switch


View HTML 
<div class="switch play1">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.play1.inverse.switch


View HTML 
<div class="switch play1 inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.play3.switch


View HTML 
<div class="switch play3">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.play3.inverse.switch


View HTML 
<div class="switch play3 inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.play5.switch


View HTML 
<div class="switch play5">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.play5.inverse.switch


View HTML 
<div class="switch play5 inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.playbar.switch


View HTML 
<div class="switch playbar">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.playbar.inverse.switch


View HTML 
<div class="switch playbar inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.sub.switch


View HTML 
<div class="switch sub">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.sub.inverse.switch


View HTML 
<div class="switch sub inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.connect-amp.switch


View HTML 
<div class="switch connect-amp">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.connect-amp.inverse.switch


View HTML 
<div class="switch connect-amp inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.connect.switch


View HTML 
<div class="switch connect">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.connect.inverse.switch


View HTML 
<div class="switch connect inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.light.switch


View HTML 
<div class="switch light">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.light.inverse.switch


View HTML 
<div class="switch light inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.dark.switch


View HTML 
<div class="switch dark">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>
.dark.inverse.switch


View HTML 
<div class="switch dark inverse">
  <input type="checkbox" id="checkboxSwitch">
  <label for="checkboxSwitch"></label>
</div>