Material Design Lite - Switches

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

Sr.No. Class Name & Description
1

mdl-switch

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

mdl-js-switch

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

mdl-switch__input

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

mdl-switch__label

Sets basic MDL behavior to caption and is required on input 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 (switch).

Example

The following example will help you understand the use of the mdl-switch classes and the different types of checkboxes as switch.

mdl_switches.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">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

Result

Verify the result.

Advertisements