Multi-Step Form on One Store

ProNew

A three-step form whose values live in one form store: each step validates only its own fields, Back keeps everything, a summary step lists the answers with Edit links, and the progress is a labelled list. Use this when steps share one submit.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A long form is split into steps for focus but is submitted once, and people need to go back and change earlier answers from the review.

Do not use it when: When steps are independent saves (each step posts), keep separate forms. For two or three fields a single page is better than a wizard.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onSubmit`	`(values) => void \| Promise<void>`	Called once, from the review step, with every answer.

Edit the FIELDS object to change the steps and their rules.

Accessibility

The steps are a list named "Progress"; the current one has aria-current="step" and completed ones add the hidden text "(completed)".
After Next, Back or Edit, focus moves to the new step's heading so the person starts at the top of the new content.
Only the visible step's fields are validated, and a blocked Next marks those fields as touched so their errors appear with the first one announced.
The review is a description list with an Edit button for each group whose name says what it edits.

Testing

The pattern ships with a Testing Library test (multi-step-form-store-wizard.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A long form is split into steps for focus but is submitted once, and people need to go back and change earlier answers from the review.

Do not use it when: When steps are independent saves (each step posts), keep separate forms. For two or three fields a single page is better than a wizard.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onSubmit`	`(values) => void \| Promise<void>`	Called once, from the review step, with every answer.

Edit the FIELDS object to change the steps and their rules.

Accessibility

The steps are a list named "Progress"; the current one has aria-current="step" and completed ones add the hidden text "(completed)".
After Next, Back or Edit, focus moves to the new step's heading so the person starts at the top of the new content.
Only the visible step's fields are validated, and a blocked Next marks those fields as touched so their errors appear with the first one announced.
The review is a description list with an Edit button for each group whose name says what it edits.

Testing

The pattern ships with a Testing Library test (multi-step-form-store-wizard.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.