toggle (switch)

This Atom is also known as switch. Because of dependencies with JavaScript, the Frontend Kit name is toggle.

The toggle element can be used like a checkbox, but supports a label on each side of the element that better describes the choice made by the user. Both labels are optional.

table of content

component variations

default

Open on blank page
<div class="a-toggle">
  <label>
    <input id="toggle-input-toggle-1" type="checkbox" role="switch" />
    <div class="a-toggle__trigger"></div>
    <span class="a-toggle__label a-toggle__label--right">Right text</span>
  </label>
</div>

left label

Open on blank page
<div class="a-toggle">
  <label>
    <input id="toggle-input-toggle-left-label" type="checkbox" role="switch" />
    <span class="a-toggle__label a-toggle__label--left">Left text</span>
    <div class="a-toggle__trigger"></div>
  </label>
</div>

label both sides

Open on blank page
<div class="a-toggle">
  <label>
    <input
      id="toggle-input-toggle-label-both-sides"
      type="checkbox"
      role="switch"
    />
    <span class="a-toggle__label a-toggle__label--left a-toggle__label--right">
      Left text
    </span>
    <div class="a-toggle__trigger"></div>
    <span class="a-toggle__label a-toggle__label--left a-toggle__label--right">
      Right text
    </span>
  </label>
</div>

disabled

Open on blank page
<div class="a-toggle">
  <label>
    <input
      id="toggle-input-toggle-disabled"
      type="checkbox"
      role="switch"
      disabled=""
    />
    <div class="a-toggle__trigger"></div>
    <span class="a-toggle__label a-toggle__label--right">Right text</span>
  </label>
</div>

disabled checked

Open on blank page
<div class="a-toggle">
  <label>
    <input
      id="toggle-input-toggle-disabled-checked"
      type="checkbox"
      role="switch"
      disabled=""
      checked=""
    />
    <div class="a-toggle__trigger"></div>
    <span class="a-toggle__label a-toggle__label--right">Right text</span>
  </label>
</div>

additional content

styles SCSS

.a-toggle {
  label {
    display: flex;
  }

  input[type='checkbox'] {
    appearance: none;
    height: 0;
    width: 0;

    &:checked ~ .a-toggle__trigger {
      background-color: var(--major-accent__enabled__fill__default);

      &::before {
        background-color: var(--major-accent__enabled__front__default);
        left: 1.875rem;
      }
    }

    &:focus-visible {
      outline: none;

      & ~ .a-toggle__trigger {
        @include focus-outside;
        --focus-border-radius: 0.75rem;
      }
    }

    &:disabled {
      & ~ .a-toggle__trigger,
      & ~ .a-toggle__label {
        pointer-events: none;
      }

      & ~ .a-toggle__trigger {
        background-color: var(--small__disabled__fill__default);

        &::before {
          background-color: var(--major-accent__disabled__front__default);
        }
      }

      & ~ .a-toggle__label {
        color: var(--plain__disabled__front__default);
      }

      &:checked ~ .a-toggle__trigger {
        background-color: var(--major-accent__disabled__fill__default);
      }
    }
  }

  &__label {
    color: var(--plain__enabled__front__default);
    cursor: pointer;
    font-size: 1rem;

    &--left {
      margin-right: 0.5rem;
    }

    &--right {
      margin-left: 0.5rem;
    }
  }

  &__trigger {
    background-color: var(--small__enabled__fill__default);
    border-radius: 0.75rem;
    cursor: pointer;
    height: 1.5rem;
    width: 3rem;
    position: relative;

    &::before {
      background-color: var(--small__enabled__front__default);
      border-radius: 0.625rem;
      content: '';
      height: 0.75rem;
      left: 0.375rem;
      position: absolute;
      top: 0.375rem;
      transition: left 0.2s ease-out, background-color 0.1s ease-out;
      width: 0.75rem;
    }
  }

  &:hover {
    .a-toggle__trigger {
      background-color: var(--small__enabled__fill__hovered);
    }

    input[type='checkbox']:checked:not(:disabled) ~ .a-toggle__trigger {
      background-color: var(--major-accent__enabled__fill__hovered);
    }
  }

  &:active {
    .a-toggle__trigger {
      background-color: var(--small__enabled__fill__pressed);
    }

    input[type='checkbox']:checked:not(:disabled) ~ .a-toggle__trigger {
      background-color: var(--major-accent__enabled__fill__pressed);
    }
  }
}