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:

Output:

👁 Image