December 21, 2016

Materialize Checkboxes

Materialize Checkboxes : Checkboxes are used to enable users to select one or more than options from the given options. Materialize provides classes to create checkboxes with cool look and feel. Here in this tutorial we are going to explain how you can create checkboxes in Materialize framework. You can also use our online editor to edit and run the code online.

Materialize Checkboxes Example

Let create a very basic and default checkbox in Materialize –

Materialize Checkboxes | Example:

<p>
       <input type="checkbox" id="myCheckbox" />
       <label for="myCheckbox">Simple Checkbox</label>
</p>

Try it »

If you run the above example it will produce the output something like this –

Learn More

Let us have some More example and demo about the Matrialize Checkboxes.

Filled In Checkbox

Class filled-in is used to create filled in Checkbox. Here is an example of filled in checkbox –

Materialize Filled In Checkbox Example

  
  <p>
       <input type="checkbox" class="filled-in" id="myCheckbox" />
       <label for="myCheckbox">Filled In Checkbox</label>
    </p>

Try it »

The above example will give output something like this –

Disabled Checkbox

To create disabled checkbox just add disabled=”disabled” simply as below –

Materialize Disabled Checkbox Example

  
  <p>
       <input type="checkbox" id="myCheckbox" disabled="disabled"/>
       <label for="myCheckbox">Disabled Checkbox</label>
   </p>

Materialize Checkboxes