packages/components/eui-wizard/eui-wizard-step.component.ts
Individual step component within an eui-wizard. Represents a single stage in a multi-step process with configurable state indicators. Supports completion, validation, and warning states with custom labels and icons. Must be used as a child of eui-wizard component. Automatically manages visual state based on wizard navigation and step progression.
| encapsulation | ViewEncapsulation.None |
| selector | eui-wizard-step |
| templateUrl | ./eui-wizard-step.component.html |
Methods |
Inputs |
| id |
Type : string
|
|
Unique identifier for the step. Used for programmatic step selection and tracking. |
| index |
Type : number
|
|
Numeric position of the step in the wizard sequence. Used for ordering and navigation logic. |
| indexIconSvgName |
Type : string
|
|
SVG icon name displayed inside the step indicator circle. Alternative to indexLabel for visual step representation. Follows eui-icon-svg naming convention. |
| indexLabel |
Type : string
|
|
Text label displayed inside the step indicator circle. Typically a number or short text representing step order. |
| isActive |
Type : boolean
|
Default value : false
|
|
Marks the step as currently active. Applies active styling and indicates current wizard position. |
| isCompleted |
Type : boolean
|
Default value : false
|
|
Marks the step as completed. Displays completion indicator (typically a checkmark) in the step circle. |
| isDisabled |
Type : boolean
|
Default value : false
|
|
Disables the step from being selected or navigated to. Prevents user interaction with the step indicator. |
| isInvalid |
Type : boolean
|
Default value : false
|
|
Marks the step as invalid or containing errors. Displays error styling to indicate validation failure. |
| isShowStepTitle |
Type : boolean
|
Default value : false
|
|
Shows the step title below the step indicator. Inherited from parent wizard but can be overridden per step. |
| isWarning |
Type : boolean
|
Default value : false
|
|
Marks the step with a warning state. Displays warning styling to indicate attention needed. |
| label |
Type : string
|
|
Primary label text for the step. Displayed as the main step title. |
| subLabel |
Type : string
|
|
Secondary descriptive text for the step. Provides additional context below the main label. |
| url |
Type : string
|
|
Optional URL associated with the step. Can be used for routing or deep linking to specific wizard steps. |
| toJSON |
toJSON()
|
|
TODO: from which one is this method being used from?
Returns :
object
|