Checklist
A checklist with one level of subtasks, a progress bar, attachments and a row menu. A parent follows its subtasks and ticking a parent ticks them all.
Code
<Checklist items={items} onToggle={async (id, done) => setItems((l) => toggleItem(l, id, done))} onAdd={add} onRemove={remove} />Projects & Work · beta
Live examples and controls: Checklist in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/checklist.jsonSmall pieces of work inside a task. Each change awaits your callback, so a failure shows instead of being hidden.
When to use
- Steps inside one task, with progress and optional attachments.
When not to use
- A board of tasks with owners: use a board or
EntityList.
Import
import { Checklist } from "@fadymondy/nasaq/web";Quick start
<Checklist items={items} onToggle={async (id, done) => setItems((l) => toggleItem(l, id, done))} onAdd={add} onRemove={remove} />Anatomy
Checklist data-slot="checklist"
├─ Progress done of total leaf tasks
├─ item rows Checkbox (indeterminate when some subtasks are done), text, meta, attachments
│ └─ subtasks one level
└─ add row text field, adds an item or a subtaskAPI
| Prop | Type | Default | Description |
|---|---|---|---|
items | ChecklistItem[] | required | { id, text, done, meta?, subtasks?, attachments? }. |
onToggle | (id, done) => Promise<...> | required | Tick or untick. Cascade with the toggleItem helper. |
onAdd | (text, parentId?) => Promise<...> | none | Omit to hide the add row. |
onRemove | (id) => Promise<...> | none | Omit to hide delete. |
onAttach | (id, files) => Promise<...> | none | Omit to hide attach. |
onRemoveAttachment | (itemId, attachmentId) => Promise<...> | none | Remove a file. |
showProgress | boolean | true | The progress bar. |
readOnly | boolean | false | No changes. |
labels | ChecklistLabels | en / ar | Every string. |
Examples
- Read only: show a finished task's checklist with
readOnly.
Accessibility
Real checkboxes with labels; a parent with mixed subtasks is shown as mixed. The row menu opens with right-click, Shift+F10 or the Menu key, and every action is also a button.
RTL & i18n
English and Arabic built in. Subtasks are indented with logical padding so they mirror in RTL.
Styling & tokens
Semantic tokens only.
Do / Don't
- Do keep it to one level of subtasks.
- Do not use it for hundreds of items; paginate.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-projects-work-checklist--docs
TimeTracker
A running timer with project and task picker, manual time entries, an entries list grouped by day, and a day or week timesheet grid with totals.
HR Attendance and Leave
An attendance marker with breaks, leave balances and requests that check overlap and balance, and payroll runs in whole minor units.