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 cd-switch class.

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

Label

To create a labeled Switch, put the cd-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 cd-switch class.

Show Advanced Options

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

Small

To make a Switch smaller, add the class cd-size-small.

Show Advanced Options

<input type="checkbox" class="cd-switch cd-size-small" />

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

Custom Size

To customize the size of a Switch, set the --cd-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="cd-switch" style="--cd-switch-scale: 1">
  Scale of 1 (default size)
  <input type="checkbox" />
</label>
<label class="cd-switch" style="--cd-switch-scale: 1.25">
  Scale of 1.25
  <input type="checkbox" />
</label>
<label class="cd-switch" style="--cd-switch-scale: 0.75">
  Scale of 0.75
  <input type="checkbox" />
</label>