Explore behaviors before defining the interface.
Quick guide for designers
When to use
Use to orient a sequence of related tasks. For independent tasks or processing duration, consider another pattern.
What to design
Show step names, the current position, completed and pending steps, and next and back controls.
How it behaves
The indicator communicates position. Back and Continue control progression; direct access to steps is an additional decision.
What to document in Figma
Define prerequisites, optional steps, data preservation, returning, and conditions for considering a step complete.
How to review
Check sequence and states in the design. In the implementation, verify navigation, validation, data preservation, and current-step identification.
Sequence and states
- Does the journey have an understandable order? Can people recognize where they are, what is complete, and what remains without relying only on color or isolated numbers?
- Is a visited step different from a completed step? Document which data or confirmations make the step complete.
- Does the screen heading explain the current step? The indicator does not replace the heading or task instructions.
Next, back, and review
- Does going back preserve entered data? On continuing, do errors keep people on the step and explain what to correct?
- If completed steps are actionable, is it clear which can be opened and what happens to subsequent data after a change?
- Is final confirmation distinct from merely reaching the last step? Avoid communicating journey completion before submission is confirmed.
Variations and small screens
- If answers change the number of steps, does the displayed total remain accurate? Consider another pattern when the sequence is highly variable or nonlinear.
- On small screens, does a compact version retain the step name, position, and available controls? Do not rely on tiny or truncated labels.
Interaction Methods
Mouse and touch
Clicking or tapping Continue validates the step and displays the next one if data is valid. Clicking or tapping Back returns to the previous step while preserving intended data. Informational segments perform no actions.
Keyboard
Tab and Shift + Tab traverse Continue, Back, and step links when present. Enter or Space activates the focused button; Enter opens a step link. Informational segments do not receive focus.
After Continue, the new step appears and focus reaches its heading or defined starting point. On error, people remain on the step and find correction guidance; Back allows reviewing preserved data.
Screen readers
Using screen reader reading commands identifies each step’s name, position, and state, such as Step 2 of 4. Navigating to Continue or Back and activating the button changes step and makes its new context perceivable.
With a mobile screen reader in standard navigation mode, swiping traverses controls and double tapping activates Continue, Back, or a focused step link. The indicator reports position; it does not require dragging or tab-style arrow navigation.
Gherkin
BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).
Scenario: Given that I am on a page containing Step indicator
Educational scenarios for reviewing behavior. Adapt them to context and execute them in the implementation; the presence of this text does not mean tests were performed.
Keyboard navigation
- WHEN I use
Tabto reach next and back controls - I SEE visible focus and encounter no stops on informational segments
- THEN, when I continue with valid data, I SEE the next step and focus follows its defined starting point; going back shows preserved data
Screen reader on desktop
- WHEN I navigate the indicator with a desktop screen reader
- I HEAR or perceive the name, position, and state of the current step, distinguishing completed and pending steps
- THEN, when I advance or go back, I HEAR or perceive the new step; on error, I remain on the step and receive correction guidance
Screen reader on mobile devices
- WHEN I explore the compact version with a mobile screen reader
- I HEAR or perceive the step name and position and identify navigation controls
- THEN, when I activate Continue or Back with the platform gesture, I HEAR or perceive the displayed step and data follows the preservation rule
Additional scenarios — editorial extension
Advance with valid data
- GIVEN a correctly completed step
- WHEN I activate Continue
- THEN the next step appears, its position updates, and focus follows the documented rule.
Prevent advancement on error
- GIVEN a step with an input error
- WHEN I try to continue
- THEN I remain on the step, receive correction guidance, and entered data is preserved.
Go back and review
- GIVEN a later step
- WHEN I go back to review information
- THEN I find preserved data and any impact of changes on subsequent steps is explained.
Recognize position on mobile
- GIVEN the compact indicator
- WHEN I navigate with a mobile screen reader
- THEN I identify the name, position, and state of the current step and can access navigation controls.
Points to consider
This guide’s indicator accompanies a sequence. A list of independent tasks needs different access and completion logic.
USWDS uses an indicator without direct navigation. Making segments actionable is an editorial adaptation requiring explicit rules and semantic controls.
Do not treat completed step count as a measure of remaining time or effort. Final success depends on actual operation confirmation.
Implementation notes and behavior decisions
Activating Continue validates and advances according to the rules; Back returns while preserving defined data. An informational segment does not become clickable merely because it resembles a button.
Tab traverses navigation controls and step links when present. Informational indicators do not add focus stops.
For same-page step changes, move focus to a heading or coherent start of the new step. On error, use the defined validation pattern without silently advancing.
Represent the sequence in an understandable order and identify the current step programmatically, for example with aria-current="step". Completion and pending status also need perceivable text or state.
Verify the step name and position, such as Step 2 of 4, on desktop and mobile. The step change must be perceivable without rereading the entire page.
References
Additional references for components of type Step indicator.
Important:
Most references are on the course platform alongside the lessons cited in this material.
Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.
Technical references and examples consulted for this editorial adaptation. Each source retains its scope; consulting an example does not prove accessibility of another implementation.