Materialize CSS Checkbox

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:

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="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>

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.