Stepper

ready

Vertical multi-step progress rail — "Application Progress, N of M".

The Stepper is the vertical progress rail beside a long multi-step form — Portal’s 13-step application flow. A Progress Meter header states the fraction as a bar and as text; below it, each step is complete, current, or upcoming.

Anatomy

  1. 1 Header — title, "N of M", and a Progress Meter bar
  2. 2 Step circle — checkmark, filled number, or outlined number
  3. 3 Connector — vertical line joining consecutive circles
  4. 4 Label / status — step name, plus "Complete" for finished steps

Variants

Default

<Stepper steps={[
{ label: "Application Type", state: "complete" },
{ label: "Application Instruction", state: "complete" },
{ label: "Personal Information", state: "current" },
{ label: "Board Approved Supervisor", state: "upcoming" },
{ label: "Educational Background", state: "upcoming" },
]} />

States

Complete

Checkmark circle, muted text, 'Complete' status line.

Current

Filled brand-color circle with the step number, bold brand-color text.

Upcoming

Outlined circle with the step number, muted text.

Usage

✓ Do

Give every step a state — the fraction and the bar are both derived from it.

✕ Don't

Don't use Stepper for a short 2-3 step flow — Progress Meter alone reads better at that length.

Accessibility

  • The list is a <nav> with an aria-label from title; the current step carries aria-current="step".
  • Step numbers come from array position, not a passed-in prop — a reordered step can’t silently show the wrong number.

Props

PropTypeDefaultNotes
stepsStepperStep[]—{ label, state }, state is "complete" | "current" | "upcoming".
titlestring"Application Progress"Header label above the “N of M” counter.