Components
Lesson action checklist
Turn a lesson into concrete practice without conflating actions with lesson completion.
On this page
Purpose and composition
ActionChecklist renders practical tasks and their completion state beneath a lesson.
Anatomy
- Action heading
- 36px toggle target
- Action text
- Checked visual state
Configuration and variants
| Input or variant | Contract |
|---|---|
| items | Ordered strings; indices identify completion. |
| completed | Initial completed indices. |
| onToggle | Optional callback receives the changed action; persistence belongs to the parent. |
States and feedback
Each action updates optimistically. The component itself does not roll back a rejected persistence request.
Interaction and responsive behavior
Clicking an action toggles its local state. Keep action copy short enough to scan but specific enough to complete.
Accessibility and known limits
Buttons expose aria-pressed and the task text. The target is below a 44px house target; inspect spacing. In the current learner composition, failures are logged rather than explained visibly.
Source references
| File | Responsibility |
|---|---|
| src/components/courses-public/logged-in/ActionChecklist.tsx | Action controls |
| src/components/courses-public/logged-in/PrivateCourseView.tsx | Action persistence |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0