build69 / Components / Data Display / Stepper

Stepper

v1.0.2Updated 20 Jul 2026

Multi-step indicator with 6 step states (idle / active / completed / error / disabled / loading), horizontal or vertical orientation, linear or non-linear navigation, alternative-label mode, and a content slot per step.

View source ← Back to catalog

Preview

Live · 12 stories

HorizontalOpen ↗

▸Why this is recommendedstepperwizardprogressmulti-step+2

Stepper — horizontal.

Recommended for+14

✓Onboarding wizards
✓Checkout flows
✓Multi-step forms
✓Setup checklists

Tags+6

stepperwizardprogressmulti-stepformhorizontal

Features+4

States: idle / active / completed / error / disabled / loading
Horizontal + vertical orientations
Linear vs non-linear navigation
Alternative label layout (label under icon)
Content slot per step
Custom step icon

Not recommended for−2

✕Single-step forms (use FormSection)
✕Tabbed contexts (use Tabs)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Stepper" })

Usage

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

steps

Step definitions

StepperStep[]yes

active

Active step index

number—

orientation

Layout direction

'horizontal' | 'vertical'—

linear

Force sequential navigation

boolean—

alternativeLabel

Label under icon (horizontal)