With Label
| Class | Example |
|---|---|
|
.mdst-checkbox-label .mdst-checkbox |
|
| checked | |
| disabled | |
| checked disabled |
Standalone
| Class | Example |
|---|---|
| .mdst-checkbox | |
| checked | |
| disabled |
Toggle
| Class | Example |
|---|---|
| .mdst-checkbox--toggle | |
| checked | |
| disabled | |
| checked disabled | |
| .mdst-checkbox--toggle-rounded | |
| .mdst-checkbox--toggle-rounded checked |
Usage
<!-- With label (recommended) -->
<label class="mdst-checkbox-label">
<input type="checkbox" class="mdst-checkbox" />
Label text
</label>
<!-- Standalone -->
<input type="checkbox" class="mdst-checkbox" />
<!-- States -->
<input type="checkbox" class="mdst-checkbox" checked />
<input type="checkbox" class="mdst-checkbox" disabled />
<!-- Toggle -->
<input type="checkbox" class="mdst-checkbox--toggle" />
<input type="checkbox" class="mdst-checkbox--toggle" checked />
<input type="checkbox" class="mdst-checkbox--toggle" disabled />
<!-- Toggle rounded -->
<input type="checkbox" class="mdst-checkbox--toggle mdst-checkbox--toggle-rounded" />
<input type="checkbox" class="mdst-checkbox--toggle mdst-checkbox--toggle-rounded" checked />