# EuiWizardComponent

**Type:** component



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
```html
<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
```html
<eui-wizard [steps]="wizardSteps" [activeStepIndex]="currentStep">
</eui-wizard>
```

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


**Selector:** `eui-wizard`

## Inputs
- **activeStepIndex**: `number` - Index of the currently active step (1-based). When set, activates the corresponding step in the wizard. Used for programmatic step control.
- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification.
- **isCustomContent**: `boolean` - Enables custom content mode where step content is managed externally. When true, wizard only displays step indicators without content areas.
- **isNavigationAllowed**: `boolean` - Enables or disables step navigation. When false, prevents users from clicking steps or using keyboard navigation. Useful for enforcing sequential completion.
- **isShowStepTitle**: `boolean` - Displays step titles below step indicators. Provides additional context for each step in the wizard.
- **steps**: `Array<EuiWizardStep>` - 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**: `number` - Tab index value for keyboard navigation focus management. Controls whether wizard is included in tab order.

## Outputs
- **selectStep**: `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.