Stepper Experimental

Multi-step progress indicator with horizontal/vertical layout, clickable navigation, and step numbers.

import { Stepper } from 'phoundry-ui';

Horizontal with Navigation

Account

Create your account

Profile

Set up your profile

Preferences

Choose your preferences

Review

Confirm and submit

Step 1 of 4: Account

Show code

const steps = [
  { id: 'account', label: 'Account', description: 'Create your account' },
  { id: 'profile', label: 'Profile', description: 'Set up your profile' },
  { id: 'preferences', label: 'Preferences' },
  { id: 'review', label: 'Review', description: 'Confirm and submit' },
];

let current = $state(0);

<Stepper {steps} currentStep={current} />
<div class="flex gap-2">
  <Button onclick={() => current--} disabled={current === 0}>Back</Button>
  <Button onclick={() => current++} disabled={current === steps.length - 1} variant="primary">Next</Button>
</div>

Vertical

Account

Create your account

Profile

Set up your profile

Preferences

Choose your preferences

Review

Confirm and submit

Show code

<Stepper {steps} currentStep={current} orientation="vertical" />

Icons in indicators

Pass icon on each StepperStep; disable numeric badges with the showNumbers prop when they clutter compact layouts.

Upload

Pick a file

Review

Check details

Finish

Submit

Show code

const steps = [
  { id: 'upload', label: 'Upload', icon: 'carbon:upload' },
  { id: 'finish', label: 'Finish', icon: 'carbon:checkmark' },
];

<Stepper {steps} currentStep={current} showNumbers={false} />

With Numbers & Clickable

Account

Create your account

Profile

Set up your profile

Preferences

Choose your preferences

Review

Confirm and submit

Click any step to navigate.

Show code

<Stepper {steps} currentStep={current} showNumbers clickable onstepchange={(i) => current = i} />

Props

Prop	Type	Default	Description
steps required	StepperStep[]	—	Array of step definitions.
currentStep required	number	—	Zero-based index of the active step.
clickable	boolean	false	Allow clicking steps to navigate.
onstepchange	(stepIndex: number) => void	—	Called when a clickable step is clicked.
orientation	'horizontal' \| 'vertical'	'horizontal'	Layout direction.
showNumbers	boolean	true	Show numeric badges for upcoming steps; completed steps still show the check icon.
class	string	—	Additional CSS classes.
step	Snippet	—	Custom snippet for rendering each step indicator.

StepperStep

Prop	Type	Default	Description
id required	string	—	Unique step identifier.
label required	string	—	Step label text.
description	string	—	Optional description below the label.
icon	string	—	Iconify icon for the step indicator.
optional	boolean	—	Mark step as optional.

Usage tips

Use clickable with onstepchange for wizard UIs where users can jump between completed steps.
Mark optional steps with optional: true to display an “Optional” label.
Use the step snippet prop for fully custom step indicators when icons + labels are not enough.
clickable requires onstepchange — clicks on non-current steps invoke the handler.
Vertical orientation works well in sidebars or narrow containers.