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

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>

Custom Size

To customize the size of a Switch, set the --switch-scale CSS variable on the element to a unitless number. A value of `1` corresponds to the default size.

Scale of 1 (default size) Scale of 1.25 Scale of 0.75

<label class="switch" style="--switch-scale: 1">
  Scale of 1 (default size)
  <input type="checkbox" />
</label>
<label class="switch" style="--switch-scale: 1.25">
  Scale of 1.25
  <input type="checkbox" />
</label>
<label class="switch" style="--switch-scale: 0.75">
  Scale of 0.75
  <input type="checkbox" />
</label>