Stepper
stepperDisplays connected process steps with completed checks and an accessible current-step marker.
Usage
Basic usage
Input steps array and controlled activeStep (0-based), the current step and the previous step will be automatically lit.
- Place an order
- Payment
- Shipping
- Complete
const steps = [
{ label: "Place an order" },
{ label: "Payment" },
{ label: "Shipping" },
{ label: "Complete" },
];
<Stepper steps={steps} activeStep={1} />First step
When activeStep=0, only the first step is active, and the rest are unreached.
- Place an order
- Payment
- Shipping
- Complete
<Stepper steps={steps} activeStep={0} />Completed
activeStep When equal to the number of steps, all steps are completed (check mark + main color connection).
- Place an order
- Payment
- Shipping
- Complete
<Stepper steps={steps} activeStep={4} />When to use
Use Stepper for a minimal horizontal progress indicator controlled by steps and activeStep. Choose Steps when you need vertical layout, clickable steps, descriptions, custom icons, or explicit status. Stepper is the lighter option for display-only progress.
Import
import { Stepper } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| steps* | StepItem[] | — | Steps in the shape { label: ReactNode }. |
| activeStep* | number | — | Controlled zero-based current step. A value at least steps.length marks every step complete. |
| className | string | — | Additional class name. |
The progress container has the built-in Chinese aria-label "\u6b65\u9aa4\u8fdb\u5ea6", meaning “Step progress.”
Example
const steps = [{ label: "Order" }, { label: "Payment" }, { label: "Shipping" }, { label: "Complete" }];
<Stepper steps={steps} activeStep={1} />Usage guidelines
activeStepis controlled and zero-based. An index below it is complete and an equal index is active. PassactiveStep={steps.length}to represent full completion.- The API is intentionally limited to
stepsandactiveStep. Use Steps for vertical orientation, click-to-jump behavior, descriptions, or custom icons. - State hooks are
aria-current="step"anddata-state="completed|active|pending", not MUI's.Mui-activeclass.
Related
Tabs · Breadcrumb · Pagination · Anchor · Affix · BackTop
Playground
- Place an order
- Payment
- Shipping
- Complete
<Stepper steps={steps} activeStep={1} />