Anatomy
- Container: The full row that holds all step segments. Stretches to fill its parent's width.
- Step segment: One per step. Segments share the container's width equally.
- Step progress bar: Empty for upcoming steps, partial for the current step, full for completed steps.
Usage Guidelines
When to use this component
- For sequential, multi-screen tasks with a fixed number of steps the user works through in order, such as registration, onboarding, or setup wizards.
When not to use this component
- For a task that fits on one screen.
- For system progress with no user action. Use Progress Bar instead.
- For navigation between unrelated sections. Use Tabs instead.
Best Practices
Place the indicator at the top of the screen, below the navigation header, so users see their progress before engaging with the content.
Hide the indicator on some steps. Show it consistently across the whole flow.
Pair the indicator with a clear screen heading. The indicator shows position; the heading names the step.
Place a label like "Step 1 of 6" next to the indicator. If a number helps, put it in the step context itself.
Start the current step at around 10% fill when it opens, so users can see at a glance which step is active.
Let the current segment reach 100% before the user advances. Reserve a full fill for completed steps.
General Component Behaviors
Visual progress
When the step opens, the current segment fills to around 10% to mark the user's position. This baseline doesn't depend on user input. From there, the fill grows in proportion to how much of the step the user has completed, for example the share of required fields filled in. Fill caps at 90% until the user advances. A segment only reaches 100% once it is completed.
Navigating between steps
The indicator reflects the user's present position, not the furthest point reached. Returning to a previous step reverts that segment to current and any later segments to upcoming.
Width
The indicator stretches to fill its container, splitting the width equally between segments.
Placement
Prefer placing the Step Indicator at the top of the screen, below the navigation header and above the step's title. This is the most accessible position because assistive technologies and reading order encounter progress before the content.
Anchoring it at the bottom, above the primary action, is acceptable when the layout calls for it. Whichever you pick, stay consistent across every screen in the flow.
States
Step segment is in one of three states based on the user's position in the flow:
- Upcoming. The step has not been reached yet. Segment is empty.
- Current. The step the user is on right now. Segment is partially filled (see Fill behavior).
- Completed. The step is finished. Segment is fully filled.
Content guidelines
The indicator displays no visible copy. Step names, instructions, and context belong in the screen title and surrounding copy.
The component takes an accessibility label that describes the user's position to screen readers (for example, "Step 3 of 6, in progress"). See Accessibility Guidelines.