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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.