Onboarding Checklist
A getting-started card — segmented progress and step rows, collapsible to a progress pill.
- Status
- Since
0.3.0- Accessibility pattern
- ARIA progressbar + checkboxes
Last updated
Getting started
1 of 4 steps completed
Install
Add Onboarding Checklist from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/onboarding-checklistThe same command installs the registry items it composes: @vegastack/icon-button, @vegastack/progress-indicator.
Usage
<OnboardingChecklist title="Getting started" done={doneCount} total={6}>
<OnboardingChecklistItem icon={<Mail />} done>
Sync email account
</OnboardingChecklistItem>
<OnboardingChecklistItem icon={<BarChart3 />} onClick={openReports}>
Create a report
</OnboardingChecklistItem>
</OnboardingChecklist>State model
The HOST owns completion (done per item + the done/total counts) and each step's action;
the component owns layout, the progress maths, and the
collapse-to-pill toggle (collapsed/defaultCollapsed/onCollapsedChange).
Anatomy
Onboarding Checklist is a compound component. Every exported part, with the
data-slot it renders (generated from the canonical source):
Examples
Getting started
1 of 4 steps completed
API Reference
OnboardingChecklist
| Prop | Type | Default | Description |
|---|---|---|---|
done* | number | — | Steps completed (the host counts its own items). |
total* | number | — | Total steps. |
collapsed | boolean | — | Collapsed state (controlled). Omit for uncontrolled with defaultCollapsed. |
collapseLabel | string | 'Collapse checklist' | Accessible label for the expanded-state collapse control. |
defaultCollapsed | boolean | false | Initial collapsed state for uncontrolled use. |
expandLabel | string | 'Expand checklist' | Accessible label for the collapsed-state expand control. |
onCollapsedChange | ((collapsed: boolean) => void) | — | Called whenever the user requests a collapsed-state change. |
title | React.ReactNode | 'Getting started' | Card heading. |
Data attributes and CSS variables on OnboardingChecklist
| Attribute | Values |
|---|---|
data-collapsed | "" |
data-slot | "onboarding-checklist" | "onboarding-checklist-collapse" |
OnboardingChecklistItem
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Value for children. |
done | boolean | false | Mark the step complete: checked glyph + muted struck label. |
icon | React.ReactNode | — | Leading icon (decorative). |
Data attributes and CSS variables on OnboardingChecklistItem
| Attribute | Values |
|---|---|
data-done | "" |
data-slot | "onboarding-checklist-item" |
Accessibility
- The segmented meter is a composed
ProgressIndicatorinsegmentsmode — one namedprogressbarfor the whole card, with its decorative segments hidden from assistive technology. - Collapse and expand controls expose complete action labels, and the collapsed pill preserves the current count in visible text.
- The collapsed pill takes its accessible name from that visible text (WCAG 2.2 SC 2.5.3, Label in Name), so it carries no
aria-label. Its parts are laid out by flex, which blockifies them, and accessible-name computation spaces any part whose computeddisplayis notinline— so the pill announces asGetting started 2/6 Expand checklistwith no separator markup of any kind. - Completed items are disabled and use a check plus struck label, so completion is never communicated by color alone.
| Key | Action |
|---|---|
| Tab | Move through the collapse control and unfinished steps. |
| Enter / Space | Collapse, expand, or activate the focused unfinished step. |
| Contract | States tested |
|---|---|
| Behaviour | default, checked, collapsed, complete, disabled, expanded, success |
| Accessibility | disabled, labeled, semantic-html |
| Visual | default, hover, disabled, success |