TodoItem
One checkable row: a large toggle, a label, and an optional confetti burst on completion.
Brand palette
Waiting on legal review
Ship the harbour homepage
Icon audit
Book the twelve crew interviews and confirm every night-watch slot with Leo
In context
Final palette signed off
Homepage live on staging
Van livery photos filed
Crew briefing sent
Props
| Prop | Type | Required | Default |
|---|---|---|---|
label | ReactNode | Yes | — |
completed | boolean | Yes | — |
onToggle | (completed: boolean) => void | Yes | — |
toggleLabel | string | Yes | — |
celebration | "big" | "small" | "none" | undefined | No | small |
disabled | boolean | undefined | No | false |
Label and disabled
label takes any node, so an Editable composes in. disabled shows a struck-through toggle that ignores clicks, for a task that is blocked rather than just not done.
Accessibility
The toggle is a real <button role="checkbox"> of at least 44 by 44 px. The burst only fires when completing, and is skipped under prefers-reduced-motion.
data-rebar-* attributes
data-rebar-component="todo-item" on the root; parts: toggle, label, burst (only while a celebration animates).
Migrating to Ant Design
Not codemod-covered. Compose AntD's Checkbox with your own confetti effect.