FormWizard

forms

Multi-step form wizard with numbered step progress indicator, back/next navigation, per-step validation, and step counter. Supports 2-5 steps with arbitrary content per step.

Import

typescript
import { FormWizard } from "packages/ui/src";

Props

FormWizardProps

PropTypeRequired
stepsWizardStep[]Yes
onComplete() => void, className?: stringNo

Examples

Form Wizard

Multi-step form component produced by the design-to-code pipeline (Stitch → Tokens → React).

Create Your Account

Enter your details to get started with CMS-aiChemist.

Step 1 of 4

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionMulti-step form wizard with numbered step progress indicator, back/next navigation, per-step validation, and step counter. Supports 2-5 steps with arbitrary content per step.
PropsFormWizardProps (steps: WizardStep[], onComplete?: () => void, className?: string)
Statesdefault, step-active, step-completed, step-inactive, field-focus, field-error, last-step
A11y
  • aria-current=step on active step circle
  • aria-live=polite on content region
  • aria-labelledby linking content to step indicator
  • Disabled back button on first step
Responsive
  • Full-width on all breakpoints
  • Step labels hidden on mobile if needed
Motion
  • Step circle transition 150ms ease
  • Button hover transition 150ms ease
Token Dependencies
  • components.formWizard.background
  • components.formWizard.borderRadius
  • components.formWizard.padding
  • components.formWizard.stepActiveBackground
  • components.formWizard.stepActiveBorder
  • components.formWizard.stepActiveText
  • components.formWizard.stepCompletedBackground
  • components.formWizard.stepCompletedText
  • components.formWizard.stepInactiveBackground
  • components.formWizard.stepInactiveBorder
  • components.formWizard.stepInactiveText
  • components.formWizard.stepConnectorActive
  • components.formWizard.stepConnectorInactive
  • components.formWizard.stepLabelActive
  • components.formWizard.stepLabelInactive
  • components.formWizard.fieldBackground
  • components.formWizard.fieldBorder
  • components.formWizard.fieldBorderFocus
  • components.formWizard.fieldBorderError
  • components.formWizard.fieldText
  • components.formWizard.fieldPlaceholder
  • components.formWizard.labelColor
  • components.formWizard.errorText
  • components.formWizard.checkboxCheckedBg
  • components.formWizard.checkboxBorder
  • components.formWizard.navCounterColor
Content Slotssteps[].content (ReactNode), steps[].label (string)
CMS Bindings
  • Step definitions from CMS collection
  • Form schema from CMS config
Test Cases
  • Renders all step indicators
  • Navigates forward
  • Navigates backward
  • Calls onComplete on last step
  • Back disabled on first step