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	32-40px
Step Height	48-56px
Progress Line Height	2-4px
Font Size	14-16px (labels)
Button Height	40-48px
Animation Duration	500ms

Step States

Pending Active Completed Error

Grey circle, future step

Brand color, bold, currently shown

Green with checkmark, done

Red with warning icon, issue

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