Components
Course assignment rows
Compact course membership controls for student management.
On this page
Purpose and composition
CourseListItem presents an assigned course with optional selection and a removal action. Use it inside a student-management task, not as a discovery card.
Anatomy
- Cover thumbnail
- Course title
- Optional selection checkbox
- Revoke control
Configuration and variants
| Input or variant | Contract |
|---|---|
| Identity | id, title, and thumbnailUrl describe the assigned course. |
| Selection | checked and onSelect make selection controlled by the parent. |
| Removal | onRemove receives the action; the parent owns confirmation, persistence, and feedback. |
States and feedback
The checkbox reflects parent state. The row does not implement a pending, error, or optimistic rollback state of its own.
Interaction and responsive behavior
Allow the title to wrap. Keep selection and revocation separate so a selection action cannot accidentally remove access.
Accessibility and known limits
The source checkbox lacks an explicit accessible label. The visible Revoke action has a Remove course accessible name; these should be aligned and contextualized in a future app change.
Source references
| File | Responsibility |
|---|---|
| src/components/CourseListItem.tsx | Membership row |
| src/app/dashboard/students/[user_id]/page.tsx | Student course management |
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