Wizard Form

<RavenWizardForm> renders a multi-step form with a progress indicator, per-step validation, and Prev/Next navigation.

Live Demo

Preview

1

Account

2

Profile

3

Preferences

Set up your account credentials.

Username*

Email*

Password*

Code

import { RavenWizardForm } from "raven-form-engine";
import type { WizardStep } from "raven-form-engine";

const steps: WizardStep[] = [
  {
    id: "account",
    title: "Account",
    description: "Set up your account credentials.",
    fields: [
      {
        name: "username",
        type: "text",
        label: "Username",
        validation: { required: true },
        colSpan: 6,
      },
      {
        name: "email",
        type: "email",
        label: "Email",
        validation: { required: true },
        colSpan: 6,
      },
      {
        name: "password",
        type: "password",
        label: "Password",
        validation: { required: true, minLength: 8 },
        colSpan: 12,
      },
    ],
  },
  {
    id: "profile",
    title: "Profile",
    fields: [
      { name: "firstName", type: "text", label: "First Name", colSpan: 6 },
      { name: "lastName", type: "text", label: "Last Name", colSpan: 6 },
      { name: "bio", type: "textarea", label: "Short Bio", colSpan: 12 },
    ],
  },
  {
    id: "preferences",
    title: "Preferences",
    fields: [
      {
        name: "plan",
        type: "radio",
        label: "Plan",
        options: [
          { label: "Free", value: "free" },
          { label: "Pro", value: "pro" },
        ],
        colSpan: 12,
      },
    ],
  },
];

export function SignupWizard() {
  return (
    <RavenWizardForm
      steps={steps}
      onSubmit={(values) => console.log(values)}
      submitLabel="Create Account"
    />
  );
}

---

RavenWizardForm Props

Prop	Type	Description
steps	WizardStep[]	Required. Array of step definitions
onSubmit	(values) => void | Promise<void>	Required. Final submit handler
defaultValues	Record<string, unknown>	Initial values shared across all steps
adapter	FormAdapter	Override form adapter
ui	UIAdapter	Override UI adapter
submitLabel	string	Label for the final submit button
showStateInspector	boolean	Show inline state inspector

---

WizardStep Shape

interface WizardStep {
  id: string; // unique identifier
  title: string; // shown in the progress bar
  description?: string; // shown below the progress indicator
  icon?: string; // icon or emoji shown in the step circle
  fields: FormField[]; // fields rendered in this step
  columns?: number; // column grid override (default 12)
}

---

Step Validation

When the user clicks Next, the engine calls formAdapter.useTrigger()? on only the current step fields. If any field fails, navigation is blocked and errors are shown.

info

RavenRHFAdapter supports step validation via RHF's trigger() internally.

Shared Form State

All steps share a single form state instance. Values from earlier steps are preserved as the user navigates. onSubmit receives all values from all steps merged:

{
  "username": "cooldev",
  "email": "me@example.com",
  "firstName": "Cool",
  "plan": "pro"
}