Switch (Toggle)

Toggle

Preview

HTML

<div class="toggle">
   <input type="checkbox" id="check">
   <label class="toggle__trail" for="check">
      <span class="toggle__handler"></span>
   </label>
</div>

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check" disabled>
   <label class="toggle__trail" for="check">
      <span class="toggle__handler"></span>
   </label>
</div>

-->

<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check" disabled checked>
   <label class="toggle__trail" for="check">
      <span class="toggle__handler"></span>
   </label>
</div>

-->

CSS

.toggle {
  display: flex;
  width: 52px;
  height: 32px;
  position: relative;
}

.toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  inset: 0;
}

.toggle input[type=checkbox]:checked+.toggle__trail {
  background-color: #68CE8F;
}

.toggle:hover input[type=checkbox]:checked + .toggle__trail {
  background-color: #28B95E;
}

.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
  margin-left: 45%;
  background-color: #fff;
}

.toggle .toggle__trail {
  width: inherit;
  height: inherit;
  padding: 4px;
  background-color: #E6E6E6;
  border-radius: 999px;
  transition: all 0.3s linear;
  cursor: pointer;
}

.toggle .toggle__trail:hover{
  background-color: #A7A7A7;
}

.toggle__trail .toggle__handler {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  position: relative;
  background-color: #fff;
  border-radius: 100%;
  transition: all 0.3s linear;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.toggle input[type=checkbox]:disabled + .toggle__trail{
  background-color: #F5F5F5;
  cursor: not-allowed;
}

.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
  background-color: #D4F1DF;
}

Toggle pequeno

Preview

HTML

<div class="toggle">
   <input type="checkbox" id="check">
   <label class="toggle__trail" for="check">
      <span class="toggle__handler"></span>
   </label>
</div>

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check" disabled>
   <label class="toggle__trail" for="check">
      <span class="toggle__handler"></span>
   </label>
</div>

-->

<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check" disabled checked>
   <label class="toggle__trail" for="check">
      <span class="toggle__handler"></span>
   </label>
</div>

-->

CSS

.toggle {
  display: flex;
  width: 32px;
  height: 20px;
  position: relative;
}

.toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  inset: 0;
}

.toggle input[type=checkbox]:checked+.toggle__trail {
  background-color: #68CE8F;
}

.toggle:hover input[type=checkbox]:checked + .toggle__trail {
  background-color: #28B95E;
}

.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
  margin-left: 45%;
  background-color: #fff;
}

.toggle .toggle__trail {
  width: inherit;
  height: inherit;
  padding: 2px;
  background-color: #E6E6E6;
  border-radius: 999px;
  transition: all 0.3s linear;
  cursor: pointer;
}

.toggle .toggle__trail:hover{
  background-color: #A7A7A7;
}

.toggle__trail .toggle__handler {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  position: relative;
  background-color: #fff;
  border-radius: 100%;
  transition: all 0.3s linear;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.toggle input[type=checkbox]:disabled + .toggle__trail{
  background-color: #F5F5F5;
  cursor: not-allowed;
}

.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
  background-color: #D4F1DF;
}

Toggle com ícone

Preview

HTML

<div class="toggle">
   <input type="checkbox" id="check">
   <label class="toggle__trail" for="check">
      <span class="toggle__handler">
         <svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
            12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
            8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
         </svg>

         <svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
               7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
         </svg>
      </span>
   </label>
</div>

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check3" disabled>
   <label class="toggle__trail" for="check3">
      <span class="toggle__handler">
         <svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
            12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
            8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
         </svg>

         <svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
               7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
         </svg>
      </span>
   </label>
</div>

-->

<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check3" disabled checked>
   <label class="toggle__trail" for="check3">
      <span class="toggle__handler">
         <svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
            12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
            8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
         </svg>

         <svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
               7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
         </svg>
      </span>
   </label>
</div>

-->

CSS

.toggle {
  display: flex;
  width: 52px;
  height: 32px;
  position: relative;
}

.toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  inset: 0;
}

.toggle input[type=checkbox]:checked+.toggle__trail {
  background-color: #68CE8F;
}

.toggle:hover input[type=checkbox]:checked + .toggle__trail {
  background-color: #28B95E;
}

.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
  margin-left: 45%;
  background-color: #fff;
}

.toggle .toggle__trail {
  width: inherit;
  height: inherit;
  padding: 4px;
  background-color: #E6E6E6;
  border-radius: 999px;
  transition: all 0.3s linear;
  cursor: pointer;
}

.toggle .toggle__trail:hover{
  background-color: #A7A7A7;
}

.toggle__trail .toggle__handler {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  position: relative;
  background-color: #fff;
  border-radius: 100%;
  transition: all 0.3s linear;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.toggle__handler .toggle__off,
input[type=checkbox]:checked+.toggle__trail .toggle__on {
  display: block;
}

.toggle__handler .toggle__on,
input[type=checkbox]:checked+.toggle__trail .toggle__off {
  display: none;
}

.toggle input[type=checkbox]:disabled + .toggle__trail{
  background-color: #F5F5F5;
  cursor: not-allowed;
}

.toggle input[type=checkbox]:disabled + .toggle__trail .toggle__off path {
  fill: #E6E6E6;
}

.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
  background-color: #D4F1DF;
}

.toggle input[type=checkbox]:disabled:checked + .toggle__trail .toggle__on path{
  fill: #D4F1DF;
}

Toggle pequeno com ícone

Preview

HTML

<div class="toggle">
   <input type="checkbox" id="check">
   <label class="toggle__trail" for="check">
      <span class="toggle__handler">
         <svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
            12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
            8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
         </svg>

         <svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
               7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
         </svg>
      </span>
   </label>
</div>

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check3" disabled>
   <label class="toggle__trail" for="check3">
      <span class="toggle__handler">
         <svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
            12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
            8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
         </svg>

         <svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
               7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
         </svg>
      </span>
   </label>
</div>

-->

<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:

<div class="toggle">
   <input type="checkbox" id="check3" disabled checked>
   <label class="toggle__trail" for="check3">
      <span class="toggle__handler">
         <svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
            12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
            8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
         </svg>

         <svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
               7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
         </svg>
      </span>
   </label>
</div>

-->

CSS

.toggle {
  display: flex;
  width: 32px;
  height: 20px;
  position: relative;
}

.toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  inset: 0;
}

.toggle input[type=checkbox]:checked+.toggle__trail {
  background-color: #68CE8F;
}

.toggle:hover input[type=checkbox]:checked + .toggle__trail {
  background-color: #28B95E;
}

.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
  margin-left: 45%;
  background-color: #fff;
}

.toggle .toggle__trail {
  width: inherit;
  height: inherit;
  padding: 2px;
  background-color: #E6E6E6;
  border-radius: 999px;
  transition: all 0.3s linear;
  cursor: pointer;
}

.toggle .toggle__trail:hover{
  background-color: #A7A7A7;
}

.toggle__trail .toggle__handler {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  position: relative;
  background-color: #fff;
  border-radius: 100%;
  transition: all 0.3s linear;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.toggle__handler svg{
  width: 12px;
  height: 12px;
}

.toggle__handler .toggle__off,
input[type=checkbox]:checked+.toggle__trail .toggle__on {
  display: block;
}

.toggle__handler .toggle__on,
input[type=checkbox]:checked+.toggle__trail .toggle__off {
  display: none;
}

.toggle input[type=checkbox]:disabled + .toggle__trail{
  background-color: #F5F5F5;
  cursor: not-allowed;
}

.toggle input[type=checkbox]:disabled + .toggle__trail .toggle__off path {
  fill: #E6E6E6;
}

.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
  background-color: #D4F1DF;
}

.toggle input[type=checkbox]:disabled:checked + .toggle__trail .toggle__on path{
  fill: #D4F1DF;
}