Heimerle + Meule Logo
Heimerle + Meule

Stepper

Display progress through a multi-step process using horizontal or vertical step indicators.

Quick Start

Use Stepper to guide users through a sequence of related steps such as registration, checkout, onboarding, or multi-page forms.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6  description: "Enter your account details",
7},
8{
9  id: "personal",
10  label: "Personal Info",
11  description: "Setup information",
12},
13{
14  id: "social",
15  label: "Social Links",
16  description: "Add social links",
17},
18]}
19activeIndex={1}
20/>

Process Stepper

The process variant displays a workflow using numbered steps and directional chevrons.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6  description: "Enter your account details",
7},
8{
9  id: "personal",
10  label: "Personal Info",
11  description: "Setup information",
12},
13{
14  id: "social",
15  label: "Social Links",
16  description: "Add social links",
17},
18]}
19activeIndex={1}
20variant="process"
21/>

Stepper

The stepper variant displays labels connected by a progress line. By default, markers render as simple indicator squares.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6},
7{
8  id: "personal",
9  label: "Personal Info",
10},
11{
12  id: "social",
13  label: "Social Links",
14},
15]}
16activeIndex={1}
17variant="stepper"
18/>

Numbered Stepper

Provide custom marker content using the marker property.

1<Stepper
2variant="stepper"
3activeIndex={1}
4steps={[
5  {
6    id: "account",
7    label: "Account Details",
8    marker: 1,
9  },
10  {
11    id: "personal",
12    label: "Personal Info",
13    marker: 2,
14  },
15  {
16    id: "social",
17    label: "Social Links",
18    marker: 3,
19  },
20]}
21/>

Custom Marker Content

Markers can contain any React content.

1
2<Stepper
3variant="stepper"
4activeIndex={1}
5steps={[
6  {
7    id: "account",
8    label: "Account Details",
9    marker: <Search />,
10  },
11  {
12    id: "personal",
13    label: "Personal Info",
14    marker: <Eye />,
15  },
16  {
17    id: "social",
18    label: "Social Links",
19    marker: <User />,
20  },
21]}
22/>
23
24
25<Stepper
26variant="process"
27activeIndex={1}
28steps={[
29  {
30    id: "account",
31    label: "Account Details",
32    marker: <Search />,
33  },
34  {
35    id: "personal",
36    label: "Personal Info",
37    marker: <Eye />,
38  },
39  {
40    id: "social",
41    label: "Social Links",
42    marker: <User />,
43  },
44]}
45/>

Vertical Process Stepper

Display steps vertically when space is constrained or when following a timeline-style layout.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6  description: "Enter your account details",
7},
8{
9  id: "personal",
10  label: "Personal Info",
11  description: "Setup information",
12},
13{
14  id: "social",
15  label: "Social Links",
16  description: "Add social links",
17},
18]}
19activeIndex={1}
20variant="process"
21orientation="vertical"
22/>

Vertical Stepper

The stepper variant is also available in a vertical orientation.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6  marker: 1,
7},
8{
9  id: "personal",
10  label: "Personal Info",
11  marker: 2,
12},
13{
14  id: "social",
15  label: "Social Links",
16  marker: 3,
17},
18]}
19activeIndex={1}
20variant="stepper"
21orientation="vertical"
22/>

Secondary Color

Apply the secondary color to use foreground styling instead of primary styling.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6  marker: 1,
7},
8{
9  id: "personal",
10  label: "Personal Info",
11  marker: 2,
12},
13{
14  id: "social",
15  label: "Social Links",
16  marker: 3,
17},
18]}
19activeIndex={1}
20variant="stepper"
21color="secondary"
22/>

Without Checkmarks

Completed process steps can display their original step number instead of a checkmark.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6  description: "Enter your account details",
7},
8{
9  id: "personal",
10  label: "Personal Info",
11  description: "Setup information",
12},
13{
14  id: "social",
15  label: "Social Links",
16  description: "Add social links",
17},
18]}
19activeIndex={1}
20showCheckmark={false}
21/>

Interactive Stepper

Allow users to navigate between steps by clicking individual step indicators.

1function Example() {
2const [step, setStep] = React.useState(1);
3
4return (
5  <Stepper
6    steps={[
7{
8  id: "account",
9  label: "Account Details",
10  description: "Enter your account details",
11},
12{
13  id: "personal",
14  label: "Personal Info",
15  description: "Setup information",
16},
17{
18  id: "social",
19  label: "Social Links",
20  description: "Add social links",
21},
22]}
23    activeIndex={step}
24    onChange={setStep}
25  />
26);
27}

Disabled Interaction

Disable click interactions while still displaying progress.

1<Stepper
2steps={[
3{
4  id: "account",
5  label: "Account Details",
6  description: "Enter your account details",
7},
8{
9  id: "personal",
10  label: "Personal Info",
11  description: "Setup information",
12},
13{
14  id: "social",
15  label: "Social Links",
16  description: "Add social links",
17},
18]}
19activeIndex={1}
20clickable={false}
21/>

API Reference

Stepper

Property

Type

Default

Description

stepsStepperStep[]-Array of step definitions rendered by the component.
activeIndexnumber0Zero-based index of the active step.
onChange(step: number) => void-Called when a step is selected.
variant"process" | "stepper""process"Controls the visual presentation of the component.
orientation"horizontal" | "vertical""horizontal"Controls the layout direction.
color"primary" | "secondary""primary"Controls the color styling.
showCheckmarkbooleantrueDisplays a checkmark for completed process steps.
clickablebooleantrueDetermines whether steps can be selected.

StepperStep

Property

Type

Default

Description

idstring-Unique identifier for the step.
labelstring-Primary text displayed for the step.
descriptionstring-Optional supporting text displayed in the process variant.
markerReactNode-Custom marker content displayed by the stepper variant.
disabledbooleanfalseDisables interaction for the step.

Visual Reference

Configuration

Preview

Process
Stepper
Numbered Stepper
Vertical Process
Secondary Color