Forms
Checkbox
Checked, empty and partial, with a springy check stroke.
Example
<label class="u-check"><input type="checkbox" checked><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Notify</label>
<label class="u-check"><input type="checkbox"><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Daily summary</label>
<label class="u-check" data-u="indeterminate"><input type="checkbox"><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Partial</label>Installation
Checkbox ships in the full package, in unslop.css and unslop.js:
curl -fsSL unslop.leallabs.dev/i | shNo build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.
Classes and variants
| Class | What it does |
|---|---|
u-check | The label that wraps the input and the box. |
u-check__box | The drawn box. The svg holds the check (u-tick) and the partial dash (u-dash). |
data-u="indeterminate" | On the label: the checkbox starts partial and cycles through partial, checked and empty. It's a demo. |
Accessibility and keyboard
State and roles
| Where | Attribute | What it says |
|---|---|---|
| checked | native attribute | Checked. |
| indeterminate | input property | Partial. Set it in JS: input.indeterminate = true. |
aria-checked="mixed" | on the input, via indeterminate | The indeterminate registration keeps aria-checked at mixed, true or false. |
Keyboard
| Key | Does |
|---|---|
| Tab | focuses the checkbox |
| Spacing | checks and unchecks |