Toggle – Design Portal

Toggle switches are digital on/off switches. They prompt users to choose between two mutually exclusive options and always have a default value.

Demo

Option

<label class="toggle">
  <input class="toggle__checkbox" type="checkbox">
  <div class="toggle__switch"></div>
  <span class="toggle__label">Option</span>
</label>

.toggle {
  cursor: pointer;
  display: inline-block;

  &__switch {
    background-color: var(--light-gray-2);
    block-size: 2rem;
    border-radius: 1rem;
    display: inline-block;
    inline-size: 3.625rem;
    position: relative;
    transition: background-color 0.25s;
    vertical-align: middle;

    &:before,
    &:after {
      content: "";
    }

    &:before {
      background-color: var(--white);
      block-size: 1.5rem;
      border-radius: 50%;
      display: block;
      inline-size: 1.5rem;
      inset-block-start: .25rem;
      inset-inline-start: .25rem;
      position: absolute;
      transition: left 0.25s;
    }

    .toggle__checkbox:checked + & {
      background: var(--primary);

      &:before {
        inset-inline-start: 1.875rem;
      }
    }
  }
  

  &__checkbox {
    position: absolute;
    visibility: hidden;
  }

  &__label {
    inset-block-start: .125rem;
    margin-inline-start: .3125rem;
    position: relative;
  }
}

No JS! 😀

Note

Alternatively, a toggle is also called a 'switch'.
This toggle uses a hidden checkbox to adjust the styling for the checked state.

States & Variations

Default

The default toggle.

Option

<label class="toggle">
  <input class="toggle__checkbox" type="checkbox">
  <div class="toggle__switch"></div>
  <span class="toggle__label">Option</span>
</label>

Checked

When the input is clicked, an attribute of checked is added.

Option

<label class="toggle">
  <input class="toggle__checkbox" type="checkbox" checked>
  <div class="toggle__switch"></div>
  <span class="toggle__label">Option</span>
</label>

Anatomy

Toggle
Toggle Switch / Toggle Checkbox (Hidden)
Toggle Label