Two-Step Dialog Form

ProNew

A dialog that splits a form into two steps (details, then options) with a step indicator, Next validating the first step, Back keeping everything, and the dialog size staying constant so it does not jump. Use this when one dialog needs a short guided flow.

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 create flow is a bit too long for one screen of a dialog but too short for a page.

Do not use it when: Three or more steps belong on a page with real progress and a review.

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
`onCreate`	`({ name, region, size }) => Promise<void>`	Called on the last step. A rejection shows an error and stays on step 2.

Accessibility

"Step 1 of 2" is a polite live region, and when the step changes focus moves to the dialog title for the new step so a screen reader reads where it is.
Next validates only step one; the error is an alert linked to the field. Back keeps all values.
The dialog has a minimum height so it does not change size between steps, which would move the buttons under the pointer.

Testing

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

Guide and examples

When to use it

A create flow is a bit too long for one screen of a dialog but too short for a page.

Do not use it when: Three or more steps belong on a page with real progress and a review.

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
`onCreate`	`({ name, region, size }) => Promise<void>`	Called on the last step. A rejection shows an error and stays on step 2.

Accessibility

"Step 1 of 2" is a polite live region, and when the step changes focus moves to the dialog title for the new step so a screen reader reads where it is.
Next validates only step one; the error is an alert linked to the field. Back keeps all values.
The dialog has a minimum height so it does not change size between steps, which would move the buttons under the pointer.

Testing

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