Skip to main content

Multi-step onboarding form (MUI)

Package: @formzk/mui (also pulls in @formzk/core)

A wizard split across multiple steps, sharing a single form instance. The trick is render every step up-front and hide inactive ones with display: none — this keeps each Controller mounted, so values entered on earlier steps survive forward/back navigation.

Validation is run per-step via form.trigger(stepFields) from useFormContext, so users can't advance until the current step is valid. The final step submits the entire form.

Loading playground…

What to try​

  • Fill out step 1, advance to step 2, then click Back — the email/password values are still there because every Controller stays mounted (just visually hidden).
  • Try clicking Next without filling required fields — trigger() short-circuits the navigation and surfaces errors via Formzk.MUI.Errors.
  • Inspect the live JSON on the review step — it updates immediately as you change fields on any step.