Stepper

shadow

The Stepper component displays the progress through numbered steps. It provides a wizard-like workflow. Steppers show progress through a sequence of numbered steps.

Basic use

The sample represents the stepper in its basic flow with default navigation between steps.

Disabled (Deactivated) steps

The sample blocks some steps of the stepper, so you can see how the component communicates unavailable navigation.

Custom buttons

The demo replaces the default control with custom buttons, which is useful for more complex forms or wizard flow.

When to use

Use wje-stepper when the user enters a value, selects options, or performs an action on a form.

When not to use

Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.

Accessibility

Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.

Recommended practices

• Keep validation rules and error states consistent across the entire form.
• For asynchronous operations, display the load status or disabled status.
• For complex forms, prefer smaller sections and immediate feedback.

Attributes and properties

active

Popis	Určuje, či je komponent aktívny.
Atribút	active
Typ	string
Predvolené	-

done

Popis	Nastavuje textovú hodnotu uloženú vo voľbe done.
Atribút	done
Typ	string
Predvolené	-

startIndex

Popis	Nastavuje start index, ktorý používa logika stavu komponentu.
Atribút	start-index
Typ	number｜string
Predvolené	-

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

navigate

Popis	Spustí metódu navigate na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(direction: number) => void

goToStep

Popis	Spustí metódu goToStep na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(stepIndex: number) => void

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
header	Štýluje shadow časť header.
content	Štýluje rozbaľovaný obsahový panel.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.