Skip to content
Related Articles

Related Articles

Materialize CSS Switches

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Sep, 2020
View Discussion
Improve Article
Save Article

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=
              rel="stylesheet" />
  
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" 
              href=
        <script type="text/javascript" 
                src=
        <script src=
      </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=
      </script>
    </body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!