Multi-Step Forms & Wizards Checklist

Step Structure

Total number of steps is fixed and known upfront
Each step has a clear title and short description
Each step contains logically grouped fields
No step is overloaded with too many fields
Final step is a Review & Submit step for longer flows
Review step shows all entered data
Review step allows user to go back and edit any step
Step order is logical

Navigation Between Steps

Next button advances to the next step
Back button returns to previous step after step 1
Back does not submit or save data
Back does not lose current step data
Completed steps can be clicked directly if already visited
User cannot advance until current step validation passes
Current step number and total are visible
Cancel or Exit link is available
Exit shows Discard progress confirmation
Refresh/page reload warns user if progress would be lost

Validation Per Step

Validation runs only for fields in the current step
Next button triggers current step validation
Validation errors are shown inline
User cannot advance with invalid fields
Returning to previous step preserves data and prior errors
Review step validates each section before final submit
Cross-step validation is handled where dependent field exists or on review
Step schemas are derived from one full form schema, not duplicated

Progress Indicator

Progress indicator is visible throughout the flow
Completed steps, current step, and future steps are visually distinct
Step labels are shown
Mobile has compact progress indicator
Clicking completed step navigates back if editing is allowed
Future steps are not clickable
Progress indicator layout does not jump between steps

Data Preservation

Going back preserves all previous data
Advancing and returning preserves data
Refresh prompts user or preserves non-sensitive data safely
Browser back button is handled if supported
Data from earlier steps updates later steps dynamically
Sensitive data is not stored in localStorage or URL

Final Step & Submission

Only final step triggers backend API call
Submit button shows loading state
Submit button disabled during loading
Failed submission keeps user on final step
Submission failure shows error and allows retry
Field error from earlier step navigates back to that step
Success navigates to success page or created entity
Form data cleared after successful submission
No re-submission if user presses back after success

Saving Progress & Draft

Draft saved to backend when feature supports it
Draft save indicator is shown
User can resume where they left off
Drafts have expiry
Draft data treated as unverified and re-validated on final submit
If no draft support, cancellation confirms progress loss

Mobile

Progress indicator is compact on mobile
Each step is full-screen on mobile
No horizontal scroll
Back and Next buttons are bottom-positioned and full width
Form fields are full width and touch-friendly
Keyboard does not cover active input
Review step is scrollable on mobile

Multi-Step Forms & Wizards Checklist

Live Multi-Step Form Demo

Step Structure

Navigation Between Steps

Validation Per Step

Progress Indicator

Data Preservation

Final Step & Submission

Saving Progress & Draft

Mobile

Before Marking Done

Structure

Navigation

Validation

Progress

Submission

Mobile