Material Design Lite – Switch

Material Design Lite – Switch Button : Switch is an enhanced version of basic html element ie. checkbox. Switch button is basically used to provide the turn on/ off functionality. Binary state true/false is set when user turns on/off the button. Material Design Lite(MDL) provides switch button component to create the beautiful switch buttons. Here in this tutorial we are going to explain how you can create Material Design Lite switch buttons. You can use online editor to edit and run the code online.

Material Design Lite – Switch Button | On | Off Example

Let us create simple switch buttons in material design Lite(MDL).

Syntax

Here is syntax to create basic switch button –

First create a label with class mdl-switch, mdl-js-switch and an attribute “for” (switch-btn). Now create default checkbox with id(switch-btn) and class mdl-switch__input now create a span with class mdl-switch__label to add the switch button label.

Example

Now let us create a simple switch button –

If you run the above example it will produce output something like this –

Options

Following Options are available for the switch buttons –

• mdl-switch: This is used to define label as an MDL component.
• mdl-js-switch: This is used to Assign the basic MDL behavior to label.
• mdl-switch__input: This is used to Apply basic MDL behavior to switch.
• mdl-switch__label: This is used to Apply basic MDL behavior to caption.
• mdl-js-ripple-effect: This is used to add ripple effect.

Material Design Lite Switch Button ON | OFF Example With Ripple Effect

To Add ripple effect just add the class mdl-js-ripple-effect as below –