Current version: 1.9.8Components

Switch

Variables

Variable property value desc.
$switch-color color $white switch color
$switch-checked-color color $boston-blue switch color when checked
$switch-unchecked-color color $gray-chateau switch color when unchecked
$switch-border-color color $gray-chateau switch border color
$switch-checked-border-color color $mint switch border color when hover
$switch-width width r(8) switch width
$switch-width--s width r(5) small switch width
$switch-height height $base-lh switch height
$switch-height--s height $base-lh / 1.4 small switch height
$switch-inner-space size rem(6px) space between switch and container
$switch-inner-space--s size rem(4px) space between small switch and container
<input id="switch_example" class="Switch-checkbox" type="checkbox" />
<label class="Switch" for="switch_example"></label>

Sizes

<input id="switch_example_small" class="Switch-checkbox" type="checkbox" />
<label class="Switch Switch--s" for="switch_example_small"></label>