A toggle button allows the user to change a setting between two states.

Commonly used in websites, mobile apps, and other software, it provides the users a way to choose between two different states.


Add the data-toggle-input and data-toggle attributes to a standard <input type="checkbox"> and <label> HTML tags respectively.

Code example

  <input type="checkbox" name="toggle" data-toggle-input checked/>
  <label for="toggle" data-toggle></label>


The toggle comes with the following customization options:

  • background color
  • size
  • radius
  • animation


This is the list of variables related to this component. You can customize the design by changing or overriding these values:

   --toggle-width: 60px;
   --toggle-height: calc(var(--toggle-width)/2);
   --toggle-radius: 18px;
   --toggle-background: var(--cssui-gray-light);
   --toggle-padding: 10px;
   --toggle-animation: ease-in-out;
   --toggle-animation-time: .2s;
   --toggle-switch-color: #fff;