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-

<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.

<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>

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

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.

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>

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

Material Design Lite Checkbox : UnChecked | OFF | Example

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

<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>

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

Material Design Lite Checkbox : Ripple Effect

You can add ripple effect simply as below –

<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>

Material Design Lite Checkbox : Disabled State

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

<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>

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

Add Comment

📖 Read More

• 1. Material Design Lite - Radio Button
• 2. Material Design Lite - Icon Toggle
• 3. Material Design Lite - Switch
• 4. Material Design Lite - Tooltips