Open In App

Materialize CSS Checkbox

Improve
Improve
Like Article
Like
Save
Share
Report

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:

html




<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
              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 checked</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:



Last Updated : 26 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads