Springboard

Toggle 

<div class="toggle">
    <input type="checkbox" id="toggle" name="toggle">
    <span></span>
</div>
<label for="toggle">This is a visually enhanced checkbox</label>
 
<div class="toggle">
  <input type="checkbox" id="{{ id }}" name="{{ id }}" >
  <span></span>
</div>
<label for="{{ id }}">{{ label }}</label>
 
{
  "id": "toggle",
  "label": "This is a visually enhanced checkbox"
}
  • Content: 
    .toggle {
  position: relative;
  display: inline-block;
  font-size: 1.3em;
}

.toggle input[type=checkbox] {
  font-size: 1em;
  box-sizing: content-box;
  appearance: none;
  width: 3em;
  height: 1.5em;
  background-color: #eee;
  background-position: 1.85em 50%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>ex</title><path d="M1.338 13.08l1.605 1.582c.21.233.485.338.802.338.317 0 .57-.105.803-.338L8.01 11.2l3.463 3.462c.212.233.486.338.803.338.317 0 .57-.105.802-.338l1.605-1.583c.21-.233.317-.508.317-.804 0-.317-.106-.59-.317-.802L11.22 8.01l3.463-3.462c.21-.233.317-.507.317-.803 0-.317-.106-.592-.317-.802l-1.605-1.605c-.232-.233-.485-.338-.802-.338-.317 0-.59.105-.803.338L8.01 4.8 4.548 1.34C4.315 1.105 4.062 1 3.745 1c-.317 0-.59.105-.802.338L1.338 2.943c-.21.21-.338.485-.338.802 0 .296.127.57.338.803L4.8 8.01 1.34 11.475c-.21.21-.338.485-.338.802 0 .296.127.57.338.803" fill="black" opacity=".195"/></svg>');
  border: solid 1px #ccc;
  border-radius: 1em;
}

.toggle input[type=checkbox]:checked {
  background: $toggle-color;
  border-color: $toggle-color;
  background-repeat: no-repeat;
  background-position: .45em 50%;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>check</title><path d="M.106 9.136l5.255 5.408c.19.194.435.29.72.29.283 0 .528-.096.717-.29l9.073-9.337c.19-.214.283-.448.283-.74s-.094-.545-.283-.74L14.434 2.25c-.19-.214-.435-.312-.72-.312-.282 0-.528.098-.717.312L6.08 9.37l-3.1-3.19c-.19-.215-.435-.312-.72-.312-.283 0-.53.097-.717.31L.106 7.66c-.19.194-.284.447-.284.74 0 .29.095.524.284.738" fill="white" opacity=".751" /></svg>');
}

.toggle span {
  position: absolute;
  top: 1px;
  left: 1px;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  border-radius: .75em;
  background: #fff;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .2), -1px 1px 2px rgba(0, 0, 0, .1);
  transition: all .2s ease-in-out;
  pointer-events: none;
}

.toggle input[type=checkbox]:checked + span {
  transform: translateX(1.5em);
}
  • URL: /components/raw/toggle/_sass.scss
  • Filesystem Path: components/02-modules/form/toggle/_sass.scss
  • Size: 2.2 KB

Toggle Switch

Converts a checkbox input into a toggle switch—purely visual, CSS-only change. Set the color of the toggle switch with $toggle-color sass variable in _global.scss.