Stepper

A stepper shows the user's progress through a multi-step process, indicating the current step, completed steps, and steps still to come.

Steps:
Step 1 of 3
States
1
Enter Details
2
Review
3
Confirmation
Default Initial three-step state. The first step is active (UOB Blue fill, white number); upcoming steps are inactive (white fill, grey outline) and connected by a grey line.
1
Enter Details
2
Review
3
Confirmation
In progress In-progress state. Completed steps show a tick on a filled blue circle. The active step moves forward, with a blue connector line marking finished progress.
1
Enter Details
2
Info
3
Upload
4
Review
5
Confirmation
Extended Five-step variant. Use when the flow has more than three steps; the connector lines compress to fit the available width.
1
Enter Details
2
Review
3
Confirmation
Complete Final state. All step numbers are replaced with ticks once every step has been completed.
Behaviour
Progression
  • The stepper advances automatically when the user finishes a step.
  • The new current step becomes active; previous steps display a tick.
  • Upcoming steps stay inactive until the user reaches them.
  • Once every step is finished, all numbers are replaced with ticks to confirm completion.
Specs
1
Step indicator
  • Shows the step number, or a tick when the step is complete.
2
Active step
  • Filled with UOB Blue to mark the user's current position in the flow.
3
Step label
  • Names the step in one or two words so users know what each stage is for.
  • Recommended max 15 char.
4
Connector line
  • Connects adjacent steps. Turns UOB Blue once the preceding step is complete to visualise progress.
1 1
Enter Details 3
4
2 2
Review
3
Confirmation
Dos and Don'ts
  1. Use a stepper only for linear flows with 3–5 distinct steps so the user can see how far they've come and how much is left.
  2. Avoid using a stepper for flows with only 2 steps — a simple progress message is clearer.
  3. Always pair the stepper with a page heading that names the current step (e.g. "Your details").