Multi-step Form

Multi-step form: per-step validation, skipping, review before submit, drafts. Pro · Forms and input › Whole forms and filters

Wizard on top of Stepper: per-step (async) validation, back / next / skip, a review step, draft saving and focus on the step heading after every move. Below 560px of width the step list collapses into a "Step 2 of 4" bar.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add multi-step-form

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { MultiStepForm } from 'valyro-ui-pro';

Props

Prop	Type	Default
`steps` *	`MultiStepFormStep[]`		Steps in order, each with its title, fields and optional validator; only the current one is rendered.
`step`	`number`		Index of the current step.
`defaultStep`	`number`	`0`	Initial `step` when uncontrolled.
`onStepChange`	`(step: number) => void`		Called with the new `step` when it changes.
`onSubmit` *	`() => void \| Promise<void>`		Called on the last step once it validates. Reject (or throw) with an Error to show its message.
`onSaveDraft`	`(step: number) => void \| Promise<void>`		Shows a "Save draft" button; receives the current step. Reject to show an error.
`headingLevel`	`2 \| 3 \| 4`	`2`	Level of the step heading that receives focus on every step change. Default 2.
`labels`	`Partial<MultiStepFormLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Form Field — Field with validation and errors
Form Autosave Status — Form autosave status: offline, error, version conflict and a useAutosave hook
Filter Builder — Filter builder: nested AND/OR groups, field-aware conditions, JSON and a summary
Filter Toolbar — Catalog filter bar: result count, dropdown filters, sorting, chips
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select

Previous: Form Field · Next: Form Autosave Status · All Forms and input