Skip to content
Related Articles

Related Articles

Improve Article

Materialize CSS Checkbox

  • Last Updated : 11 Sep, 2020
Geek Week

Materialize provides a checkbox feature for creating styled checkboxes for the websites. The standard HTML checkboxes are plain with a simple black border in unchecked and a tick mark in checked states, but with materialize border style can be changed along with the tick mark.

For creating a checkbox with the default style, <input type=”checkbox”> is used. The for attribute is necessary to bind the custom checkbox with the input. This is done by adding the input’s id as the value of the for the attribute of the label. The example below shows all the different types checkboxes used in materialize form.

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="intro-text">
            <h3>Checkbox with Materialize CSS</h3>
  
            <form action="#">
                <p>
                    <input type="checkbox"
                           id="test1" />
                    <label for="test1">First Option</label>
                </p>
                <p>
                    <input type="checkbox" 
                           id="test2" 
                           checked="checked" />
                    <label for="test2">Checked Option</label>
                </p>
                <p>
                    <input type="checkbox"
                           class="filled-in"
                           id="filled-in-box"
                           checked="checked" />
                    <label for="filled-in-box">
                      Filled in</label>
                </p>
                <p>
                    <input id="indeterminate-checkbox"
                           type="checkbox" />
                    <label for="indeterminate-checkbox">
                      Indeterminate Style</label>
                </p>
  
                <p>
                    <input type="checkbox"
                           id="test3" 
                           checked="checked" 
                           disabled="disabled" />
                    <label for="test3">
                      Disabled Ckeched</label>
                </p>
                <p>
                    <input type="checkbox"
                           id="test4"
                           disabled="disabled" />
                    <label for="test4">Disabled</label>
                </p>
            </form>
        </div>
        <!-- Compiled and minified JavaScript -->
        <script src=
      </script>
    </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :