Stepper

Multi-step flow indicator with linear or non-linear navigation. Horizontal and vertical orientations.

Account

Plan

Pick a tier

Payment

Add billing

Done

You're all set

Usage

import { Stepper, Step, StepConnector } from '@bwo-ui/react';

<Stepper activeStep={1}>
  <Step index={0} label="Account" description="Sign up" />
  <StepConnector />
  <Step index={1} label="Plan" description="Pick a tier" />
  <StepConnector />
  <Step index={2} label="Payment" description="Add billing" />
</Stepper>

Props — Stepper

Prop	Type	Default	Description
`activeStep`	`number`	—	Zero-based index of the active step.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`linear`	`boolean`	`true`	When true, future (pending) steps can't be jumped to via a clickable indicator.

Props — Step

Prop	Type	Default	Description
`index`	`number`	—	Zero-based index of this step.
`label`	`ReactNode`	—	Title shown next to the indicator.
`description`	`ReactNode`	—	Supporting text under the label.
`icon`	`ReactNode`	—	Custom indicator content.
`status`	`'completed' \| 'active' \| 'pending' \| 'error'`	—	Force a status; otherwise derived from activeStep.
`clickable`	`boolean`	—	Render the indicator as a button. Calls onActivate when pressed.
`onActivate`	`(index: number) => void`	—	Called when a clickable indicator is activated.