Stepper

Design System - Stepper component

The Stepper is a navigation component that guides users through a multi-step process in a structured and sequential manner. It is commonly used in forms, onboarding flows, and checkout processes, providing clear progress indicators and step-by-step guidance to enhance the user experience.

Component React

// Sample code

<Stepper
  activeSteps=""
  currentStep={1}
  customSteps={{}}
  direction="horizontal"
  onChange={()=>{}}
  onStepClick={()=>{}}
  populators={{
    name: 'stepper'
  }}
  props={{
    labelStyles: {}
  }}
  style={{}}
  totalSteps={5}
/>

Component Flutter

Component Design

Anatomy

---

Variants

---

	Horizontal Stepper Displays steps in a single row, guiding users through a linear process from left to right. Ideal for checkouts, onboarding, and multi-step forms with clear progress indicators.
	Vertical Stepper The Vertical Stepper displays steps in a column, ideal for mobile screens or detailed content. It improves readability and offers clear top-to-bottom navigation, making it great for forms or lengthy descriptions.

Properties

Divider Determines whether a visual separator (divider) is displayed between steps. Helps in distinguishing each step clearly.
Number of Steps Defines the total steps in the stepper. Helps in setting the length of the process.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

React

Property	Value	Default
currentStep	text	-
onStepClick	text	no
totalSteps	yes/no	no
customSteps	yes/no	-
direction	number	-
style	yes/no	-
className	yes/no	no
activeSteps	yes/no	no
hideDivider	yes/no	no
props	number	no

Flutter

Interaction State

---

Active State The current step is visually highlighted to indicate progress.
Completed State Steps that users have finished are marked as completed, often with a checkmark or different styling.
Hover State On hover, inactive steps highlight to indicate they are clickable and part of the navigation flow.

Behaviours

	Horizontal Scrolling When using a horizontal stepper in a narrow container, steps can scroll sideways to accommodate all steps within view.
	Vertical Scrolling In vertical layouts with limited height, steps scroll vertically to ensure users can access each step sequentially without content being cut off.
	Label Overflow If step labels exceed the available space, they are truncated with ellipsis (...) or wrapped to the next line based on layout and design requirements. Tooltips can be used to show the full label on hover.
	Flexible Dimensions Steppers adapt to custom width and height defined by their parent containers using flex layouts. They maintain usability and alignment across different screen sizes and orientations.

---

Usage Guide

---

	Use for a process that involves multiple steps Use a stepper only when a process involves multiple steps, ensuring clear progression and user guidance.
	Avoid using it for just one or two steps Avoid using a stepper for processes with just one or two steps, as it adds unnecessary complexity.

Changelog

---

Date	Number	Notes
Dec 15, 2024	v-0.0.2	This component is added to the website. This component is now individually versioned.

Design Checklist

---

	All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
	Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
	Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
	Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
	Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
	Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
	Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
	Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
	Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
	Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.