A horizontal row of named steps for a flow that has to be done in order: finished steps show a check on ink, the current step an ink ring and its number, the rest a quiet number. The connector turns to ink behind you. Pass onStepClick to let people go back to a finished step. Below 640px only the current label stays visible.
import{Stepper}from"@puckoops/camelot";
ClientName and billing contact, done
2ProjectScope and budget, current step
3TeamWho works on it, not started
4ReviewCheck and create, not started
Name
Description
Default
Control
steps*
StepperStep[]
-
current*
Index of the step in progress; steps.length is all done
number
-
041
onStepClick
Makes finished steps buttons that report their index.
(index: number) => void
-
-
aria-label
string
"Progress"
className
string
-
When to use
Use Stepper at the top of a flow that has to be done in order, such as onboarding a client or raising an invoice. Three to six steps; pass onStepClick to let people go back to a finished step.
Use Progress instead when the work has no named steps.
Use Tabs instead when the sections can be visited in any order.
Examples
First Step
Nothing done yet.
1ClientName and billing contact, current step
2ProjectScope and budget, not started
3TeamWho works on it, not started
4ReviewCheck and create, not started
All Done
Every step checked.
ClientName and billing contact, done
ProjectScope and budget, done
TeamWho works on it, done
ReviewCheck and create, done
Labels Only
Without descriptions, for a narrow drawer.
Client, done
Project, done
3Team, current step
4Review, not started
Go Back
With onStepClick, finished steps become buttons.
4ReviewCheck and create, current step
Walkthrough
Continue and Back drive the stepper; finished steps can be clicked.