Navigation

Stepper

Shows ordered progress while the application owns workflow state and actions.

idle

Usage

import {
	Stepper,
	StepperIndicator,
	StepperItem,
	StepperTitle,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Stepper>
	<StepperItem>
		<StepperIndicator />
		<StepperTitle />
	</StepperItem>
</Stepper>

Examples

Create a project

Set up a shared space for your next release.

Vertical progress

A connected rail keeps longer labels and descriptions readable.

Numbered markers

Keep the step number visible in every state.

Indicators on the track

A continuous rail connects centered markers, with labels below.

Interactive steps and content

Revisit an earlier step with a native button. Fields stay outside its clickable heading.

Indicator modes

Automatic status markers, persistent numbers, custom icons, and reserved empty marker space.

Progress motion

Advance one step to animate the connecting rail. Revisit any step without waiting for motion to finish.

Recommendations

Guidance	Practice
Do	Name each step and show completed, current, and upcoming states. Explain how users can return to earlier work.

Usage boundaries

Guidance	Boundary
Scope	The application owns transitions and validation. A step indicator does not authorize skipping required steps.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`aria-label / aria-labelledby`	`string`	`Required`	Names the ordered workflow.
`StepperItem.status`	`"complete" \| "current" \| "upcoming"`	`Required`	Sets visual progress and aria-current="step" for the current item.
`StepperIndicator`	`Decorative part`	`undefined`	Displays a caller-supplied step number or icon.
`StepperTitle / StepperDescription`	`Text parts`	`undefined`	Provide the step label and optional supporting text.
`children`	`ReactNode`	`undefined`	Compose StepperItem children. Steps do not become tabs or buttons; use existing actions beside the list.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Horizontal tracks collapse to the current label below 28rem. Vertical rails retain every description and content slot.
`StepperIndicator.mode`	`"auto" \| "number" \| "custom" \| "none"`	`auto`	Auto follows progress. Number and custom preserve the supplied marker. None reserves its space without displaying it.
`layout`	`"separated" \| "on-track"`	`separated`	Shows progress segments above labels or connects markers on a continuous rail.
`StepperTrigger`	`Native button props`	`button`	An optional clickable heading with native keyboard, disabled, and focus behavior. The application handles selection.
`StepperContent`	`Native div props`	`—`	Places step content below its heading, aligned with the label and outside the clickable target.
`activeStep / StepperItem.step`	`number`	`—`	Zero-based indices derive progress. Adjacent forward changes animate; mounting, backward moves, jumps, and reduced motion update immediately. Explicit statuses remain static.
`onStepClick`	`(step: number) => void`	`—`	Receives native StepperTrigger activation. The application validates and updates activeStep. Preventing the click default cancels this callback.
`density`	`"compact" \| "balanced" \| "spacious"`	`balanced`	Controls the spacing between vertical steps without changing marker size or text alignment.
`StepperItem.optional / disabled`	`boolean`	`false`	Optional adds a quiet label suffix. Disabled dims the step and disables its native trigger.