← Back to docs

Multi-Step Wizard Example

A 3-step onboarding wizard with persistKey enabled — form state is saved to sessionStorage automatically with debounce. Refresh the page to see persistence in action.

1
2
3

💾 Form state is persisted to sessionStorage. Refresh the page to see it restored.

How It Works

  • Persistence: Pass persistKey: 'wizard-onboarding' to enable automatic sessionStorage persistence with 200ms debounce.
  • Step validation: Uses RHF's trigger() to validate only the current step's fields before advancing.
  • Auto-clear: On successful submission, persisted data is automatically removed from sessionStorage.
  • SSR-safe: The persistence layer checks for window availability before accessing sessionStorage.

Key Code

const {
  register,
  handleSubmit,
  formState: { errors, isPending },
  trigger,
} = useActionForm(wizardAction, {
  defaultValues: {
    firstName: '', lastName: '', email: '',
    company: '', role: '',
    plan: '', agreeToTerms: '',
  },
  persistKey: 'wizard-onboarding',  // ← enables persistence
  persistDebounce: 200,              // ← 200ms debounce
})

// Validate current step before advancing
const nextStep = async () => {
  const fields = fieldsPerStep[currentStep]
  const valid = await trigger(fields)
  if (valid) setStep(s => s + 1)
}