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.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>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.
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
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
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.
Last updated
Was this helpful?