Onboarding Checklist
ProA persistent or dismissible overlay panel that tracks onboarding progress through a checklist of setup tasks. Displays a progress bar, a list of completed and pending steps with checkmarks, and optional call-to-action links for each task. Typically anchored to the bottom-right corner of the viewport as a floating card that can be collapsed to a minimal trigger showing "2 of 5 complete".
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| Compact |
Usage Guidelines
Show a progress bar or fraction (e.g., "3 of 5 complete") for motivation.
Block interaction with the main application — the checklist is supplementary.
Allow users to dismiss or minimise the checklist at any time.
Reset progress when the user navigates away — persist state across sessions.
Mark completed tasks with a visible checkmark and muted styling.
Include more than 7 tasks — break larger onboarding into phases.
Link each task directly to the relevant page or action.
Force users to complete tasks in a strict order unless dependencies require it.
Code
Design Tokens
Accessibility
- Use role="complementary" with aria-label="Setup checklist" for the container.
- Each task item should indicate completion state via aria-checked or equivalent.
- Progress must be announced to screen readers — use aria-live="polite" on the progress text.
- The collapse/expand toggle must have an accessible label reflecting current state.
- Completed tasks should be announced — "Task complete: Create your first project".