Version: latest

Universell einsetzbar

Stepper funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/stepper) — die Library erkennt die Umgebung automatisch.

Stepper

Stepper rendert eine mehrstufige Navigation für lineare oder nicht-lineare Prozesse mit Statusanzeige und Fortschrittskontext.

Übersicht

import { Stepper } from "@prokodo/ui/stepper"
;<Stepper
  activeStep={step}
  steps={[
    { label: "Personal info" },
    { label: "Address" },
    { label: "Confirm" },
  ]}
/>

Live PreviewOpen in Storybook ↗

Import

import { Stepper } from "@prokodo/ui/stepper"

CSS:

import "@prokodo/ui/stepper.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`steps`	`StepperStep[]`	—	✅	Array von steps with `label` and optional `description`.
`activeStep`	`number`	—	✅	Index of the currently active step (0-based).
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	—	Layout direction.
`nonLinear`	`boolean`	`false`	—	Allow clicking any step regardless of completion.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/stepper/Stepper.model.ts für den vollständigen StepperProps-Typ.

Design-Tokens

Anpassungen über CSS-Custom-Properties auf :root oder einem eingeschränkten Vorfahren-Element.

Token	Standard	Beschreibung
`--pk-stepper-icon-mask-bg`	`var(--pk-color-surface)`	Masken-Isolationsfarbe für den Icon-Rahmen-Gradienten
`--pk-stepper-label-color`	`var(--pk-color-muted)`	Label-Textfarbe (inaktiv)
`--pk-stepper-label-color-active`	`var(--pk-color-fg)`	Label-Textfarbe (aktiv)
`--pk-stepper-shadow`	`var(--pk-shadow-sm)`	Box-Shadow des aktiven Icon-Containers
`--pk-stepper-shadow-inset`	`var(--elevation-1--inset)`	Inset-Schatten des aktiven Icon-Containers
`--pk-stepper-icon-mb`	`var(--pk-space-md)`	Unterer Abstand zwischen Icon und Label

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Stepper } from "@prokodo/ui/stepper"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.
4.1.3	Statusmeldungen (AA)	✅ Erfüllt	Statusmeldungen (Laden, Erfolg, Fehler, Fortschritt) müssen assistiven Technologien ohne Fokusverschiebung mitgeteilt werden (aria-live oder role='status').

Testabdeckung: 3 jest-axe-Assertion(s) in 4 Testdatei(en) · 6 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Stepper in Storybook öffnen

Quellcode

src/components/stepper/Stepper.model.ts