Select control-MDUI development document, Material Design front-end framework

Selection controls include check boxes, radio buttons, and on/off switching.

Call method

The selection controls are written in pure CSS, and only need to write HTML code to take effect.

color

Use accent colors.

style

Checkbox

Example

Not selected by default

Selected by default

Disabled and unchecked

Disabled, and selected

Indeterminate state

Disabled, and indeterminate status

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  Not selected by default
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  Selected by default
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  Disabled and unchecked
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  Disabled, and selected
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  Indeterminate state
</label>
<script>
  // The indeterminate property can only be set via JavaScript
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  Disabled, and indeterminate status
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Single box

Example

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    Not selected by default
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    Selected by default
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    Disabled and unchecked
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Disabled, and selected
  </label>
</form>

On/off switch

Example

<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

List of CSS class names

Class name	effect
`.mdui-checkbox`	Define the check box.
`.mdui-checkbox-icon`	Define the icon in the check box.
`.mdui-radio`	Define a radio button.
`.mdui-radio-icon`	Define the icon in the radio button.
`.mdui-switch`	Define the on/off switch.
`.mdui-switch-icon`	Define the icon in the on/off switch.

Select control

Call method

color

Related Reading

style

Checkbox

Single box

On/off switch

List of CSS class names