— PATTERN · UNDER CONSIDERATION
Forms & multi-step flows
Chunking long forms, wizard and stepper flows, and inline validation and error handling.
Capturing structured input without overwhelming the person filling it in. This pattern covers how to lay out fields, when to split a form across steps, and how to handle validation and errors.
Usage
When to use
- Any screen that collects more than one field of input.
- Split into steps when a single form exceeds roughly 8 visible fields, or spans distinct stages (e.g. details → review → confirm). See the UX Guidelines on chunking long forms.
When not to use
- A single, simple input — use one Form Control inline instead of a multi-step flow.
- When all fields are always required together and short — a single grouped form is clearer than artificial steps.
How it works
- Group related fields into labelled sections.
- For long or staged input, break the form into steps and show position with a Progress Stepper.
- Validate inline (on blur and on submit), keeping error messages next to the field they refer to.
- Preserve entered data when moving between steps or on validation failure.
Do & don’t
Do
- Give every field a visible label and, where useful, helper text — see Form labels & helper text.
- Keep each error message beside the field it refers to, and return the person to the first invalid field — see Error messages.
- Account for all five screen states: empty, loading, error, partial-data, permission-denied — per the UX Guidelines.
Don't
- Use placeholder text as the only label — it disappears as soon as the person types.
- Clear the form when validation fails.
- Blame the person in error copy — say what happened and how to fix it.
Related
- Components: Form Control, Input, Text Area, Progress Stepper, Stepper
- Content: Form labels & helper text, Error messages