Setup Wizard Onboarding Block for React

The rail is a vertical Steps list driven by one step number. A step you have not reached is disabled; one you have can be reopened from the rail (or with Back), and moving on checks the step you are on. Only the current step's page is on screen, each in the same space so the page does not jump. On a phone the rail is replaced by "Step 2 of 4" and a hairline of progress.

Only the fields on the current step, in order: name (two letters or more), a full work email, and the workspace name (two to thirty characters). Each problem shows in its own reserved line under its field, the first one takes focus, and a short status line says to fix it. Invites are optional and every chip is already a valid, unique address, because the field refuses anything else and says why.

Each recap section has an Edit button named for it ("Edit account"). It opens that step with its first field in focus, and the main button then reads "Back to review" so one press takes you straight back to the recap instead of through every step. Open workspace checks all the answers once more and, if one is wrong, sends you to the step that holds it.

Everything: no account, workspace or invitation is created and nothing is sent; Open workspace only says "Opened in this demo". In your app, post the answers from open, treat the invite list as a request to your mailer, and keep reached on the server if people may leave and return.

Yes. Enter in a text field presses Continue. In the invite field Enter or a comma adds a chip and Backspace removes the last. The rail is one tab stop that follows the current step, with the arrow keys moving between steps you can open, and each new step takes focus on its heading so a screen reader announces where you are.

The step line and progress sit on top, the step page under the heading, and the actions are pinned to the foot of the screen: Continue full width, Back and Skip for now under it. The first step's fields and Continue are on the first screen.