Steps
The Steps component is a user interface element that simplifies complex processes or forms by breaking them down into a series of sequential steps.
Introduction
The steps component is a visual representation of a step-by-step progress tracker commonly used in multi-step processes, forms, or procedures. It provides a clear and intuitive way for users to understand their current progress and navigate through different stages of a task.
Visual representation
The following element is a visual representation of the steps component.
Code structure
The code for the "Steps" component involves using HTML elements like ` <nav> ` and ` <ol> ` to create the container for the steps. Each step is represented by an ` <li> ` element, and within it, the appropriate CSS classes and SVG icons are used to style and label the steps accordingly.
<nav aria-label="Progress" class="aegov-step">
<ol role="list" class="flex items-center justify-between">
<li class="relative w-full step-completed">
<!-- Completed Step -->
<div class="step-connector" aria-hidden="true" x-description="Completed Step">
<div class="step-connector-state"></div>
</div>
<a href="#" class="step-badge">
<span class="sr-only">Step 1</span>
</a>
</li>
<li class="relative w-full step-completed">
<!-- Completed Step -->
<div class="step-connector" aria-hidden="true" x-description="Completed Step">
<div class="step-connector-state"></div>
</div>
<a href="#" class="step-badge">
<span class="sr-only">Step 2</span>
</a>
</li>
<li class="relative w-full step-current">
<!-- Current Step -->
<div class="step-connector" aria-hidden="true" x-description="Current Step">
<div class="step-connector-state"></div>
</div>
<a href="#" class="step-badge" aria-current="step">
3
<span class="sr-only">Step 3</span>
</a>
</li>
<li class="relative step-upcoming">
<!-- Upcoming Step -->
<div class="step-connector" aria-hidden="true" x-description="Upcoming Step">
<div class="step-connector-state"></div>
</div>
<a href="#" class="step-badge">
4
<span class="sr-only">Step 4</span>
</a>
</li>
</ol>
</nav>
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Multi-step
Text below
Vertical
The "Vertical Steps" variation of the "Steps" component displays a vertical progress indicator, which is ideal for scenarios where a step-by-step process needs to be visually represented in a vertical layout.
The "Vertical Steps" variation uses ` pb-10 ` class to add bottom padding, creating appropriate spacing between step badges and connector lines.
Size variations
The steps sizes variation provides three size. These classes allow customization of the label font size and steps dimensions to suit specific design requirements.
| Class | Properties |
|---|---|
.step-sm |
height: 2rem; width: 2rem /* 32px */font-size: 0.85rem /* 14px */ |
.step-base |
height: 2.5rem; width: 2.5rem /* 40px */font-size: 1rem /* 14px */ |
.step-lg |
height: 3rem; width: 3rem /* 48px */font-size: 1.125rem /* 18px */ |
Behaviour
Special Classes in the "Steps" Component
-
step-completed: This class is applied to a step that the user has successfully completed. It visually indicates the progress made and distinguishes completed steps from others.
-
step-current: The "step-current" class is used to mark the current active step in the sequence. It highlights the step that the user is currently on, providing a clear visual reference.
-
step-upcoming: Steps that are yet to be completed but are part of the user's journey are marked with the "step-upcoming" class. It helps users understand the upcoming steps in the process.
-
step-disabled: In some cases, certain steps may be temporarily unavailable or disabled due to specific conditions. The "step-disabled" class is applied to indicate that the step cannot be accessed or interacted with at that moment.
State
By default, the ` hover ` and ` focus ` state of a steps has been defined. It is triggered when a user interacts with the element. The ` disabled ` status is set via scripting.
Disabled state
By adding a ` step-disabled ` class to a steps, you will essentially tell the browser that the steps is unusable. Disabled state for a steps would render it visually lighter. Add the ` aria-disabled="true" ` attribute to steps which is disabled as well as an added measure for assistive technologies.
Accessibility
To ensure accessibility for the Textarea component, follow these guidelines:
-
Semantic HTML: Use semantic HTML elements like
` <nav> `,` <ol> `, and` <li> `to convey the structure of the steps and their relationship. -
ARIA Roles and Attributes: Use
` aria-label `to provide a meaningful label for the navigation component. Utilize` aria-current="step" `on the current step to indicate the user's progress. Also, include` aria-hidden="true" `on the decorative elements like the step connector. -
Step Numbering: Ensure each step is numbered properly using the appropriate HTML elements (e.g.,
` <span> `,` <div> `) with the appropriate` aria-hidden `attribute to indicate -
Keyboard Accessibility: Make sure all steps are keyboard accessible and can be focused using the Tab key. Include keyboard focus styling to indicate the active step.
-
Screen Reader Compatibility: Test the component with screen readers to ensure that all steps, labels, and status updates are read accurately and provide meaningful information to users.
-
Focus Management: Manage focus appropriately when interacting with the steps to maintain a consistent and predictable user experience.
By adhering to accessibility best practices, you can create an inclusive and user-friendly step component that caters to all users, including those with disabilities.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
Steps are used in a wide range of applications and interfaces to enhance user experience and facilitate task completion. Here are common usage scenarios:
Where to use a steps?
- Implement steps in interfaces where users need to complete multi-step or intricate processes, ensuring clarity and ease of use.
- In scenarios requiring users to input and submit data, steps simplify the process and reduce the risk of errors.
- Steps can be used to progressively reveal additional options or details, keeping the interface clean and user-friendly.
- Any situation where tasks or actions need to be performed in a specific sequence benefits from steps to guide users through the process.
- Steps are effective in keeping users engaged and motivated by showing progress and providing a sense of accomplishment as they advance through a task or process.