Multi-step signup

A three-step signup with a Stepper, validation on each step, an error summary that links to each field, a review step with edit links and a success state.

Built withCopy Anchor Link

• Stepper
• Card
• Avatar
• Field
• Input
• PasswordInput
• InputGroup
• RadioGroup
• NativeSelect
• Checkbox
• ErrorSummary
• DataList
• Button
• Heading
• Text
• Link

BehaviorCopy Anchor Link

• Brand panel. From 860px a panel in the brand color sits beside the form, with the reasons to sign up and a customer quote; narrower, the form stands alone with the logo above it.
• Validation per step. Continue checks only the current step. Errors appear after the first Continue on that step, then update as you type, so a fixed field stops being red at once.
• Error summary. A failed Continue shows an ErrorSummary with one link per problem; each link moves focus to its field. The step turns red in the Stepper until it is fixed.
• Address from the name. The workspace address follows the name ("Café Serra Azul" → cafe-serra-azul) until you edit it yourself.
• Review. The last step lists everything entered, with an Edit button per section that jumps back to it. Values are kept when you move between steps.
• Success. Creating the workspace replaces the form with a confirmation that repeats the email address.

AccessibilityCopy Anchor Link

• Moving to a new step puts focus on its heading, and a failed Continue puts it on the error summary, so a screen reader starts in the right place.
• The Stepper is an ordered list; the current step has aria-current="step" and finished steps say "completed".
• Every error is also in the field's FieldError, tied to the input, and the summary title says how many problems there are.
• The form uses noValidate, so the browser's own bubbles don't compete with the summary; autoComplete values let password managers fill the account step.