Materialize CSS Checkbox - GeeksforGeeks

11 Sep, 2020
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="https://fonts.googleapis.com/icon?family=Material+Icons"              rel="stylesheet" />          <!-- Compiled and minified CSS -->        <link rel="stylesheet"               href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />        <script type="text/javascript"                 src="https://code.jquery.com/jquery-2.1.1.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">      </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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">      </script>    </body></html>
Output:
Materialize
Materialize-CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?