Stepper

A multi-step progress indicator.

Account
2 Profile
3 Done

import { BuiStepper, BuiStepperItem } from 'ng-blatui';

<bui-stepper [value]="2">
  <li buiStepperItem [step]="1">Account</li>
  <li buiStepperItem [step]="2">Profile</li>
  <li buiStepperItem [step]="3">Done</li>
</bui-stepper>

Vertical

Account details
2 Company info
3 Review

<bui-stepper [value]="2" orientation="vertical">
  <li buiStepperItem [step]="1">Account details</li>
  <li buiStepperItem [step]="2">Company info</li>
</bui-stepper>

With labels

Cart
Shipping
3 Payment
4 Confirm

<bui-stepper [value]="3">
  <li buiStepperItem [step]="1">Cart</li>
  <li buiStepperItem [step]="2">Shipping</li>
  <li buiStepperItem [step]="3">Payment</li>
  <li buiStepperItem [step]="4">Confirm</li>
</bui-stepper>

With description

AccountYour login details
2 ProfileTell us about you
3 DoneReview and finish

<li buiStepperItem [step]="1">
  <span class="font-medium">Account</span>
  <span class="block text-xs font-normal text-muted-foreground">Your login details</span>
</li>

API reference

bui-stepper

Inputs

Prop	Type	Default	Description
`value`	`number`	`1`	The active step as a 1-based index; items at lower values are marked completed.
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	Layout direction of the steps, horizontal or vertical.

li[buiStepperItem]

Inputs

Prop	Type	Default	Description
`step`	`number`	`1`	This item's 1-based position; compared against the parent's value to derive its state.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.