Material Design Lite - Checkboxes

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of checkboxes. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-checkbox

Identifies label as an MDL component and is required on label element.
2

mdl-js-checkbox

Sets basic MDL behavior to label and is required on label element.
3

mdl-checkbox__input

Sets basic MDL behavior to checkbox and is required on input element (checkbox).
4

mdl-checkbox__label

Sets basic MDL behavior to caption and is required on span element (caption).
5

mdl-js-ripple-effect

Sets ripple click effect and is optional; goes on the label element and not on the input element (checkbox).

Example

The following example will help you understand the use of the mdl-slider classes to show the different types of check boxes.

mdl_checkboxes.htm

Live Demo 
<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Result

Verify the result.

Advertisements