Stepper

Stepper

Stepper is a multi-step navigation component that guides users through complex workflows with animated transitions between steps.

Visual Specifications

Property	Value
Step Indicator Size	20px (mobile) / 28px (desktop)
Step Line Height	2px (mobile) / 4px (desktop)
Width (Desktop)	543px
Width (Mobile)	320px (20rem)
Content Max-Width	1444px
Animation Duration	500ms

Layout Variants

• Three-step layout: Uses justify-content: space-evenly for balanced distribution.
• Responsive breakpoints: Uses 768px (md) for layout adjustment between mobile and desktop styles.

Step Content & Styling

The stepper-content area enforces a min-height calculated based on header height (approx. 130px - 137px), ensuring consistent page depth.

Animation Behavior

Direction	Transform
Next	Slide from right (100% → 0)
Previous	Slide from left (-100% → 0)
Easing	cubic-bezier(0.35, 0, 0.25, 1)
Transitions	Handled by @stepTransition animation trigger

Step States

Pending Active Completed

Grey circle (bg-primary-tselGrey40) and grey label text.

Brand red indicator (bg-primary-tselRed) and bold black label text.

Brand red indicator (bg-primary-tselRed) for validated steps.

Note: Active step is determined by selectedIndex comparison; completed steps are validated via stepControl.status === 'VALID'.

Navigation Modes

Mode	Description
Linear	Must complete steps in order
Non-linear	Can jump to any step
Controlled	System-controlled steps
Auto-advance	Progresses automatically

Option	Type	Default	Description
navigate	boolean	false	Allow step clicking
buttonBack	boolean	false	Show back button
btnResponse	string	undefined	Custom button text
activeTab	number	undefined	Set initial step
stepClass	string	undefined	Custom step class
isDeviceBundling	boolean	undefined	Bundle mode

Orientation Variants

Orientation	Description	Usage
Horizontal	Steps in row, content below	Standard workflows
Vertical	Steps in column, content beside	Complex forms, desktop

Button Configurations

Back Button	Next/Submit	Usage
Shown	Shown	Standard navigation
Hidden	Shown	Forward-only flow
Shown	Hidden	Multi-step review
Hidden	Hidden	Controlled externally

Animation Behavior

Direction	Transform
Next	Slide from right (100% → 0)
Previous	Slide from left (-100% → 0)
Easing	Smooth easing
Opacity	0 → 1 (current), 1 → 0 (leaving)

Usage Guidance

When to use

• Multi-step forms
• Checkout processes
• Onboarding flows
• Wizards and setup processes
• Data entry with validation

Best practices

✅ Do	❌ Don’t
Show clear step labels	Vague step names
Indicate progress	Hide user’s position
Allow review when possible	Prevent going back
Validate before next	Skip validation
Save state between steps	Lost progress on back
Show completion status	Unclear finish
Consider mobile layout	Cramped interface

Step Content Guidelines

Element	Recommendation
Steps per flow	3-7 recommended
Step labels	1-3 words
Content per step	Focused, single task
Completion time	2-5 minutes total

Accessibility

• Keyboard navigation (arrows, Tab)
• Accessibility: step indicator
• Keyboard navigation on step change
• Screen reader announcements
• Skip stepper link

Responsive Behavior

Screen	Layout
Desktop	Horizontal with labels
Tablet	Horizontal with icons
Mobile	Compact horizontal or vertical

Live Demo

View in Storybook →