Components
Task completion control
A labeled completion button keeps the next action usable inside cards, inbox rows, and agenda blocks.
On this page
Purpose and usage
A labeled completion button keeps the next action usable inside cards, inbox rows, and agenda blocks.
Use for a binary task completion action; use SettingsToggle for a preference, not a work item.
Anatomy
| Part | Contract |
|---|---|
| Indicator | 24px / 28px box with 2px border and 7px radius. |
| Task label | Wrapping text next to the indicator. |
| Complete presentation | Filled indicator, check icon, strike-through, reduced text opacity. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| Controlled | complete and onToggle belong to the parent. |
| Uncontrolled | When complete is omitted, local state changes. |
| Disabled | disabled blocks interaction for history or unavailable actions. |
| Themed | Requires --project-ink, --project-check-bg, and --project-check-icon from its context. |
State coverage
| State | Implemented behavior |
|---|---|
| Incomplete | Accessible label begins Complete:. |
| Complete | Accessible label begins Mark incomplete:; aria-pressed is true. |
| Disabled | Native disabled button cannot activate. |
| Focus | Global outline unless the context overrides it. |
Interaction and responsive behavior
- Choose controlled mode for persisted data.
- Do not pass a fixed complete prop and expect internal state to update.
- Preserve enough space for a long task label; card clamps are a parent concern.
Accessibility contract
- Uses aria-pressed button semantics, not role=checkbox.
- The task title is part of the accessible name.
- The indicator is decorative and must not become a second tab stop.
Known gaps and readiness
Standalone rendering needs the project custom properties. Server persistence and optimistic failure recovery are responsibilities of the containing workflow.
Composition example
<TaskCheckbox task={task.title} complete={task.complete}
onToggle={() => setTaskComplete(task.id, !task.complete)}
disabled={locked} />Source references
| File | Responsibility |
|---|---|
| app/components/task-checkbox.tsx | Controlled/uncontrolled completion control |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1