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 CheckboxGive 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 CheckboxGive it a TRY! » Note:A Checkbox by Default is in unchecked state.
Material Design Lite : Checkbox Classes
|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|