Stepper

Introduction

The Stepper component provides a flexible, accessible, and highly customizable interface for multi-step processes such as forms, wizards, onboarding flows, and checkout experiences. It supports linear and non-linear navigation, horizontal and vertical orientations, multiple visual variants, step status indicators, navigation controls, and both controlled and uncontrolled usage. Designed for complex workflows, it adapts to a wide range of use cases in dashboards, e-commerce, project setup, and more.

Import

import { Stepper } from '@odyssee/components';

LiveCodeEditor examples

Basic Stepper

Code Éditable

Résultat

Modes: Linear & Non-Linear

Code Éditable

Résultat

Orientations

Code Éditable

Résultat

Variants

Code Éditable

Résultat

With Navigation Controls

Code Éditable

Résultat

Alignment

Code Éditable

Résultat

Use Case: Multi-Step Registration Form

Code Éditable

Résultat

---

Props

Prop	Type	Default	Description
steps	Stepper.StepItemData[]	—	Array of step data (see below for structure).
currentStep	number | Signal<number>	—	The current step (1-indexed).
mode	"linear" | "non-linear"	"linear"	Navigation mode: sequential or free navigation.
orientation	"horizontal" | "vertical"	"horizontal"	Stepper orientation.
variant	"default" | "white" | "solid"	"default"	Visual style of the stepper.
alignment	"start" | "center" | "end"	"start"	Alignment of the stepper.
showControls	boolean	false	Shows navigation controls (Back, Next, Finish, etc.).
backText	string	"Back"	Text for the back button.
nextText	string	"Next"	Text for the next button.
finishText	string	"Finish"	Text for the finish button.
resetText	string	"Reset"	Text for the reset button.
skipText	string	"Skip"	Text for the skip button.
completeStepText	string	—	Text for the complete step button.
onStepChange	(step: number) => void	—	Callback fired when the step changes.
onComplete	() => void	—	Callback fired when the stepper is completed.
onSkip	(step: number) => void	—	Callback fired when a step is skipped.
onReset	() => void	—	Callback fired when the stepper is reset.
onBack	() => void	—	Callback fired when the back button is pressed.
onNext	() => void	—	Callback fired when the next button is pressed.
children	Pulse.JSX.Element | Pulse.JSX.Element[]	—	Custom children (alternative to steps array).
className	string	—	Additional CSS classes for the root element.
id	string	auto-generated	ID for the stepper component.
style	object	—	Inline styles for the root element.
...rest	BaseComponentProps	—	Any other base props supported by Odyssee components.

Stepper.StepItemData

Prop	Type	Description
index	number	Step index (1-based).
label	string	Step label.
description	string	Optional description for the step.
icon	Pulse.JSX.Element	Optional icon for the step.
avatar	string	Optional avatar image URL for the step.
content	Pulse.JSX.Element | () => Pulse.JSX.Element	Step content.
isOptional	boolean	Marks the step as optional.
isCompleted	boolean	Marks the step as completed.
hasError	boolean	Marks the step as having an error.

Implementation notes

• The component supports both controlled and uncontrolled usage via Pulse signals.
• Linear mode enforces sequential navigation; non-linear allows free navigation.
• Supports horizontal and vertical layouts, with alignment options.
• Step status is visually indicated (pending, active, completed, error, processed).
• Navigation controls (Back, Next, Finish, etc.) are built-in and customizable.
• Step content can be static or rendered via a function.
• Designed for both light and dark themes.
• All steps and interactions are accessible and keyboard-navigable.

Accessibility

• Uses ARIA roles (list, listitem, tabpanel) for screen readers.
• Keyboard navigation is supported (Tab, Arrow keys, Enter/Space for controls).
• Focus and active states are clearly styled.
• Disabled steps are not focusable or clickable.
• Navigation controls use accessible buttons with proper labels.

Best practices

• Use controlled mode (signals + callbacks) for full synchronization with your app state.
• Prefer linear mode for processes that require sequential completion.
• Use vertical orientation for sidebar or wizard layouts.
• Provide clear labels and descriptions for each step.
• Use icons or avatars to visually distinguish steps when appropriate.
• Ensure all step content is concise and accessible.
• Customize navigation controls to match your workflow.

Related links

• StepIndicator
• Accordion
• Pulse Framework documentation
• Odyssee Components documentation