Search within TutorialsPark

MDL : Switch


How to use MDL - Material Design Lite to create Switches


Material Design Lite (MDL) : Switches

Material Design Lite(MDL) component switch is used to create an switch which is an enhanced version of HTML5 checkbox

The Visual appearance of the Switch is a short horizontal track with the circle that can be slided on either sides to denote the states(binary) of the switch.

Radio Buttons generally appears in a groups and selections can also be made on individual basis, MDL Radio buttons have the typical click effects.

Similar to Checkboxes and Radio Buttons, switches too are used in groups, and can be selected and unselected individually as well.

The Visual Appearance of the Switch is far better than a normal checkbox hence enhancing the User Experience, the color of switch changes when in selected state, typical MDL click effects can also be added.


Material Design Lite(MDL) : Basic Switches

A MDL switch can be created using mdl-switch to create a container to hold switch related content.

To Create a icon toggle use input element with attribute type="checkbox", the attribute check is used to keep the switch in selected state by default.

Example: Material Design Lite (MDL) : Basic Switches

Give it a TRY! » Note:The value of the id attribute must be same as for attribute


Material Design Lite : Radio Button Classes

MDL Class Description
mdl-switch To create a MDL switch container
mdl-js-switch To Assign MDL behaviour to switch
mdl-switch__input To create a switch with basic MDL Features
mdl-switch__label To Create a Label for switch
mdl-js-ripple-effect To apply a ripple effect when clicked