JSFiddle - React, Tailwind, and code Playground

Toggle switches

by tonytlwu

HTML

<h4>Standard</h4>

<div class="toggle-switch">
  <input class="switch-input" type="checkbox" id="toggle" />
  <label class="toggle" for="toggle"></label>
  <label class="switch-label" for="toggle">Enable X</label>
</div>

<div class="toggle-switch">
  <input class="switch-input" type="checkbox" checked id="toggle-0" />
  <label class="toggle" for="toggle-0"></label>
  <label class="switch-label" for="toggle-0">Enable X</label>
</div>

<h4>Reactive label</h4>

<div class="toggle-switch">
  <input class="switch-input" type="checkbox" id="toggle-1" />
  <label class="toggle" for="toggle-1"></label>
  <label class="switch-label switch-label-unchecked" for="toggle-1">Off</label>
  <label class="switch-label switch-label-checked" for="toggle-1">On</label>
</div>

<div class="toggle-switch">
  <input class="switch-input" type="checkbox" checked id="toggle-2" />
  <label class="toggle" for="toggle-2"></label>
  <label class="switch-label switch-label-unchecked" for="toggle-2">Off</label>
  <label class="switch-label switch-label-checked" for="toggle-2">On</label>
</div>

<h4>Twin labels</h4>

<div class="toggle-switch">
  <label class="switch-label switch-label-unchecked" for="toggle-3">Off</label>
  <input class="switch-input" type="checkbox" id="toggle-3" />
  <label class="toggle" for="toggle-3"></label>
  <label class="switch-label switch-label-checked" for="toggle-3">On</label>
</div>

<div class="toggle-switch">
  <label class="switch-label switch-label-unchecked" for="toggle-4">Off</label>
  <input class="switch-input" type="checkbox" checked id="toggle-4" />
  <label class="toggle" for="toggle-4"></label>
  <label class="switch-label switch-label-checked" for="toggle-4">On</label>
</div>

<h4>Disabled</h4>

<div class="toggle-switch">
  <input class="switch-input" type="checkbox" disabled id="toggle-5" />
  <label class="toggle" for="toggle-5"></label>
  <label class="switch-label switch-label-unchecked" for="toggle-5">Off</label>
  <label class="switch-label...

CSS

body {
  font-family: Arial;
  color: #333;
}

label {
  margin-bottom: 5px;
}

/* Toggle Switches */

.toggle-switch {
  margin-bottom: 5px;
  position: relative;
  color: #333;
}

.toggle-switch .switch-input {
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.toggle-switch .toggle {
  transition: background-color 0.4s;
  width: 60px;
  height: 30px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  background-color: #777;
  border-radius: 30px;
  vertical-align: middle;
  font-weight: inherit;
  margin-bottom: 0;
}

.toggle-switch .toggle:after {
  left: 0;
  width: 20px;
  height: 20px;
  margin: 5px;
  content: "";
  position: absolute;
  background: #FFF;
  border-radius: 10px;
}

.toggle-switch .switch-label {
  position: relative;
  top: 2px;
}

.toggle-switch .switch-input:checked ~ .toggle {
  background-color: #19cd9d;
}

.toggle-switch .switch-input:checked ~ .toggle:after {
  left: auto;
  right: 0;
}

.toggle-switch .switch-input[readonly] ~ .toggle,
.toggle-switch .switch-input[readonly] ~ .switch-label {
  opacity: 0.75;
}

.toggle-switch .switch-input[disabled] ~ .toggle,
.toggle-switch .switch-input[disabled] ~ .switch-label {
  opacity: 0.2;
}

.toggle-switch .switch-input:checked ~ .switch-label-unchecked,
.toggle-switch .switch-input:not(:checked) ~ .switch-label-unchecked ~ .switch-label-checked {
  display: none;
}

.toggle-switch-sm .toggle:after {
  width: 14px;
  height: 14px;
  margin: 5px;
  border-radius: 7px;
}

.toggle-switch-sm .switch-label {
  font-size: 0.9em;
}

.toggle-switch-sm .toggle {
  width: 48px;
  height: 24px;
  border-radius: 24px;
}

.toggle-switch-xs .toggle {
  width: 36px;
  height: 18px;
  border-radius: 18px;
}

.toggle-switch-xs .toggle:after {
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 5px;
}

.toggle-switch-xs .switch-label {
  font-size: 0.8em;
  top: 1px;
}