Checklist Composition
Getting-started tasks with progress — the quieter half of onboarding, next to the Tour.
Usage
Get started
1 of 4Click a task to toggle it — in a real product, the app decides what "done" means.
<Checklist tasks={tasks.map((task) => ({ ...task, done: completed.includes(task.id), onSelect: () => go(task) }))} completeSlot={<Text>All set.</Text>}/>It does not know what is done
Which tasks are complete is passed in, exactly as a Tour's memory is. 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. |