Home Documentation
Getting started General
Components
Forms
Utilities
Check changelog.
0.5.3

Switches

Switches are useful to create a simple way to respond to a binary option inside a form.

Normal switches

To create a normal switch, you need to create a .form-switch label, which contains an input type="checkbox" and a span.
This last span is the slider, and have to get the .slider class.
You can add the checked attribute to the input to check the switch.

Thin switches

You can use the thin switches if you want an other switch design.
To use them, simply add the .thin class to the .slider span.

Switch sizes

All switches have 3 different sizes we have preset. To use these sizes, simply add the .small or .large class on the .slider span.

Tips

You'll want to change the switch color to make it match to your website design.
The following code makes you able to change it :