Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA react-hook-form and zod multi-step form that validates one step at a time, with review, async submit and saved progress.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Step content renders inside shadcn/ui's Form provider, so use FormField, useFormContext or useFieldArray inside it as usual. A step's content can also be a function that receives { goTo, values, index }, which makes review screens with "Edit" links easy.
| Prop | Type | Default | Description |
|---|---|---|---|
form | UseFormReturn<T> | - | The useForm result. |
steps | FormWizardStep<T>[] | - | Steps in order. The last one submits. |
onSubmit | (values: T) => void | Promise<void> | - | Called with validated values. Throw to show an error. |
persistKey | string | - | Saves values and position to sessionStorage. |
onStepChange | (index, step) => void | - | Called when the step changes. |
successContent | ReactNode | - | Replaces the form after a successful submit. |
labels | { back?, next?, submit?, pending? } | - | Button text. |
Also accepts form element props.
| Field | Type | Description |
|---|---|---|
id | string | Stable id, used by goTo. |
title | string | Heading and progress label. |
description | string | Line under the heading. |
fields | Path<T>[] | Fields validated before leaving the step. |
content | ReactNode | (api) => ReactNode | The step's fields. |
form.trigger(step.fields) only. If anything is invalid, focus moves to the first field with aria-invalid="true".onSubmit runs, the button shows a pending state; a thrown error appears in an alert above the buttons.persistKey, values and position are restored after a reload. Storage is read only after mount, so server and client render the same markup, and errors from blocked storage are ignored.nav with an ordered list; the current step has aria-current="step", and each item says "step 2 of 4, complete" or "has errors" to screen readers.role="alert".