LLabanaat

Stepper

Onboarding, checkout, and multi-step form progress. The parent app owns currentStep — there's no internal uncontrolled mode, since a stepper always reflects state that lives in your wizard logic.

<Stepper currentStep={1}>
<StepperItem index={0} title="Account" description="Basic info" />
<StepperItem index={1} title="Billing" description="Payment details" />
<StepperItem index={2} title="Confirm" description="Review and submit" isLast />
</Stepper>

Editable — change the code above and the preview updates live.

Vertical orientation

<Stepper currentStep={1} orientation="vertical">
<StepperItem index={0} title="Account" description="Basic info" />
<StepperItem index={1} title="Billing" description="Payment details" />
<StepperItem index={2} title="Confirm" description="Review and submit" isLast />
</Stepper>

Editable — change the code above and the preview updates live.

Error state

An explicit status prop overrides the auto-derived one — useful for marking a step invalid without changing currentStep.

<Stepper currentStep={2}>
<StepperItem index={0} title="Account" status="complete" />
<StepperItem index={1} title="Billing" status="error" description="Card declined" />
<StepperItem index={2} title="Confirm" isLast />
</Stepper>

Editable — change the code above and the preview updates live.

Installation

import { Stepper, StepperItem } from "@labanaat/ui/stepper";

Props

PropTypeDefaultDescription
currentStepnumber—0-indexed current step (on Stepper)
orientation"horizontal" | "vertical""horizontal"Layout direction (on Stepper)
indexnumber—This step's 0-indexed position (on StepperItem)
titleReactNode—Step label (on StepperItem)
descriptionReactNode—Supporting text (on StepperItem)
status"complete" | "current" | "upcoming" | "error"—Overrides the status auto-derived from currentStep (on StepperItem)
isLastbooleanfalseHides the connecting line after this step (on StepperItem)