Materialize CSS Switches

Materialize provides switches to allow the viewer to select an option between the two available. Generally, switches are special checkboxes used for binary states such as on/off or yes/no or agree/disagree.

Switches can be created by using the “switch” class inside the wrapper div with the input type = “checkbox”. The other required class is “lever” that is used in the <span> tag. Switches can be modified according to ones choice by adding CSS elements. Here is the basic view of switch.

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <!--Import Google Icon Font-->
        <link href= 
"https://fonts.googleapis.com/icon?family=Material+Icons" 
              rel="stylesheet" /> 
  
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" 
              href= 
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> 
        <script type="text/javascript" 
                src= 
"https://code.jquery.com/jquery-2.1.1.min.js"></script> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> 
      </script> 
  
        <!--Let browser know website 
              is optimized for mobile-->
        <meta name="viewport" 
              content="width=device-width,  
                       initial-scale=1.0" /> 
    </head> 
  
    <body class="container"> 
        <div class="center"> 
          <h3>Switches in materialize</h3> 
      </div> 
        <div class="card-panel green-text"> 
            <h4 class="center">Switch</h4> 
            <!-- Switch -->
            <div class="switch"> 
                <label> 
                    Off 
                    <input type="checkbox" /> 
                    <span class="lever"></span> 
                    On 
                </label> 
            </div> 
            <br /> 
            <div class="switch"> 
                <label> 
                    No 
                    <input type="checkbox" /> 
                    <span class="lever"></span> 
                    Yes 
                </label> 
            </div> 
            <br /> 
            <div class="switch"> 
                <label> 
                    Disagree 
                    <input type="checkbox" /> 
                    <span class="lever"></span> 
                    Agree 
                </label> 
            </div> 
        </div> 
  
        <div class="card-panel green-text"> 
            <h4 class="center">Disabled Switch</h4> 
            <div class="switch"> 
                <label> 
                    Off 
                    <input disabled type="checkbox" /> 
                    <span class="lever"></span> 
                    On 
                </label> 
            </div> 
            <br /> 
            <div class="switch"> 
                <label> 
                    No 
                    <input disabled type="checkbox" /> 
                    <span class="lever"></span> 
                    Yes 
                </label> 
            </div> 
            <br /> 
            <div class="switch"> 
                <label> 
                    Disagree 
                    <input disabled type="checkbox" /> 
                    <span class="lever"></span> 
                    Agree 
                </label> 
            </div> 
        </div> 
        <!-- Disabled Switch -->
  
        <!-- Compiled and minified JavaScript -->
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
      </script> 
    </body> 
</html> 

Output:

Contact Us