Stepper
A numbered step indicator for multi-step forms and wizards, with horizontal and vertical layouts.
AccountCreate your account
ProfileTell us about yourself
ReviewConfirm and finish
Set up your username and password to get started.
API
All inputs and configuration options for zyra-stepper.
| Prop | Type | Default | Description |
|---|---|---|---|
activeIndex | number | 0 | Index of the currently active step |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the step indicator |
label (on step) | string | '' | Title shown next to the step indicator |
description (on step) | string | '' | Supporting text shown under the label |
completed (on step) | boolean | false | Shows a checkmark instead of the step number |
disabled (on step) | boolean | false | Prevents the step from being clicked to navigate to |
Tokens
CSS custom properties zyra-stepper reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Border--zyra-color-border-color | var(--zyra-color-border) | Border color of an upcoming step's indicator. |
Background--zyra-color-surface-inset | var(--zyra-color-bg-surface) | Fill color of an upcoming step's indicator. |
Upcoming text--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Label/description color of an upcoming or completed step. |
Active fill--zyra-color-primary-subtle | var(--zyra-color-accent-muted) | Indicator fill color of the active step. |
Active accent--zyra-color-primary | var(--zyra-color-accent) | Indicator text/border color of the active step, and focus-outline color. |
Completed fill--zyra-color-primary | var(--zyra-color-accent) | Indicator background/border color of a completed step. |
Completed check--zyra-color-foreground-inverse | var(--zyra-color-text-inverse) | Checkmark color inside a completed step's indicator. |
Active label--zyra-color-foreground | var(--zyra-color-text) | Label color of the active step. |
Connector line--zyra-color-border-color | var(--zyra-color-border) | Color of the line connecting steps. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Step indicators are focusable buttons so keyboard users can jump between steps
- Completed steps expose a checkmark icon, not color alone