Components
Registration countdown
A visible reminder of a configured registration deadline.
On this page
Purpose and composition
CountdownTimer turns a target date into days, hours, minutes, and seconds. Registration authority remains elsewhere.
Anatomy
- Numeric time units
- Unit labels
- Grouped compact display
Configuration and variants
| Input or variant | Contract |
|---|---|
| target | Date string parsed by the browser. Supply an unambiguous instant. |
| Lifecycle | Starts after mounting, updates every second, and renders nothing after expiry. |
States and feedback
The reference freezes the clock against a fictional deadline. Initial server output may be empty before mounting.
Interaction and responsive behavior
Use alongside the actual registration availability and timezone rules, never as the sole enforcement mechanism.
Accessibility and known limits
Avoid announcing every second as a live update. Provide the deadline in readable text elsewhere in the registration context.
Source references
| File | Responsibility |
|---|---|
| src/components/CountdownTimer.tsx | Timer |
| src/app/make-class/[classId]/registration/page.tsx | Registration configuration |
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