Stepper

New

Turn a complex workflow into a few clear, manageable steps.

Horizontal & verticalLinear flowKeyboard accessible

Horizontal

Select a step or use Next and Back to explore the workflow.

STEP 01

Start with a clear direction

Define your goals and decide what success looks like.

Active step: 1 of 3

Vertical

Keep the steps and their content together in a compact, stacked layout.

Start with a clear direction

Define your goals and decide what success looks like.

Linear with validation

Complete the required field to continue. Step headers stay locked; the application validates each transition.

Your name

Usage and API

Import AvStepper, AvStepList, AvStep, AvStepPanels and AvStepPanel from avero-ui. For vertical layouts, wrap each step and panel in AvStepItem.

HTML

<av-stepper inputId="setup" [(value)]="active" linear>
  <av-step-list>
    <av-step [value]="1">Account</av-step>
    <av-step [value]="2">Review</av-step>
  </av-step-list>
  <av-step-panels>
    <av-step-panel [value]="1">
      <ng-template #content let-next="activateCallback">
        <p>Account details</p>
        <button avButton (click)="next(2)">Next</button>
      </ng-template>
    </av-step-panel>
    <av-step-panel [value]="2">
      <ng-template #content let-next="activateCallback">
        <p>Review your account</p>
        <button avButton (click)="next(1)">Back</button>
      </ng-template>
    </av-step-panel>
  </av-step-panels>
</av-stepper>

State. Set a unique inputId and an initial value. Bind [(value)] for controlled state. Each step needs a unique string or number; its panel uses the same value. Vertical children inherit value from AvStepItem.

Navigation. linear locks inactive headers. Use the panel template's activateCallback or the stepper's activate(value) after your validation succeeds. disabled on the stepper, step or step item blocks user navigation. External value updates remain possible.

Content. An optional ng-template #content is created on first activation and preserved when hidden, keeping form drafts intact. Its context includes activateCallback, value and active. Plain projected content is created immediately.

Accessibility. Horizontal headers use tabs and vertical headers use expandable buttons. Arrow keys move focus, Home/End jump to the first/last available step, and Enter/Space activate. Keep custom header content presentational.