eui documentation
  1. Components
  2. EuiWizardComponent

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
Methods
Inputs
Outputs

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