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 .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.
Styling
| 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.