Switch

A control that can be toggled on or off.

Basic Usage

You can create a Switch by creating an input with a type of checkbox and giving it the switch class.

<input type="checkbox" class="switch" />

Label

To create a labeled Switch, put the switch class on a label element. Inside the label, put the label text followed by an input[type=checkbox]. The input does not need to have the switch class.

Show Advanced Options

<label class="switch">
  Show Advanced Options
  <input type="checkbox" />
</label>

Small Variant

To make a Switch smaller, add the class small.

Show Advanced Options

<input type="checkbox" class="switch small" />

<label class="switch small">
  Show Advanced Options
  <input type="checkbox" />
</label>