Wizard

Multi-step form wizard with validation and navigation.

Props

WizardProps<T>

Prop	Type	Required	Description
steps	WizardStep<T>[]	Yes	Step definitions
initialData	T	Yes	Initial form data
onComplete	(data: T) => void | Promise<void>	Yes	Completion callback
onStepChange	(step: number) => void	No	Step change callback
className	string	No	Container class

WizardStep<T>

Property	Type	Required	Description
id	string	Yes	Step identifier
title	string	Yes	Step title
description	string	No	Step description
component	ComponentType<WizardStepProps<T>>	Yes	Step component
validate	(data: T) => boolean | Promise<boolean>	No	Validation function

WizardStepProps<T>

Props passed to step components:

Property	Type	Description
data	T	Current form data
updateData	(partial: Partial<T>) => void	Update data
errors	Record<string, string>	Validation errors

Compound Components

• Wizard.Header — Step indicator
• Wizard.Content — Current step content
• Wizard.Footer — Navigation buttons

Example

const steps: WizardStep<FormData>[] = [
  { id: 'info', title: 'Basic Info', component: BasicInfoStep },
  { id: 'details', title: 'Details', component: DetailsStep },
  { id: 'review', title: 'Review', component: ReviewStep },
]

<Wizard
  steps={steps}
  initialData={{ name: '', email: '' }}
  onComplete={handleSubmit}
>
  <Wizard.Header />
  <Wizard.Content />
  <Wizard.Footer />
</Wizard>

See also

• Wizard (Conceptual)