### File

`packages/components/eui-wizard/eui-wizard.component.ts`

### Description

Multi-step wizard component for guiding users through sequential processes or forms. Displays step indicators with navigation controls and manages step activation state. Supports keyboard navigation with arrow keys and programmatic step selection. Provides both declarative (content children) and programmatic (steps array) configuration. Commonly used for onboarding flows, multi-page forms, checkout processes, and guided workflows.

### Basic Usage

Example :

    <eui-wizard [activeStepIndex]="1" (selectStep)="onStepChange($event)">
      <eui-wizard-step label="Personal Info">
        <form><!-- step 1 content --></form>
      </eui-wizard-step>
      <eui-wizard-step label="Address">
        <form><!-- step 2 content --></form>
      </eui-wizard-step>
      <eui-wizard-step label="Review">
        <div><!-- step 3 content --></div>
      </eui-wizard-step>
    </eui-wizard>

### Programmatic Steps

Example :

    <eui-wizard [steps]="wizardSteps" [activeStepIndex]="currentStep">
    </eui-wizard>

Example :

    wizardSteps: EuiWizardStep[] = [
      { label: 'Step 1', id: 'step1' },
      { label: 'Step 2', id: 'step2' },
      { label: 'Step 3', id: 'step3' }
    ];
    currentStep = 1;

### Accessibility

- Use role="navigation" with aria-label describing the wizard
- Each step has clear labels and state indicators
- Keyboard navigation: Arrow keys to move between steps
- Current step is announced to screen readers

### Notes

- activeStepIndex is 1-based (first step is 1, not 0)
- Steps can be defined declaratively or programmatically
- Visual indicators show completed, current, and upcoming steps
- Supports both linear and non-linear navigation patterns

### Implements

`AfterContentInit` `OnChanges`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `EuiWizardService`
selector | `eui-wizard`
imports | `EUI_ICON`
templateUrl | `./eui-wizard.component.html`
styleUrl | `./eui-wizard.scss`

### Index

###### Properties

- canBeFocused
- childrenSteps
- stepContentId
- stepIds

###### Methods

- onKeyDown
- onSelectStep

###### Inputs

- activeStepIndex
- e2eAttr
- isCustomContent
- isNavigationAllowed
- isShowStepTitle
- steps
- tabindex

###### Outputs

- selectStep

### Inputs

activeStepIndex
Type : `number`
Index of the currently active step (1-based). When set, activates the corresponding step in the wizard. Used for programmatic step control.

e2eAttr
Type : `string`
Default value : `'eui-wizard'`
Data attribute used for end-to-end testing identification.

isCustomContent
Type : `boolean`
Default value : `false`
Enables custom content mode where step content is managed externally. When true, wizard only displays step indicators without content areas.

isNavigationAllowed
Type : `boolean`
Default value : `true`
Enables or disables step navigation. When false, prevents users from clicking steps or using keyboard navigation. Useful for enforcing sequential completion.

isShowStepTitle
Type : `boolean`
Default value : `false`
Displays step titles below step indicators. Provides additional context for each step in the wizard.

steps
Type : `Array<EuiWizardStep>`
Default value : `[]`
Array of wizard step configurations. Can be used instead of or in addition to content children steps. Each step should conform to EuiWizardStep interface.

tabindex
Type : `number`
Default value : `0`
Tab index value for keyboard navigation focus management. Controls whether wizard is included in tab order.

### Outputs

selectStep
Type : `EventEmitter<EuiWizardStep>`
Emitted when a step is selected or activated. Payload: EuiWizardStep object representing the newly active step. Triggers on user click, keyboard navigation, or programmatic selection.

### Methods

onKeyDown
`onKeyDown(event: KeyboardEvent)`

Parameters :

Name | Type | Optional
event | `KeyboardEvent` | No

Returns : `void`

onSelectStep
`onSelectStep(step: EuiWizardStep, index: number)`

Parameters :

Name | Type | Optional
step | `EuiWizardStep` | No
index | `number` | No

Returns : `void`

### Properties

canBeFocused
Type : `QueryList<ElementRef>`
Decorators : `@ViewChildren('canBeFocused')`

childrenSteps
Type : `QueryList<EuiWizardStepComponent>`
Decorators : `@ContentChildren(EuiWizardStepComponent)`

stepContentId
Type : `string`
Default value : `uniqueId()`

stepIds
Type : `string`

# results matching ""

# No results matching ""