Animated multi-step progress indicator with active state transitions.
Move through the steps with the buttons or the indicators. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
initialStep | number | 1 | The first step to display when the stepper is initialized. |
stepCircleContainerClassName | string | '' | Custom class name for the container holding the step indicators. |
stepContainerClassName | string | '' | Custom class name for the row holding the step circles/connectors. |
contentClassName | string | '' | Custom class name for the step's main content container. |
footerClassName | string | '' | Custom class name for the footer area containing navigation buttons. |
backButtonProps | object | {} | Extra attributes passed to the Back button. |
nextButtonProps | object | {} | Extra attributes passed to the Next/Complete button. |
backButtonText | string | "Back" | Text for the Back button. |
nextButtonText | string | "Continue" | Text for the Next button when not on the last step. |
disableStepIndicators | boolean | false | Disables click interaction on step indicators. |
| Event | Description |
|---|---|
stepChange | Fired whenever the step changes. Receives the new step number. |
finalStepCompleted | Fired when the stepper completes its final step. |
| Slot | Description |
|---|---|
default | The FxStep components (or any custom content), one per step. |
step-indicator | Renders a custom step indicator. Receives step, currentStep and onStepClick. |
| Slot | Description |
|---|---|
default | The content of one step. |
Keyboard shortcuts and ARIA behavior.