Multi-Step Form

Problem

Long forms overwhelm users with dozens of fields at once, leading to abandonment. Managing validation across all fields simultaneously becomes complex. Users can’t save progress and return later, and it’s unclear how much of the form remains incomplete or which sections have errors.

Solution

Break long forms into sequential steps that users complete one at a time. This reduces cognitive load and allows validation after each step rather than overwhelming users with the entire form.

Example

This example demonstrates a multi-step form that conditionally renders different sections based on the current step, allowing users to progress sequentially through the form.

function MultiStepForm() {
  // Track which step user is currently on
  const [step, setStep] = useState(1);

  return (
    <>
      {/* Show PersonalInfo step first */}
      {step === 1 && <PersonalInfo onNext={() => setStep(2)} />}
      {/* Show AddressInfo after personal info is complete */}
      {step === 2 && <AddressInfo onNext={() => setStep(3)} />}
      {/* Show Review step last before submission */}
      {step === 3 && <Review onSubmit={handleSubmit} />}
    </>
  );
}

Benefits

• Reduces cognitive load by presenting a manageable number of fields at once.
• Improves completion rates by making progress feel achievable.
• Allows focused validation after each step instead of overwhelming error lists.
• Provides clear progress indication showing how much remains.

Tradeoffs

• Can frustrate users who want to see all fields upfront to gather required information.
• Adds complexity with step navigation, state persistence, and progress tracking.
• May feel slower than a single-page form for users who complete quickly.
• Requires careful design to avoid forcing users through unnecessary steps.