Stepper

Multi-step progress indicator for wizards and multi-step forms. Shows numbered steps with connecting lines and status indicators.

Installation

# Install @opencosmos/ui to use Stepper
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

currentStep*— Zero-based index of the current step

orientation— Layout orientation

size— Size variant

clickable— Allow clicking steps to navigate

Usage

Import

import { Stepper } from '@opencosmos/ui';

Example

<Stepper>
  Content
</Stepper>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
currentStep*	text	"1"	Zero-based index of the current step
orientation	horizontal \| vertical	"horizontal"	Layout orientation
size	sm \| default \| lg	"default"	Size variant
clickable	boolean	false	Allow clicking steps to navigate

Accessibility

Uses aria-label="Progress" on the root
aria-current="step" on active step
Keyboard navigable when clickable
Step numbers announced by screen readers

Examples

Step 1

Step 2

Complete

Code Examples

Basic Usage

A horizontal stepper with 3 steps

import { Stepper, StepperStep } from '@opencosmos/ui'

<Stepper currentStep={1}>
  <StepperStep label="Account" description="Create your account" />
  <StepperStep label="Profile" description="Set up your profile" />
  <StepperStep label="Complete" description="Review and finish" />
</Stepper>