component

Switch

A toggler, functionally same as a checkbox but aesthetically different. This element is composed by:

  • A main switchclass.

  • A checkbox element called switch-checkbox.

  • A main's switch slider: switch-slider.

    • The switch-slider contains the switch-icon ( optional) and switch-marker.
  • Simple switch:

Switch & icon

Icons must be inserted inside a switch-icon container and there can only be a maximum of two. If you use two icons, the first one will appear when the switch is off.

  • Theme mode switch example:

Variables 

  --switch-width: 3.75rem;
  --switch-height: 1.875rem;
  --switch-border-width: 0px;
  --switch--off-border-color: var(--color-contrast-light-lower);
  --switch--on-border-color: var(--color-accent);
  --switch--off-background: var(--color-contrast-background);
  --switch--on-background: var(--color-accent);
  --switch-slider--off-background: var(--color-white);
  --switch-slider--on-background: var(--color-white);
  --switch-marker-margin: 6px;
  --switch--off-icon-color: var(--color-contrast);
  --switch--on-icon-color: var(--color-white);
  --switch-marker--off-background: var(--color-white);
  --switch-marker--on-background: var(--color-white);
  --switch-radius: var(--radius-full, 9999px);
  --switch-marker-radius: var(--radius-full, 9999px);
  --switch-transition: ease .4s;