# Task list · MIAN

A checklist where a finished task is struck through as the box is ticked.

- Id: `task-list` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/task-list
- Use for: todo list, checklist with strike through, tasks, launch checklist.
- Alternatives: onboarding, list.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Before launch

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/task-list/source