Search within TutorialsPark

MDL : Checkbox


How to use MDL - Material Design Lite to create Checkboxes


Material Design Lite (MDL) : Checkboxes

Material Design Lite(MDL) component checkbox is used to create a checkbox, which is an enhanced version of HTML checkbox element.

The MDL Checkbox visual appearance is like a small square which can have only two states that can be set or removed when the user clicks on it.

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

Most of the Websites or Applications do use a checkbox and the design and placement of the checkbox has a significant effect on the overall User Experience.


Material Design Lite(MDL) : Default Checkboxes

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

To Create a check box use input element with attribute type="checkbox"

Example: Material Design Lite (MDL) Default Checkbox

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


Material Design Lite(MDL) Checkbox : Selected State Checkbox

A MDL Checkbox with initial State being selected can be created using attribute checked

Example: Material Design Lite (MDL) Checkbox Selected State Checkbox

Give it a TRY! » Note:A Checkbox by Default is in unchecked state.


Material Design Lite : Checkbox Classes

MDL Class Description
mdl-checkbox To create a Check box Container
mdl-js-checkbox To Assign MDL behaviour to Checkbox
mdl-checkbox__input To create a checkbox with basic MDL Features
mdl-checkbox__label To Create a Label for Checkbox
mdl-js-ripple-effect To apply a ripple effect when clicked