Checkbox Switch

A switch component, using a checkbox to maintain state. The visual state is directly bound to the checked/unchecked state of the checkbox.

by godfrzero

HTML

<div class="switch-wrapper">
	<label for="">Enabled</label>
	<input type="checkbox">
	<div class="switch"></div>
</div>

SCSS

.switch-wrapper,
.switch {
  position: relative;
  display: inline-block;
}

.switch-wrapper {
  $knob-size: 18px;
  $knob-travel: 10px;
  $knob-spacing: 1px;

  input[type="checkbox"] {
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
  }

  .switch {
    z-index: -1;
    position: relative;
    vertical-align: sub;
    border: solid 2px black;
    height: ($knob-size + ($knob-spacing * 2));
    width: ($knob-size + ($knob-spacing * 2) + $knob-travel);
    border-radius: ($knob-size + ($knob-spacing * 2));

    &:after {
      content: ' ';
      background: black;
      width: $knob-size;
      height: $knob-size;
      position: absolute;
      border-radius: 50%;
      top: $knob-spacing;
      left: $knob-spacing;
      display: inline-block;
      transition: left linear 0.05s;
    }
  }

  :checked ~ .switch {
    background: green;

    &:after {
      left: $knob-travel + $knob-spacing;
    }
  }
}