Stepper

Progress through a multi-step form.

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

Examples

1. 1Your details
2. 2Experience
3. 3Confirmation

1. Your details (completed)
2. 2Experience
3. 3Confirmation

1. Sus datos (completado)
2. Experiencia (completado)
3. 3Confirmación

<Stepper steps={['Your details', 'Experience', 'Confirmation']} current={2} />

Props

Prop	Type	Default	Notes
steps	readonly string[]	required
current	number	required	The step the reader is on, from 1.
label	string	labels.progress	Names this list, such as “Progress · step 2”.
labels	Partial<StepperLabels>	English	{ progress, stepCompleted }. es.stepper.
ref	Ref<HTMLOListElement>	—
className	string	—	Placement. Merged last.
anything else	<ol> attributes	—

Exported types: StepperProps, StepperLabels, and the label sets stepperLabels.

Accessibility

• A named ordered list (“Progress”). role="list" keeps it a list in Safari, which drops the semantics of a list without bullets.
• The current step carries aria-current="step".
• A finished step shows a check and says “(completed)” off screen: the mark is never the only thing that tells the truth. The numbers and connectors are hidden; the order says it.
• The steps are not links.

Without JavaScript

It needs none: the server renders the step the form is on. It renders as a Server Component.

Theming

primary with on-primary for the current step, primary-soft with primary for a finished one, border-strong and muted for the rest; ink for the words reached; border-strong for the connectors.