near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Selection Controls
Selection controls include checkboxes, radio buttons, and switches.
Usage
Selection controls are written in pure CSS, and only HTML code needs to be written to take effect.
Color
Use the accent color.
Related Reading
Example
<label class="mdui-checkbox">
<input type="checkbox"/>
<i class="mdui-checkbox-icon"></i>
Default unselected
</label>
<label class="mdui-checkbox">
<input type="checkbox" checked/>
<i class="mdui-checkbox-icon"></i>
Default selected
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled/>
<i class="mdui-checkbox-icon"></i>
Disabled and unselected
</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 state
</label>
<script>
document.getElementById('indeterminate-demo2').indeterminate = true;
</script>Example
<form>
<label class="mdui-radio">
<input type="radio" name="group1"/>
<i class="mdui-radio-icon"></i>
Default unselected
</label>
<label class="mdui-radio">
<input type="radio" name="group1" checked/>
<i class="mdui-radio-icon"></i>
Default selected
</label>
<label class="mdui-radio">
<input type="radio" name="group1" disabled/>
<i class="mdui-radio-icon"></i>
Disabled and unselected
</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>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>