Step Indicator
Step indicators are used to show users their current position within a sequence of steps.
Last updated
Step indicators are used to show users their current position within a sequence of steps.
Last updated
Step indicators are used in multi-step processes to guide users through each stage, making them ideal for forms, checkout processes, and workflows. They visually represent progress, helping users understand which steps are completed, which are current, and which are remaining.
A step indicator component typically shows a series of steps represented by numbers, icons, or labels. The current step is highlighted, while completed and upcoming steps have distinct visual markers. The component can be configured to display steps horizontally or vertically, and may include optional text labels to provide additional context for each step.
Lead-Icon: Placed at the beginning of each step, the lead icon visually represents the type of action or status associated with that step, providing immediate visual context.
Completed Line: A solid line connecting completed steps, indicating the progress through the sequence.
Step Title: The title of each step displayed prominently to identify the stage in the process.
Status Text: Accompanies each step title, giving a brief update or description of the current status at that particular stage.
Supporting Text: Additional descriptive text that provides more detailed information about what the user needs to know or do at the current step.
Dashed Line: Represents the connection between the current step and upcoming steps, signifying progress yet to be made.
Trail-Icon: Placed at the end of the ongoing card, typically an arrow pointing to the right, indicating the direction of progress through the steps.
Ongoing Card: This element surrounds the current or active step, highlighting it from other steps and often containing key information or interactions needed to progress.
Upcoming Step: Labels the steps that have not yet been reached or completed, often styled more subtly than completed or current steps to indicate they are not yet active.
Ensure clarity in each step title to inform users about their current phase in the process.
Overload steps with too much information, which can cause confusion and cognitive overload.
Use concise status texts to aid understanding without overwhelming the user.
Use confusing icons or symbols that may not be universally recognizable or contextually clear.
Maintain visual consistency with consistent icons, text styles, and colors across all steps.
Create dead ends where a step leads to ambiguous paths or unclear transitions.
Highlight the current step clearly using design elements like borders or background color.
Ignore responsiveness, failing to design the stepper to work on various screen sizes and devices.
Provide navigational feedback with clear icons or lines showing the sequence and progression.
Use ambiguous progress indicators like dashed lines without clear context.
