Component

Stepper

A step-by-step progress indicator. Declare steps with titles, descriptions, and icons, render per-step content, bind the active step, move between steps, enforce a linear flow, and lay it out horizontally or vertically.

Steps & content

Enter the title and city.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbButtonComponent, HbStepperImports, type HbStepValue } from '@herbst/ui';

@Component({
  selector: 'hb-demo-stepper-basic',
  imports: [HbStepperImports, HbButtonComponent],
  template: `
    <hb-stepper class="w-full max-w-lg" [(hbValue)]="active">
      <hb-step hbTitle="Details" hbDescription="Photo info">
        <ng-template hbStepContent let-ctx>
          <div class="rounded-md border border-border p-4">
            <p class="text-sm text-muted-foreground">Enter the title and city.</p>
            <div class="mt-3 flex justify-end">
              <button hb-button hbSize="sm" (click)="ctx.next()">Next</button>
            </div>
          </div>
        </ng-template>
      </hb-step>

      <hb-step hbTitle="Photos" hbDescription="Upload">
        <ng-template hbStepContent let-ctx>
          <div class="rounded-md border border-border p-4">
            <p class="text-sm text-muted-foreground">Attach your autumn photos.</p>
            <div class="mt-3 flex justify-between">
              <button hb-button hbType="outline" hbSize="sm" (click)="ctx.prev()">Back</button>
              <button hb-button hbSize="sm" (click)="ctx.next()">Next</button>
            </div>
          </div>
        </ng-template>
      </hb-step>

      <hb-step hbTitle="Review" hbDescription="Confirm">
        <ng-template hbStepContent let-ctx>
          <div class="rounded-md border border-border p-4">
            <p class="text-sm text-muted-foreground">Everything looks good — save the record.</p>
            <div class="mt-3 flex justify-start">
              <button hb-button hbType="outline" hbSize="sm" (click)="ctx.prev()">Back</button>
            </div>
          </div>
        </ng-template>
      </hb-step>
    </hb-stepper>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoStepperBasicComponent {
  protected readonly active = signal<HbStepValue>(1);
}

Linear, icons & external nav

Vertical & disabled

Take photos of the falling leaves.

API reference

hb-stepper

Property	Description	Type	Default
[(hbValue)]	The active step value (defaults to each step’s index+1), two-way bound.	number \| string	1
[hbOrientation]	Lay the steps out in a row (content below) or a column (content inline).	'horizontal' \| 'vertical'	'horizontal'
[hbLinear]	Only allow moving to the current or earlier steps; future steps are not clickable.	boolean	false
exportAs "hbStepper"	Reference the instance to call next(), prev(), activate(value), and read isFirst(), isLast(), activeIndex().	methods / signals	—

hb-step

Property	Description	Type	Default
[hbTitle] / [hbDescription]	The step label and its supporting text.	string	''
[hbValue]	The value this step activates (defaults to its index+1).	number \| string	index + 1
[hbIcon] / [hbDisabled]	A marker icon (a check shows automatically once completed), and a disabled state.	string / boolean	— / false
ng-template[hbStepContent]	The panel for this step. Context: $implicit = { active, index, isFirst, isLast, next(), prev(), activate() }.	template	—