TaskList
The Tasks list from Attio — round complete-checkboxes, grouped.
Attio's Tasks page: optional group headers with a count, then rows of a round complete-checkbox + title + trailing meta (due date, record chip, assignee). Completed rows strike through; overdue due-dates go red. Toggling is controlled via onToggle.
Preview
Usage
import { TaskList } from "crisp";
<TaskList
onToggle={(id, done) => update(id, done)}
groups={[
{
label: "Today",
tasks: [
{ id: "a", title: "moon's task", due: "Due 5 days ago", overdue: true },
],
},
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
tasks | Task[] | — | Flat list (or use groups). |
groups | { label, tasks }[] | — | Grouped sections with a header + count. |
onToggle | (id: string, done: boolean) => void | — | Fired when a checkbox is toggled. |
emptyLabel | ReactNode | "No tasks" | Shown when there are no tasks. |
Task = { id, title, done?, due?, overdue?, meta? } — meta is right-aligned trailing content (record chip, assignee avatar …).