Material Design Lite – Checkbox


Material Design Lite – Checkbox : Material Design Lite(MDL) checkbox component is basically upgraded version of basic html checkbox. Checbox is basically an square(element) representation which is set true or false when user clicks or touches depending on the previous state. If it already checked and user touches it then it will set false else if it is not checked and user touches it then it will set true. Checkbox is an important form element and it is used in most cases. Material Design Lite(MDL) provides an enhanced version of the basic checkbox by adding the cool visual effects. Here in this tutorial we are going to explain how you can create material design lite checkbox. You can use our online editor to edit and run the code online.


Material Design Lite – Checkbox | MDL | Example | Demo

Let us go step by step to create Material design lite(MDL) checkboxes with example and demo.

Syntax

Here is syntax to create basic checkbox in material design lite-

Material Design Lite – Checkbox Syntax:

<label for="myId" class="mdl-checkbox mdl-js-checkbox">
  <input type="checkbox" id="myId" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Checkbox Label</span>
</label>

To create checkbox in Material design lite you first need to create a label tag with for attribute specifying the id and class mdl-checkbox mdl-js-checkbox and then you need to add basic html checkbox with id and class mdl-checkbox__input. To create label for checkbox add a span with class mdl-checkbox__label and add text inside it.

Example

Now let us create an example to understand the material design lite checkbox.

Material Design Lite – Checkbox Example:

<label for="myId" class="mdl-checkbox mdl-js-checkbox">
  <input type="checkbox" id="myId" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Enable Fullscreen</span>
</label>

Try it »

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

Material Design Lite – Checkbox
Options

  • mdl-checkbox(Required) This is used to define label as an MDL component.
  • mdl-js-checkbox(Required) This is used to assign basic MDL behavior to label Required on label element.
  • mdl-checkbox__input(Required) This is used to assign basic MDL behavior to checkbox.
  • mdl-checkbox__label(Required) This is used to assign basic MDL behavior to caption.
  • mdl-js-ripple-effect(Optional) This is used to apply ripple click effect.

Learn More

Let us create some more examples and demos here.


Material Design Lite Checkbox : Checked | ON | Example

Material Design Lite Checkbox : Checked | ON | Example

<label for="myId" class="mdl-checkbox mdl-js-checkbox">
  <input type="checkbox" id="myId" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Enable Fullscreen</span>
</label>

Try it »

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

MDL checkbox Checked

Material Design Lite Checkbox : UnChecked | OFF | Example

To uncheck checkbox just remove the checked attribute from input type=”checkbox” element as –

Material Design Lite Checkbox : Unchecked | OFF | Example

<label for="myId" class="mdl-checkbox mdl-js-checkbox">
  <input type="checkbox" id="myId" class="mdl-checkbox__input" >
  <span class="mdl-checkbox__label">Enable Fullscreen</span>
</label>

Try it »

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

MDL off checkbox

Material Design Lite Checkbox : Ripple Effect

You can add ripple effect simply as below –

Material Design Lite Checkbox : Ripple Effect | Example

<label for="myId" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
  <input type="checkbox" id="myId" class="mdl-checkbox__input" >
  <span class="mdl-checkbox__label">Enable Fullscreen</span>
</label>

Try it »

Material Design Lite Checkbox : Disabled State

For disabled state just use the default disabled attribute as below –

Material Design Lite Checkbox : Disabled State | Example

<label for="myId" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
  <input type="checkbox" id="myId" class="mdl-checkbox__input" disabled >
  <span class="mdl-checkbox__label">Enable Fullscreen(Disabled)</span>
</label>

Try it »

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

Material Design Lite Checkbox : Disabled State Example


Advertisements

Add Comment

📖 Read More