Steps

Horizontal or vertical step indicator for multi-step wizards and onboarding flows.

Usage

<script lang="ts">
  import { Steps } from '@lostgradient/cinder/steps';
  import type { StepItem } from '@lostgradient/cinder/steps';

  const steps: StepItem[] = [
    { id: 'account', label: 'Account' },
    { id: 'profile', label: 'Profile' },
    { id: 'review', label: 'Review' },
  ];
</script>

<Steps {steps} currentStep={0} label="Onboarding" />

Interactive steps

A step is static text by default. Give a StepItem an href or an onclick and its body (label + description) becomes a focusable control — an <a> for href, a <button> for onclick. The marker circle and the connector line stay decorative, so only the body region is clickable and the marker never joins the accessible name.

const steps = [
  { id: 'account', label: 'Account', href: '#account' },
  { id: 'profile', label: 'Profile', onclick: () => goToProfile() },
  { id: 'review', label: 'Review' }, // plain, non-interactive
];

When a step has both href and onclick, it renders as a link and still runs the callback on click — the consumer decides whether to preventDefault (for SPA routing interception, analytics, or confirmation). For the current step, aria-current="step" moves onto the interactive element; static steps keep it on the list item.

Skipped steps

By default, state is derived from currentStep: earlier steps are complete, the matching index is current, and later steps are upcoming. Set state: 'skipped' on a StepItem when a flow advances past a step without completing it. Skipped steps keep their numeric marker, use neutral styling, and announce the skippedLabel text instead of the completed label.

const steps = [
  { id: 'account', label: 'Account' },
  { id: 'profile', label: 'Profile', state: 'skipped' },
  { id: 'review', label: 'Review' },
];