StepFlow

Multi-step flow with progress indicator. Compound: StepFlow, Progress, Content, Navigation.

Preview

Usage

import { StepFlow } from '@ramtt/ui'

<StepFlow currentStep={step} onStepChange={setStep} totalSteps={3}>
  <StepFlow.Progress />
  <StepFlow.Content>Step content here</StepFlow.Content>
  <StepFlow.Navigation onNext={next} onBack={back} />
</StepFlow>

Props

PropTypeDefaultDescription
currentStep*numberCurrent step index
totalStepsnumberTotal step count
stepsStepFlowStep[]Step definitions
onStepChange(step: number) => voidStep change handler
onComplete() => voidCompletion handler