ChecklistRow
StableA list row with a title, an optional tag and a status on the right. An amber dot marks items that need a person.
Also known as task row, todo item
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Mixed statuses
- Update the brand sheetDone
- Review the contractWaiting for your sign-off
- Send the weekly noteDraftIn progress
<ul className="w-full max-w-md">
<ChecklistRow item={{ id: "1", title: "Update the brand sheet", status: "Done" }} />
<ChecklistRow item={{ id: "2", title: "Review the contract", status: "Waiting for your sign-off", attention: true }} />
<ChecklistRow item={{ id: "3", title: "Send the weekly note", badge: <Badge>Draft</Badge>, status: "In progress" }} />
</ul>Only the row that needs a person gets the dot. The others stay quiet.
When to use it
One item in a to-do list, with its status at the end of the row. Only items that need a person get the amber dot and darker status, so they stand out.
Made of: Title · Tag · Amber dot · Status
Use it for
- Steps in a task that the assistant or a team is working through.
- A list where a few items wait on the person and most do not.
Not for
- A row that opens something when pressed: use TrayRow.
- A whole list with finished work folded away: use Checklist.
- A step the assistant is running right now: use ToolCallCard.
Do and avoid
- Approve the hotel bookingNeeds you
- Compare train timesIn progress
- Compare train timesIn progress
Do
- Put rows inside a list.
- Use the amber dot only when a person has to act, and say what in the status.
- Use the tag for a small label, like a type or priority.
Avoid
- Do not use the amber dot for progress or priority. It means a person must act.
- Do not combine a long title with a tag. The title gets cut short.
- Do not expect it to be pressable. It has no checkbox.
On a phone
- The row fills the width. The title takes the space left by the status on the right.
- It is not tappable. If a row should open something, wrap it in a button of your own, which gets a 44px tap area, or a link with the tap class.
- Rows have 12px of padding above and below, and no minimum height.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| itemrequired | ChecklistItem | none | Object with id (string, required), title (ReactNode, required), badge (ReactNode), status (string) and attention (boolean). |
"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.
- attention
- Set attention on the item to show a dot beside the status and use the stronger text colour.
Tokens
Change one of these and every part that uses it follows.
--border--fg--fg-subtle--attention
Built in
- Each row is a list item, so inside a list screen readers hear how many items there are.
- The amber dot is read as "Needs attention".
- Status is written in words, not shown by color alone.
What you need to do
- Put rows in a list (ul or ol) and give the list a name for screen readers.
- Give every item its own id.
- When attention is on, say why in the status.
- Give anything pressable that you put in the title or tag its own name.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide