ClickWebExpress
ClickWebExpress

MDL Tick Boxes

The Material Design Lite (MDL) checkbox component is an enhanced version of the standard HTML <input type="checkbox"> element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects.

Checkboxes are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience.

The enhanced checkbox component has a more vivid visual look than a standard checkbox, and may be initially or programmatically disabled.

The Material Design Lite (MDL) radio component is an enhanced version of the standard HTML <input type="radio">, or "radio button" element. A radio button consists of a small circle and, typically, text that clearly communicates a condition that will be set when the user clicks or touches it. Radio buttons always appear in groups of two or more and, while they can be individually selected, can only be deselected by selecting a different radio button in the same group (which deselects all other radio buttons in the group). The MDL radio component allows you to add display and click effects.

Radio buttons are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience.

The enhanced radio component has a more vivid visual look than a standard radio button, and may be initially or programmatically disabled.

Check on

Check off
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>


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

Radio Button

Radio on

Radio off
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
  <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
  <span class="mdl-radio__label">First</span>
</label>


<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
  <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
  <span class="mdl-radio__label">Second</span>
</label>

Instructions

 1. Code a <label> element and give it a for attribute whose value is the unique id of the checkbox it will contain. The for attribute is optional when the <input> element is contained inside the <label> element, but is recommended for clarity.

<label for="chkbox1">
...
</label>

 2. Inside the label, code an <input> element and give it a type attribute whose value is "checkbox". Also give it an id attribute whose value matches the label's for attribute value.

<label for="chkbox1">
  <input type="checkbox" id="chkbox1">
</label>

 3. Also inside the label, after the checkbox, code a <span> element containing the checkbox's text caption.

<label for="chkbox1">
  <input type="checkbox" id="chkbox1">
  <span>Enable AutoSave</span>
</label>

 4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the class attribute.

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

The checkbox component is ready for use.

Example

A checkbox with a ripple click effect.

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

Radio Button

 1. Code a <label> element and give it a for attribute whose value is the unique id of the radio button it will contain. The for attribute is optional when the <input> element is contained inside the <label> element, but is recommended for clarity.

<label for="radio1">
...
</label>

 2. Inside the label, code an <input> element and give it a type attribute whose value is "radio". Also give it an id attribute whose value matches the label's for attribute value, and a name attribute whose value identifies the radio button group. Optionally, give it a value attribute whose value provides some information about the radio button for scripting purposes.

<label for="radio1">
  <input type="radio" id="radio1" name="flash" value="on">
</label>

 3. Also inside the label, after the radio button, code a <span> element containing the radio button's text caption.

<label for="radio1">
  <input type="radio" id="radio1" name="flash" value="on">
  <span>Always on</span>
</label>

 4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the class attribute.

<label for="radio1" class="mdl-radio mdl-js-radio">
  <input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button">
  <span class="mdl-radio__label">Always on</span>
</label>

 5. Repeat steps 1 through 4 for the other radio components in the group. For each one:

  • on the label element, specify a unique for attribute value
  • on the input element, specify an id attribute value that matches its label element's for attribute value
  • on the input element, specify the same name attribute value for all radio components in the group
  • optionally, on the input element, specify a unique value attribute value

The radio components are ready for use.

Example

A group of radio buttons to control a camera's flash setting.

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash1">
  <input checked class="mdl-radio__button" id="flash1" name="flash" type="radio"
   value="on">
  <span class="mdl-radio__label">Always on</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash2">
  <input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
  <span class="mdl-radio__label">Always off</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash3">
  <input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
  <span class="mdl-radio__label">Automatic</span>
</label>

CSS classes

The MDL CSS classes apply various predefined visual and behavioral enhancements to the checkbox. The table below lists the available classes and their effects.

MDL class Effect Remarks
mdl-checkbox Defines label as an MDL component Required on label element
mdl-js-checkbox Assigns basic MDL behavior to label Required on label element
mdl-checkbox__input Applies basic MDL behavior to checkbox Required on input element (checkbox)
mdl-checkbox__label Applies basic MDL behavior to caption Required on span element (caption)
mdl-js-ripple-effect Applies ripple click effect Optional; goes on label element, not input element (checkbox)

Note: Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute disabled. <input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled> This attribute may be added or removed programmatically via scripting.


Radio Button

The MDL CSS classes apply various predefined visual and behavioral enhancements to the radio button. The table below lists the available classes and their effects.

MDL class Effect Remarks
mdl-radio Defines label as an MDL component Required on label element
mdl-js-radio Assigns basic MDL behavior to label Required on label element
mdl-radio__button Applies basic MDL behavior to radio Required on input element (radio button)
mdl-radio__label Applies basic MDL behavior to caption Required on span element (caption)
mdl-js-ripple-effect Applies ripple click effect Optional; goes on label element, not input element (radio button)

Note: Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute disabled. <input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled> This attribute may be added or removed programmatically via scripting.