Checkbox, and a toggle switch for checkboxes with role="switch". Label support, checked, and disabled states.
With Label
| Class | Example |
|---|---|
|
<label> .mdst-input |
|
| checked | |
| disabled | |
| checked disabled |
Standalone
| Class | Example |
|---|---|
| .mdst-input | |
| checked | |
| disabled |
Toggle
| Class | Example |
|---|---|
|
.mdst-input role="switch" |
|
| checked | |
| disabled | |
| checked disabled | |
| .mdst-input--pill | |
| .mdst-input--pill checked |
The class is optional inside .mdst-ui. A bare <input type="checkbox"> there gets the same styles. Variants still need their modifier (.mdst-input--pill), which works without .mdst-input. A toggle is a bare checkbox with role="switch".
Usage
<!-- With label (recommended) -->
<label>
<input type="checkbox" class="mdst-input" />
Label text
</label>
<!-- Standalone -->
<input type="checkbox" class="mdst-input" />
<!-- States -->
<input type="checkbox" class="mdst-input" checked />
<input type="checkbox" class="mdst-input" disabled />
<!-- Toggle -->
<input type="checkbox" class="mdst-input" role="switch" />
<input type="checkbox" class="mdst-input" role="switch" checked />
<input type="checkbox" class="mdst-input" role="switch" disabled />
<!-- Toggle rounded -->
<input type="checkbox" class="mdst-input mdst-input--pill" role="switch" />
<input type="checkbox" class="mdst-input mdst-input--pill" role="switch" checked />