Toggle Switch

A two-state toggle control using a switch that users are used to from mobile devices.

Installation

1. Copy the component

   

2. Toggle Switch CSS

   Add this css to head of all pages in your site.

   <style>
   .toggle_switch:after {
     content: "";
     width: 1.275rem;
     height: 1.275rem;
     position: absolute;
     top: 50%;
     left: 0rem;
     background: var(--button--color--neutral--background);
     border-radius: 100rem;
     transform: translateY(-50%);
     transition: left 0.4s, background 0.4s;
   }
   
   .toggle_switch-input {
     width: 0;
     height: 0;
     visibility: hidden;
   }
   
   .toggle_switch-input:checked + .toggle_switch {
     background: var(--button--color--neutral--hover-background);
     border-color: var(--button--color--neutral--hover-background);
   }
   
   .toggle_switch-input:checked + .toggle_switch:after {
     left: calc(100% - 1.3rem);
     background: var(--button--color--neutral--foreground);
   }
   </style>