Components
Action checklist
Turn a lesson into concrete steps that learners can check as they apply it. Completion is local presentation until the parent persists the change.
On this page
Purpose and usage
Turn a lesson into concrete steps that learners can check as they apply it. Completion is local presentation until the parent persists the change.
Anatomy
| Part | Contract |
|---|---|
| Heading | Action Checklist with divider lines |
| Control | 36px button with check glyph when complete |
| Item text | Real action instruction beside the control |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| items | Array of action strings |
| completed | Array of completed indices; updates reset local state |
| onToggle | Optional index callback |
State coverage
| State | Implemented behavior |
|---|---|
| Unchecked | White bordered control |
| Checked | Turquoise checked control |
| Updated props | Effect synchronizes completed indices |
Interaction and composition
- Use the actual lesson actionItems.
- Keep action order stable because completion uses indices.
- Pass the parent persistence callback; a local toggle alone is not a stored learner record.
- Do not present action checks as the same unit as lesson completion.
Accessibility and readiness
The available owner courses contain no stored action items, so no populated checklist capture is invented. Current buttons have no explicit accessible name or checked/pressed state. Adjacent visual text does not label an unnamed button. Add naming and state semantics in the app before claiming accessibility; enlarge or verify touch targets. This reference records the gap without modifying live app behavior.
Composition example
<ActionChecklist items={lesson.actionItems}
completed={completedIndices} onToggle={persistAction} />Source references
| File | Responsibility |
|---|---|
| src/components/courses-public/logged-in/ActionChecklist.tsx | Action items and local completion state |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1