Form wizard
Practical patterns for thoughtful interfaces.
Primary example
More possibilities
One step at a time.
A three-step onboarding flow with validation between steps and a final review. Use Back to make changes without losing your information.
Usage
// Validate only inputs in the active step before advancing.
activeStep.querySelectorAll("input").forEach(input => input.reportValidity());