Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Stepper

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
  • Step labels remain readable at all breakpoints
  • Touch targets remain accessible on mobile devices
Previous Badges Next Statistics