Skip to content

Multi-step form

Patterns

Break a long intake into a few steps with a visible sense of progress, saved progress and one review before submitting.

How it works

  1. Show a step indicator with the current step’s name and "Step N of M".
  2. Validate each field when it loses focus and each step when the person moves on; keep the person on the step until it is valid.
  3. On submit with errors, show an error summary banner at the top that links to each field.
  4. End with a review step that lists every answer with a Change link back to its step.
  5. Save progress as the person goes, and say so.

See it built: form full-screen page.

Elements

StepIndicator · Form · Field · TextField · MemorableDate · Validation · Banner · Button

Usability

Do
  • Ask one thing per field, and use Memorable date for dates people know by heart.
  • Use the Validation checklist for rules such as password requirements.
Don’t
  • Don’t show an error message on every keystroke.
  • Don’t lose answers when the person goes back a step.

Accessibility

  • The step indicator marks the current step with aria-current="step".
  • Moving to a new step moves focus to its heading.
  • Every error is tied to its field with aria-describedby and aria-invalid.

Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.

All patterns