Progress Stepper

A multi-step wizard / flow indicator. Works uncontrolled (drive it via a ref) or controlled (you own steps[i].state and currentStep, applying transitions reported through onStepChange).

Usage


import { ProgressStepper } from '@mav-labs-inc/mavkit-react'
 
// Uncontrolled — internal state, drive it via ref
<ProgressStepper
  steps={[{ label: 'Details' }, { label: 'Payment' }, { label: 'Confirm' }]}
  mode="linear"
  onStepChange={onStepChange}
  ref={stepperRef}
/>
 
// Controlled — you own steps[i].state and currentStep
<ProgressStepper
  steps={steps}
  currentStep={current}
  onStepChange={({ index, states }) => {
    setCurrent(index)
    setSteps(prev => prev.map((s, i) => ({ ...s, state: states[i] })))
  }}
/>

Examples

Uncontrolled, driven by ref

Details
Payment
Confirm

Vertical, with preset states

Order placed
Shipped
Out for delivery
Delivered

Props

Prop	Type	Default	Description
steps*	{ label: string; state?: StepState; errorMessage?: string; icon?: ReactNode }[]	—
mode	'linear' \| 'non-linear'	'linear'
orientation	'horizontal' \| 'vertical'	'horizontal'
initialStep	number	0	Uncontrolled mode only — initial active step index.
currentStep	number	—	Controlled active step index — pair with onStepChange. Once provided, each step's state comes from steps[i].state and the ref API stops applying its own state changes.
ariaLabel	string	—
onStepChange	(event: StepChangeEvent) => void	—	{ index, state, states, errorMessage? } — states is every step's next state, in order.
onComplete	() => void	—
className	string	—
ref	Ref<ProgressStepperHandle>	—	{ goto(index), next(), prev(), completeAndNext(), setState(index, state, errorMsg?), setError(msg, index?), getStep() }

StepState is 'pending' | 'active' | 'done' | 'error' | 'disabled'.