Task list
A checklist where a finished task is struck through as the box is ticked.
Before launch
<ul class="mn-tasks" style="width:min(100%,26rem)">
<li><label class="mn-task"><input class="mn-checkbox" type="checkbox" checked><span>Replace placeholder photographs</span><span class="mn-task-meta">Done</span></label></li>
<li><label class="mn-task"><input class="mn-checkbox" type="checkbox" checked><span>Check both colour modes</span><span class="mn-task-meta">Done</span></label></li>
<li><label class="mn-task"><input class="mn-checkbox" type="checkbox"><span>Tab through every page</span><span class="mn-task-meta">Today</span></label></li>
<li><label class="mn-task"><input class="mn-checkbox" type="checkbox"><span>Read the copy aloud</span><span class="mn-task-meta">Tomorrow</span></label></li>
</ul>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/task-list.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-tasks | On a <ul>. |
| mn-task | One task: a <label> holding an mn-checkbox and a <span> with the text. |
| mn-task-meta | A due date or an owner at the end of the row. |
Accessibility
- Each task is a real checkbox with its text as the label, so the whole row is the hit area.
- Done is conveyed by the checked state, not only by the line through the text.
- The line draws in 360 ms and not at all under reduced motion.