The Stepper component is used to guide users through multi-step processes by clearly indicating progress and current position. In the Sharjah Design System, steppers help break complex workflows into manageable steps, improving clarity, confidence, and task completion.
Purpose
A process consists of multiple sequential steps
Users need to understand progress and remaining steps
Completing a task requires structured guidance
Forms or workflows are long or complex
Common examples include service applications, onboarding flows, and multi-step forms.
Component Structure
Default stepper – Displays steps in a horizontal sequence
Progress bar – Displays previous steps successfully finished
Vertical stepper – Displays steps in a vertical stack.
Alert type – Displays steps in a vertical stack with successful indication.
Interaction Behavior
Steps update as users progress through the workflow
Navigation between steps follows the defined process logic
Completed steps may be clickable if backward navigation is allowed
Accessibility Guidelines
Use clear text labels for each step
Provide visible focus states
Do not rely on color alone to indicate progress
Responsive Behavior
Horizontal steppers may switch to vertical on smaller screens
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
