Multi-Step Form Sheet for React

In SheetDescription, which reads Step 1 of 3: Personal Information. Change that text with the step so screen readers hear it when the sheet opens.

First Name, Last Name and Phone Number. The phone input uses type="tel", so phones show the number pad.

Not in this demo: both are plain Buttons. Keep the step number in state, render that step's fields, and disable Back on the first step.

Keep them in one object in state, or in a form library, outside the step's fields. Otherwise unmounting a step loses what was typed.

The button labeled Start Setup is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Account Setup, and the description gives the step.