Open In App

Materialize CSS Switches

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 11 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads