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 |
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