RAPIDA UI

Progress Step

Wizard progress indicators that show the user where they are in a multi-step damage report flow. Three variants: dots, counter with labels, and progress bar.

Preview — Dots Variant (Step 2 of 5)

Preview — Counter + Labels + Progress Bar

Step 3 of 5 — Damage

Variants

Dots

Counter

Step 3 of 5 — Damage

Bar

Variant Usage
dotsCompact progress — mobile wizard header
counterVerbose — shows step number and label text
barVisual fill — pairs well with counter for combined display

Step Positions

Step 1/5
Step 2/5
Step 3/5
Step 4/5
Step 5/5

Accessibility

  • Dots variant uses role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax.
  • Each dot has an aria-label: "Step 2: Complete" or "Step 3: Current."
  • Counter variant uses aria-live="polite" so step changes are announced.
  • Bar variant reports percentage via aria-valuenow.

Trauma-Informed Design

  • Progress indicators reduce anxiety by showing the user how much is left to do.
  • 5-step maximum keeps the form from feeling overwhelming.
  • Completed steps are visually distinct (solid rapida-blue) from remaining steps (grey).
  • The current step is emphasized with a larger dot and focus ring — "You are here."