Stepper

Steps of a process, such as a sign-up flow or checkout, laid out vertically or in a row.

Bootstrap’s stepper docs describe the markup and CSS.

Example

Bind the current step with [(step)], starting at 0. Steps up to and including it are marked done, and the current one gets aria-current="step". next() and previous() move between steps.

Create account
Confirm email
Update profile
Finish

<ol bsStepper #stepper="bsStepper" [(step)]="step" horizontal>
  <li bsStepperItem>Create account</li>
  <li bsStepperItem>Confirm email</li>
  <li bsStepperItem>Update profile</li>
  <li bsStepperItem>Finish</li>
</ol>
<div class="hstack gap-2 mt-3">
  <button type="button" bsButton="outline" theme="secondary" (click)="stepper.previous()">
    Back
  </button>
  <button type="button" bsButton theme="primary" (click)="stepper.next()">Next</button>
</div>

Vertical and responsive

Steppers are vertical by default. Set horizontal to a breakpoint to lay them out in a row from there up; the responsive variants use container queries, so wrap the stepper in .contains-inline.

Create account
Confirm email
Update profile

HTML

<div class="contains-inline">
  <ol bsStepper [step]="1" horizontal="md">
    <li bsStepperItem>Create account</li>
    <li bsStepperItem>Confirm email</li>
    <li bsStepperItem>Update profile</li>
  </ol>
</div>

Themes

Set theme on a step to color it.

Create account
Confirm email
Update profile
Payment failed

HTML

<ol bsStepper [step]="3" horizontal>
  <li bsStepperItem theme="accent">Create account</li>
  <li bsStepperItem theme="success">Confirm email</li>
  <li bsStepperItem theme="success">Update profile</li>
  <li bsStepperItem theme="danger">Payment failed</li>
</ol>

API

BsStepper

Selector: [bsStepper] · Exported as: bsStepper

Inputs

Name	Type	Default	Description
`step`	`number`	`0`	Index of the current step. Supports [(step)].
`horizontal`	`boolean \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`false`	Lays the steps out in a row, from a breakpoint up.

Outputs

Name	Type	Description
`stepChange`	`number`	Emits the new step.

Methods

Name	Type	Description
`next()`	`void`	Goes to the next step.
`previous()`	`void`	Goes to the previous step.
`count`	`Signal<number>`	Number of steps.

BsStepperItem

Selector: [bsStepperItem]

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of the step.