Stepper

Definition: A stepper displays a progress through a sequence of logical and numbered steps.

When to use

Use a stepper to guide the user throughout the process, and keep track of completed tasks.

Anatomy

  1. Visited step
  2. Active step
  3. Future step (Not visited)

 

 

 

 

 

Variations

  1. Dot
  2. Numbers

 

 

 

 

 

Where to use

✅ Software installation & setup

✅ User registrations & onboarding

✅ Form completion

✅ E-commerce checkout

✅ Task configuration

✅ Account setup & personalisation

✅ Final transactions