Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTabs used as sequential steps: later steps stay locked, with the state in their names, until earlier steps are complete, with Next and Finish buttons and an announced progress line.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this for short flows (two to five steps) where people may jump back to check an earlier answer, such as checkout or onboarding.
Do not use it for flows with branching or for steps that need their own URLs. Use a stepper or routes there.
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 | { value, label, content, isComplete }[] | - | Steps in order. |
onFinish | () => void | - | Called by Finish on the last step. |
disabled and spoken as "2. Payment, locked"; finished ones as "1. Account, done".isComplete.| Key | Action |
|---|---|
| Arrow keys | move between unlocked steps |
| Enter or Space on Next | advances when complete |
The pattern ships a Testing Library test (tabs-progress-steps.test.tsx) that covers locked steps, unlocking, Next and Finish and re-locking when an earlier step is cleared.