i

Step indicator

Showing state and identity · researched

Shows where a person is in a multi-step flow and how many steps remain.

molecule · Carbon: Progress indicator · also called Steps, Stepper

"Progress indicator" in Material and elsewhere means a bar or spinner; "Step indicator" avoids that clash.

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Steps native: no antd 6.6.5
Variants
filled, outlined
Sizes
medium, small
States documented
disabled, error
Accessibility guidance
no

Div-based steps (not an ol in rendered source); types default, dot, inline, navigation, panel; step status wait/process/finish/error.

1 corrected on re-read
  • states_documented: ["error"] → ["disabled","error"] Steps item API: disabled "Disable click"; status wait|process|finish|error

docs ↗ · code ↗

Carbon

Progress indicator native: partly @carbon/react 1.117.0
Variants
horizontal, vertical
Sizes
—
States documented
hover, focus, disabled, error
Accessibility guidance
yes

ul of ProgressStep li items, each with a button. Step props: complete, current, invalid, disabled. Not a progress bar; Carbon's ProgressBar is a different component.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/progress-indicator/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ProgressIndicator"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/progress-indicator/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ProgressIndicator"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/progress-indicator/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No step indicator. Step by step navigation pattern is a prototype-only sidebar; Task list component lists tasks with status tags.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. No stepper/steps element anywhere.

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No stepper/step-indicator. Timeline (vertical event list) and ProgressBar exist but neither shows multi-step flow position. Checked: primer.style/product/components/ index, internal-components list, ui-patterns, packages/react/src tree (incl. deprecated/, experimental/, internal/).

Spectrum

Step list native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
small
States documented
default, hover, focus, disabled
Accessibility guidance
no

Implementations: v3 StepList (an ol element, sizes S, M, L, XL, orientation, isEmphasized, read from source) and spectrum-css steplist 7.2.0; the spectrum.adobe.com page is design-only and has no accessibility section. No S2 or SWC element. Not in installed SWC 1.12.4.

4 corrected on re-read
  • builds_on_native: "yes" → "no" spectrum-css template: div role=list with div role=listitem children; the v3 ol version is unexported
  • sizes: ["S","M","L","XL"] → ["small"] spectrum-css has only a --small modifier (default otherwise); v3 unpublished source has S/M/L/XL
  • states_documented: null → ["default","hover","focus","disabled"] States table: Default, Hover, Keyboard focus, Disabled, Selected supported
  • urls: {"docs_url":"https://spectrum.adobe.com/web/design-only/components/steplist","code_url":"https://github.com/adobe/react-spectrum/tree/main/packages/@adobe/react-spectrum/src/steplist"} → {"docs_url":"https://spectrum.adobe.com/web/design-only/components/steplist","code_url":"https://github.com/adobe/spectrum-css/tree/main/components/steplist"} HTTP 200; changed: code_url

docs ↗ · code ↗

USWDS

Step indicator native: yes @uswds/uswds 3.14.0
Variants
no-labels, counters, counters-sm, center
Sizes
—
States documented
default
Accessibility guidance
yes

Agrees with index. Ordered list of segments with complete/current/incomplete states and screen-reader text; aria-current on the current step.

docs ↗ · code ↗

Platform facts

Native elementol (ordered list), as a sequenceNo step indicator element or APG pattern. Spec ol: items 'intentionally ordered, such that changing the order would change the meaning'. MDN aria-current: the attribute accepts page, step, location, date, time, true, false; 'step' represents the current step within a process, such as the current step in an enumerated multi-step checkout flow, and the page text names a step indicator in a multi-page survey or checkout as a use. APG Breadcrumb sets aria-current to page on the current page link (a breadcrumb, not steps).
Baseline—
APG patternbreadcrumb
ARIA role—
Shipped by4 of 7 systems

Anatomy

  1. ordered list — Spec ol: list of intentionally ordered items.
  2. step (list item) — Spec: the li element children of ol are the items.

The seven states

default Non-current steps; MDN aria-current: one element in the group is styled to show the current step, and that element gets aria-current=step.
hover n/a — Not interactive by default.
focus n/a — Not focusable unless steps are links.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error n/a — Not defined by APG or HTML.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 6 of 35 fields changed on the second read — open any “corrected” note to see what it said before.