Stepper
Progress through a multi-step flow. Done steps draw a check, the current one has an accent ring, and the line between steps fills as you advance.
import { Stepper } from "pleate/stepper";Booking flow
Done steps are buttons when onStepClick is set.
- Guests
- Payment
- Confirm
Vertical with descriptions
- Flight bookedTP 1351, Milan to Lisbon, done
- Stay confirmedAlfama flat, 4 nights, done
- Online check-inOpens 36 hours before departure
- Boarding passSent to your email
Props
- steps
The steps in order.
{ id, label, description? }[]- current
Index of the current step; use steps.length when all are done.
number- orientation
Layout.
"horizontal" | "vertical"default "horizontal"- onStepClick
Makes done steps buttons.
(index, step) => void
Accessibility
- An ordered list; the current step has aria-current="step".
- Done steps say "done" to screen readers; the markers are hidden from them.
- The connector animation is skipped with reduced motion.