Multi-step forms
Provide steps instead of fields; each step validates before advancing.
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)}
/>fieldsandstepsare mutually exclusive — presence ofstepsturns on the step UI.- Validation,
showIf,col, and every field type work identically inside a step. onSubmitfires once, on the final step, with the combinedvaluesacross all steps.