Phoundry UI

Stepper Experimental

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

import { Stepper } from 'phoundry-ui';

Horizontal with Navigation

1
Account
Create your account
2
Profile
Set up your profile
3
Preferences
Choose your preferences
4
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

1
Account
Create your account
2
Profile
Set up your profile
3
Preferences
Choose your preferences
4
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
2
Profile
Set up your profile
3
Preferences
Choose your preferences
4
Review
Confirm and submit

Click any step to navigate.

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

Props

PropTypeDefaultDescription
steps requiredStepperStep[]-Array of step definitions.
currentStep requirednumber-Zero-based index of the active step.
clickable booleanfalseAllow clicking steps to navigate.
onstepchange (stepIndex: number) => void-Called when a clickable step is clicked.
orientation 'horizontal' | 'vertical''horizontal'Layout direction.
showNumbers booleantrueShow 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

PropTypeDefaultDescription
id requiredstring-Unique step identifier.
label requiredstring-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.