Skip to content

← All components

Navigation and interaction

Stepper

Ordered multi-step progress and optional step navigation.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Stepper } from "@cofob/design-system-react";

/**
 * Complete Stepper parameter reference.
 * @param items
 *   type: readonly StepperItem[]
 *   required
 *   example: {items}
 * @param currentStep
 *   type: string step ID
 *   required
 *   example: {currentStep}
 * @param label
 *   type: string | renderable content
 *   default: "Progress"
 *   example: "Accessible label"
 * @param orientation
 *   type: "horizontal" | "vertical"
 *   default: "horizontal"
 *   example: "horizontal"
 * @param onStepChange
 *   type: (id: string) => void
 *   default: —
 *   example: {handleStepChange}
 * @param nav attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function StepperExample() {
  return (
    <Stepper items={steps} currentStep="details" />
  );
}

Svelte

svelte
<script lang="ts">
  import { Stepper } from "@cofob/design-system-svelte";

  // Complete Stepper parameter reference.
  // items
  //   type: readonly StepperItem[]
  //   required
  //   example: {items}
  // currentStep
  //   type: string step ID
  //   required
  //   example: {currentStep}
  // label
  //   type: string | renderable content
  //   default: "Progress"
  //   example: "Accessible label"
  // orientation
  //   type: "horizontal" | "vertical"
  //   default: "horizontal"
  //   example: "horizontal"
  // onStepChange
  //   type: (id: string) => void
  //   default: —
  //   example: {handleStepChange}
  // nav attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Stepper items={steps} currentStep="details" />

HTML

html
<!--
  Complete Stepper parameter reference.
  items
    type: readonly StepperItem[]
    required
    example: {items}
  currentStep
    type: string step ID
    required
    example: {currentStep}
  label
    type: string | renderable content
    default: "Progress"
    example: "Accessible label"
  orientation
    type: "horizontal" | "vertical"
    default: "horizontal"
    example: "horizontal"
  onStepChange
    type: (id: string) => void
    default: —
    example: {handleStepChange}
  nav attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<nav class="cf-stepper" aria-label="Progress"><ol>…</ol></nav>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
itemsrequiredreadonly StepperItem[]requiredReact · Svelte · HTML{items}Structured items including IDs, labels, disabled state, and optional destinations.
currentSteprequiredstring step IDrequiredReact · Svelte · HTML{currentStep}Identifies the current step and derives complete/upcoming states.
labelstring | renderable content"Progress"React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
orientation"horizontal" | "vertical""horizontal"React · Svelte · HTML"horizontal"Sets layout and the matching keyboard navigation axis or ARIA orientation.
onStepChange(id: string) => void—React · Svelte · HTML{handleStepChange}Turns enabled steps into buttons and reports activation.
nav attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.