Checkbox
Native checkbox, restyled. Checked, indeterminate, disabled and invalid states; any colour role.
Basic
<div class="mn-stack">
<label class="mn-check"><input class="mn-checkbox" type="checkbox" checked> Remember me</label>
<label class="mn-check"><input class="mn-checkbox" type="checkbox"> Subscribe to the newsletter</label>
<label class="mn-check"><input class="mn-checkbox" type="checkbox" disabled> Disabled</label>
</div>With description
<label class="mn-check">
<input class="mn-checkbox" type="checkbox" checked>
<span><span>Accept terms</span><p class="mn-hint">You agree to our Terms of Service and Privacy Policy.</p></span>
</label>Colours
<input class="mn-checkbox mn-accent" type="checkbox" checked aria-label="Accent">
<input class="mn-checkbox mn-success" type="checkbox" checked aria-label="Success">
<input class="mn-checkbox mn-danger" type="checkbox" checked aria-label="Danger">
<input class="mn-checkbox" type="checkbox" aria-label="Indeterminate" data-indeterminate>
<script>document.querySelectorAll('[data-indeterminate]').forEach(c => c.indeterminate = true)</script>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/checkbox.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-checkbox | On an <input type="checkbox">. |
| mn-check | A label that lays out a control with its text. |
Accessibility
- It is a native checkbox, so Space toggles and state is announced. Wrap it in a <label> so the text is clickable.
- Set indeterminate from script: el.indeterminate = true.