Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn onboarding checklist where completing a step opens the next unfinished one, progress shows as a bar and as text, and finished steps can be marked not done.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this for "get started" panels on dashboards where a few setup tasks should feel like progress.
Do not use it for tasks people must complete in order for the product to work, or lists longer than seven steps.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
steps | { id, title, description, actionLabel }[] | - | The checklist. |
done | string[] | - | Ids of finished steps. |
onDoneChange | (done: string[]) => void | - | Called when a step is completed or reopened. |
progressbar with a name and aria-valuenow.| Key | Action |
|---|---|
| Enter or Space on a header | opens the step |
| Enter on the step button | completes it and opens the next |
The pattern ships a Testing Library test (accordion-checklist-progress.test.tsx) that covers the initial open step and progress, done text, completing and reopening.