Checklist Composition
Getting-started tasks with progress. Guided walkthroughs are Tour.
Usage
Get started
1 of 4Click a task to toggle it — in a real product, the app decides what "done" means.
It does not know what is done
Which tasks are complete is passed in by the caller. The library holds no account state, because a checklist that decides for itself what "done" means is one that disagrees with your backend the first time someone completes a step on another device.
Do
Give completeSlot something worth reaching — the checklist should be able to disappear.
Don't
Leave a finished checklist on the page forever; it turns from encouragement into clutter.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| tasks | ChecklistTask[] | — | id, label, description, done, onSelect. Without onSelect a row is not clickable. |
| title | ReactNode | 'Get started' | Also the accessible name of the region. |
| completeSlot | ReactNode | — | Replaces the list once every task is done. |