Multi-Step Registration Form
Bootstrap 5 three-step registration form with a progress bar, step indicators, per-step validation, password matching, plan cards and a success screen.
Multi-step Forms
Wizard-style forms split into steps.
2 component(s)
Onboarding Wizard
Tailwind CSS onboarding wizard with step indicator, progress bar, radio cards, topic chips, validation and an editable summary before finishing.
What is a multi-step form?
A multi-step form, or form wizard, splits a long form into smaller steps, each on its own screen, with a progress indicator showing where the user is. It is common in checkouts, onboarding, account setup, insurance and loan applications, surveys and booking flows. Breaking a form into steps reduces cognitive load and makes long processes feel manageable.
When to use a multi-step form
- When a form has many fields that fall into clear groups, such as personal details, address and payment.
- When later questions depend on earlier answers.
- For onboarding, where each step introduces something new.
- Keep short forms on a single page; extra steps add clicks without benefit.
Best practices
- Show progress with a stepper or "Step 2 of 4" text, and mark the current step with
aria-current="step". - Give each step a clear heading and move focus to it when the step changes, so screen reader users know the content has updated.
- Validate each step before continuing and show errors next to the fields, linked with
aria-describedby. - Always allow going back without losing data, and keep entered values when users navigate between steps.
- Use one
<form>with grouped<fieldset>sections, or save each step to the server for long processes. - Show a review step at the end so users can check and edit everything before submitting.
- On mobile, keep Back and Next buttons large and in a consistent position.
Framework versions
The multi step form examples on this page include checkout wizards, onboarding flows, survey forms and forms with progress bars or numbered steppers. Bootstrap 6 versions use theme-* colour roles for completed and active steps and keep the step logic in a small ES module. Bootstrap 5 versions combine form controls, progress bars and vanilla JavaScript, Tailwind CSS versions use utilities with hidden and visible step states, and pure CSS versions show the layout with minimal scripting. Preview them live, copy the HTML, CSS and JS, and adapt the steps to your own fields.