Stepper hasn’t been defined for the Design System yet; however, general best practices for this element have already been outlined below.
Stepper
Description
A stepper (or multi-step form) is a UI component used to break down a complex process into multiple sequential steps. It provides users with a structured, guided experience to complete a task efficiently.
Use Cases
- When a task requires multiple steps and cannot be simplified into a single page.
- When a task follows a natural sequence where each step builds upon the previous one.
- When a task needs user input validation before proceeding (e.g., payment processing).
- When a task includes progressive disclosure to avoid overwhelming users with too many fields at once.
When not to use
- The form is short (5 fields or less).
- Users may need to edit multiple sections frequently.
- Sequential navigation isn’t required.
- The form requires real-time context.
Usage
Clarity: Keep the steps logically sequenced and named clearly. Use consistent navigation controls. Ensure steps follow a natural progression. Show only relevant fields based on user input. Avoid unnecessary steps - group related fields together if possible. If skipping a step due to conditions, ensure proper redirection to the next logical step.
Progress Indicator: Display "Step X of Y" at the top. Use a progress bar or stepper navigation to visually indicate progress.
Navigation: Provide a Previous button so users can return to earlier steps. If applicable, allow users to jump between completed steps (especially in non-linear processes).
Step Length: Keep steps short and focused (avoid overwhelming users with too much info). Limit steps to 3-5 where possible—longer processes may need progressive disclosure. Organize related fields together.
Validation: Use real-time inline validation to catch errors before moving to the next step. Highlight errors clearly and descriptively. Prevent users from advancing if critical fields are incomplete.
Save Progress: If the process is lengthy, auto-save responses so users don’t lose data if they leave. Provide a "Save & Continue Later" option for longer workflows. If users refresh the page or navigate away, retain their input instead of making them start over. Clearly warn users before they exit an incomplete form.
Keyboard Navigation: Allow users to navigate steps using Tab and Enter keys.
Responsiveness: Steps should be easily scrollable and fit within the mobile viewport. Avoid horizontal step indicators on narrow screens—use vertical indicators instead. Reduce loading time between steps—preload data where possible.