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 .form-slider class.
You can add the checked attribute to the input to check the switch.

Thin switches

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

Switch sizes

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


CSS Variable Default value Description
--ax-form-switch-color #e2e2e2 Form switch background color.
--ax-form-switch-active-color #4D9F85 Active form switch background color.
--ax-form-switch-btn-color #fff Form switch button color.
--ax-form-switch-transition-duration 0.3s Form switch transition duration.

Common methods & styling

For all the common methods and styling properties, please refer to the Material forms page.