Stepper

A step indicator component with multiple layouts, icon support, vertical/horizontal orientations, and interactive navigation for wizard flows.

Basic

Basic Stepper

Simple numbered stepper with descriptions

Account SetupCreate your account credentials
2
Personal InfoFill in your personal details
3
PreferencesOptionalCustomize your experience
4
ConfirmationReview and confirm

import { Stepper } from 'fluxo-ui';

const steps = [
  { label: 'Account Setup', description: 'Create your account credentials' },
  { label: 'Personal Info', description: 'Fill in your personal details' },
  { label: 'Preferences', description: 'Customize your experience', optional: true },
  { label: 'Confirmation', description: 'Review and confirm' },
];

<Stepper steps={steps} activeStep={1} />

Layouts

Indicator Shapes

Different shapes for step indicators

Default (Rounded Rect)

Account
2
Profile
3
Review
4
Complete

Rounded (Circle)

Account
2
Profile
3
Review
4
Complete

Square

Account
2
Profile
3
Review
4
Complete

Rectangle (Pill)

Account
2
Profile
3
Review
4
Complete

Dot

Account
Profile
Review
Complete

Minimal

Account
2
Profile
3
Review
4
Complete

With Icons

Icon Steps

Steps with custom icons for each step

Rounded with Icons

AccountSign in or register
CartReview your items
PaymentEnter payment details
ShippingDelivery information
DoneOrder confirmed

Square with Icons

AccountSign in or register
CartReview your items
PaymentEnter payment details
ShippingDelivery information
DoneOrder confirmed

Rectangle with Icons

AccountSign in or register
CartReview your items
PaymentEnter payment details
ShippingDelivery information
DoneOrder confirmed

Text Only

Minimal & Dot Styles

Steps without numbers or icons, text labels only

Minimal (no background)

Account SetupCreate your account credentials
Personal InfoFill in your personal details
PreferencesOptionalCustomize your experience
ConfirmationReview and confirm

Dot indicators

Account SetupCreate your account credentials
Personal InfoFill in your personal details
PreferencesOptionalCustomize your experience
ConfirmationReview and confirm

Sizes

Size Options

Five sizes from xs to xl

Account
2
Profile
3
Review
4
Complete

Account
2
Profile
3
Review
4
Complete

Account
2
Profile
3
Review
4
Complete

Account
2
Profile
3
Review
4
Complete

Account
2
Profile
3
Review
4
Complete

Vertical

Vertical Orientation

Stepper in vertical layout

Rounded

Account SetupCreate your account credentials
2
Personal InfoFill in your personal details
3
PreferencesOptionalCustomize your experience
4
ConfirmationReview and confirm

With Icons

AccountSign in or register
CartReview your items
PaymentEnter payment details
ShippingDelivery information

Dot

Account SetupCreate your account credentials
Personal InfoFill in your personal details
PreferencesOptionalCustomize your experience
ConfirmationReview and confirm

Label Placement

Label Positions

Labels positioned below, to the right, or alternating

Bottom (default)

Account
2
Profile
3
Review
4
Complete

Right

Account
2
Profile
3
Review
4
Complete

Alternate

Account
2
Profile
3
Review
4
Complete

Interactive

Clickable Steps

Click on steps to navigate

Free navigation

1
Account SetupCreate your account credentials
2
Personal InfoFill in your personal details
3
PreferencesOptionalCustomize your experience
4
ConfirmationReview and confirm

Linear (next step only)

Account SetupCreate your account credentials
2
Personal InfoFill in your personal details
3
PreferencesOptionalCustomize your experience
4
ConfirmationReview and confirm

Step Status

Error & Warning States

Individual steps can have error or warning status

With Error Step

Validated
2
Processing
Payment Failed
4
Shipping

With Warning Step

Upload
Validation2 warnings found
3
Processing
4
Complete

Variants

Color Variants

Different color themes for the stepper

primary

Account
Profile
3
Review
4
Complete

success

Account
Profile
3
Review
4
Complete

warning

Account
Profile
3
Review
4
Complete

danger

Account
Profile
3
Review
4
Complete

info

Account
Profile
3
Review
4
Complete

default

Account
Profile
3
Review
4
Complete

Import

import { Stepper } from 'fluxo-ui';
import type { StepItem } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

steps

StepItem[]

"-"

Array of step definitions with label, description, icon, and status

steps

StepItem[]"-"

Array of step definitions with label, description, icon, and status

activeStep

number

"0"

Index of the currently active step

activeStep

number"0"

Index of the currently active step

variant

"'primary'"

Color variant

variant

Color variant

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

"'md'"

Size of indicators and text

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Size of indicators and text

layout

"'default'"

Shape of step indicators

layout

Shape of step indicators

orientation

'horizontal' | 'vertical'

"'horizontal'"

Layout direction

orientation

'horizontal' | 'vertical'"'horizontal'"

Layout direction

labelPlacement

'bottom' | 'right' | 'alternate'

"'bottom'"

Position of labels relative to indicators

labelPlacement

'bottom' | 'right' | 'alternate'"'bottom'"

Position of labels relative to indicators

showStepNumbers

boolean

"true"

Show step numbers inside indicators

showStepNumbers

boolean"true"

Show step numbers inside indicators

showConnectors

boolean

"true"

Show connector lines between steps

showConnectors

boolean"true"

Show connector lines between steps

clickable

boolean

"false"

Allow clicking on steps to navigate

clickable

boolean"false"

Allow clicking on steps to navigate

linear

boolean

"false"

Only allow clicking the next step

linear

boolean"false"

Only allow clicking the next step

completedIcon

ReactElement | IconComponent

—

Custom icon for completed steps

completedIcon

ReactElement | IconComponent

Custom icon for completed steps

errorIcon

ReactElement | IconComponent

—

Custom icon for error steps

errorIcon

ReactElement | IconComponent

Custom icon for error steps

onChange

(step: number) => void

—

Callback when a step is clicked

onChange

(step: number) => void

Callback when a step is clicked

connector

ReactNode

—

Custom connector element

connector

ReactNode

Custom connector element

className

string

—

Additional CSS class

className

string

Additional CSS class

disabled

boolean

"false"

Disable all interaction

disabled

boolean"false"

Disable all interaction

id

string

—

HTML id attribute

id

string

HTML id attribute

ariaLabel

string

—

Accessible label

ariaLabel

string

Accessible label

Features

Multiple Layouts

Six indicator shapes: default rounded-rect, circle, square, rectangle pill, dot, and minimal text-only

Custom Icons

Pass custom icons per step for active, completed, and default states

Vertical & Horizontal

Both orientations with automatic connector adjustment

Interactive Navigation

Clickable steps with optional linear restriction for wizard flows

Step Status

Individual step status with error, warning, completed, active, and pending states

Label Placement

Labels can be placed below, to the right, or alternating above/below