Checklist
StableA list of what is still open, with finished work folded into one line.
Also known as todo list, task list, plan steps
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Open items with a summary
- Dana WhitfieldForm ANo reply in 5 days, due in 2
- Owen ParkForm AReminder sent yesterday
- Received from Atlas, Birch and Cedar
<Checklist
doneSummary="Received from Atlas, Birch and Cedar"
items={[
{ id: "1", title: <span className="font-medium">Dana Whitfield</span>, badge: <Badge tone="accent">Form A</Badge>, status: "No reply in 5 days, due in 2", attention: true },
{ id: "2", title: <span className="font-medium">Owen Park</span>, badge: <Badge tone="accent">Form A</Badge>, status: "Reminder sent yesterday" },
]}
/>The first row needs a person, so it has an amber dot. Finished work is one line at the end.
When to use it
Shows what is still open in a running task and folds finished work into one line, so the list stays short and the open items stand out.
Made of: Top line · Item title · Item tag · Status with amber dot · Done summary line
Use it for
- People or items that still owe something, such as missing documents.
- A task in progress where only a few items need a person.
- Open work with a one-line summary of what is already done.
Not for
- Steps that must happen in a set order: use StepTimeline.
- A short list of things to open from a landing screen: use Tray.
Do and avoid
- Approve the hotel bookingNeeds you
- Compare train timesIn progress
- 6 tasks finished
- Approve the hotel bookingNeeds you
- Found flightsDone
- Checked visa rulesDone
- Saved the datesDone
- Listed three hotelsDone
- Checked bag rulesDone
- Added travel insuranceDone
Do
- List open items first and fold finished ones into the summary line.
- Mark a row only when a person has to act.
- Write status as a short fact with a time, such as No reply in 5 days.
- Use the tag for a category, not for status.
Avoid
- Do not list every finished item. The summary line is there to avoid that.
- Do not use amber for items that are only late or still being handled by the assistant.
- Do not use it for steps that must happen in order. Use StepTimeline.
On a phone
- Each row runs the full width, with the title on the left and the status on the right.
- The rows are not tappable, so there are no touch targets to size. Status text is 12px.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | ChecklistItem[] | none | Open items. ChecklistItem is { id: string; title: ReactNode; badge?: ReactNode; status?: string; attention?: boolean }. |
| doneSummary | string | none | One line summarising completed work. Shown as a final row with a check mark. |
| className | string | none | Extra classes merged onto the list. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- done summary
- Pass doneSummary to add a final row with a check and the summary text.
- empty
- With no items and no doneSummary, only the top border is drawn.
Tokens
Change one of these and every part that uses it follows.
--border (top and row rules)--border-strong (summary check)--attention (dot)--fg-muted / --fg-subtle
Built in
- It is a real list, so screen readers say how many items there are.
- The amber dot is read as "Needs attention", next to the status words.
- The check mark in the summary line is hidden from screen readers. The words carry the meaning.
What you need to do
- Write a status that says what is needed, such as "No reply in 5 days".
- Put a real button or link in the title if a row should open something. Rows do nothing on their own.
- Mark a row as needing attention only when a person has to act.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide