StepIndicator

Multi-step progress bar — onboarding flows, checkout wizards, multi-page forms. Numbered or dot variant, horizontal or vertical, click-back to a completed step when you wire onStepSelect.

AccountEmail & password
WorkspaceName your team
InviteAdd 3 teammates
DoneShip the boogie

Usage

import { StepIndicator } from '@bwo-ui/react';

const STEPS = [
  { label: 'Account' },
  { label: 'Workspace' },
  { label: 'Invite' },
  { label: 'Done' },
];

<StepIndicator
  steps={STEPS}
  current={2}
  onStepSelect={(i) => setStep(i)}
/>

// Dots variant, vertical
<StepIndicator
  steps={STEPS}
  current={1}
  variant="dots"
  orientation="vertical"
/>

Props

Prop	Type	Default	Description
`steps`	`StepIndicatorItem[]`	—	Array of { label, description?, icon?, disabled? }.
`current`	`number`	—	Zero-indexed current step.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`variant`	`'numbered' \| 'dots'`	`'numbered'`	Numeric badges vs small dots.
`onStepSelect`	`(index: number) => void`	—	When set, completed steps become clickable.