React Step FormGuides and Concepts
React Step FormGuides and Concepts
Validation
Step-level validation and full submission checks.
React Step Form validates step-by-step for navigation and validates the full payload on submit.
How validation works
next()validates only the active step fields.submit()validates all fields before callingonSubmit.- Step fields can be explicit (
steps[].fields) or inferred from mountedControllerusage.
Explicit step fields
Use explicit fields when the UI renders inputs conditionally or in multiple steps.
<FormWizard
schema={schema}
steps={[
{
id: "account",
component: AccountStep,
fields: ["email", "password"],
},
{
id: "profile",
component: ProfileStep,
fields: ["firstName", "lastName"],
},
]}
onSubmit={handleSubmit}
/>Infer fields from controllers
If you omit fields, the library derives them from Controller components that
are mounted in the current step.
Validate on demand
const { validateStep, validateAll } = useFormWizard<Values>();
const stepResult = validateStep();
const allResult = validateAll();The return object includes a boolean and a flattened error map keyed by field path.
Show validation errors
Controllers provide fieldState with error and invalid.
<TypedController
name="email"
render={({ field, fieldState }) => (
<label>
Email
<input type="email" {...field} />
{fieldState.error ? <p>{fieldState.error}</p> : null}
</label>
)}
/>