Components
Creator onboarding
Task-oriented progress toward a usable course.
On this page
Purpose and composition
The source retains CompletionBar and OnboardingStep alongside the newer OnboardingBar. They have different contracts and should not be described as one interchangeable component.
Anatomy
- Step count or progress
- Named task and explanation
- Optional help/video link
- Action or course destination
Configuration and variants
| Input or variant | Contract |
|---|---|
| CompletionBar | currentStep / totalSteps control the visible proportion and text. |
| OnboardingStep | Receives step number, icon, title, explanation, optional action, completion, and disabled state. |
| OnboardingBar | Separate current implementation with native progress semantics. |
States and feedback
Completed and available steps depend on creator data. The specimen uses a fictional two-of-five state.
Interaction and responsive behavior
Each task should lead to its related editing surface. Avoid using progress as a substitute for explaining what remains.
Accessibility and known limits
CompletionBar lacks progressbar semantics. OnboardingStep’s coursePath heading uses a role=button span without a keyboard handler; that is a source limitation, not an approved pattern for new controls.
Source references
| File | Responsibility |
|---|---|
| src/components/onboarding/CompletionBar.tsx | Legacy progress |
| src/components/onboarding/OnboardingStep.tsx | Task card |
| src/components/OnboardingBar.tsx | Current onboarding strip |
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