Wizard
Split a form into steps and validate forward navigation.
wizard filters the root fields visible on each step while keeping all values in one form. Enter a name of at least two characters, choose Next, then enter an email and finish. Back navigation keeps the current values.
Usage
Use your form instance from useForm. See the initial setup.
const schema = z.object({ name: z.string(), email: z.email() });
<ErlForm
form={form}
schema={schema}
wizard={{
steps: [
{ id: "identity", title: "Identity", fields: ["name"] },
{ id: "contact", title: "Contact", fields: ["email"] },
],
validateStep: (step, values) => step === 0
? values.name.length >= 2
: z.email().safeParse(values.email).success,
}}
/>Options
| Option | Behavior |
|---|---|
| steps | Nonempty list with unique id, title, optional description, and fields |
| previousLabel | Back button; defaults to Previous |
| nextLabel | Forward button; defaults to Next |
| firstStepLabel | Forward label on the first step |
| lastStepLabel | Present in the type but not used by the 1.0.0 renderer |
| validateStep | Boolean or Promise boolean before moving forward |
| onStepChange | New zero-based step index |
fields accepts root field names, not nested paths. Include an object's root name to show all of its children on a step. Keep the step list stable while the form is in use.
Next does not automatically validate the Zod schema, and the wizard does not create a submit button or prevent Enter from submitting the HTML form. The demo guards submission until the last step and displays a message when validation blocks Next. Always validate the complete schema before saving.
Moving backward does not invoke validateStep. Handle asynchronous callback failures in your application; Next has no built-in pending state.