Multi-step forms

Provide steps instead of fields; each step validates before advancing.

GitHub

Provide steps instead of fields and ReactFormSwitch switches on the wizard UI. Each step has an optional title and its own fields, and each step validates before advancing to the next.

<FormSwitch
  schema={{
    steps: [
      { title: 'Account', fields: [
        { name: 'email',    type: 'email',    label: 'Email',    validation: z.string().email() },
        { name: 'password', type: 'password', label: 'Password', rules: { minLength: 8 } },
      ]},
      { title: 'Profile', fields: [
        { name: 'name', type: 'text',     label: 'Name' },
        { name: 'bio',  type: 'textarea', label: 'Bio' },
      ]},
    ],
  }}
  onSubmit={(payload, values) => console.log(payload, values)}
/>
  • fields and steps are mutually exclusive — presence of steps turns on the step UI.
  • Validation, showIf, col, and every field type work identically inside a step.
  • onSubmit fires once, on the final step, with the combined values across all steps.

Everything else — ui, theming, payload, and loaders — applies to multi-step forms unchanged.