Steps
@xui/stepsA step / wizard progress indicator. Bind current to the active index; each step's status (finish / process / wait) is derived automatically, or overridden per step. clickable lets the user jump between steps.
Install
pnpm add @xui/steps Add the barrel to a standalone component's imports:
import { XuiStepsImports } from '@xui/steps';@Component({ imports: [XuiStepsImports], // …})Examples
Horizontal
Loading preview…
<div class="flex w-[640px] flex-col gap-6"> <xui-steps [(current)]="current" clickable> <xui-step title="Cart" description="Review items" /> <xui-step title="Payment" description="Card or PayPal" /> <xui-step title="Confirm" description="Place order" /> </xui-steps> <div class="flex gap-2"> <button xuiButton (click)="current = current - 1" [disabled]="current === 0">Back</button> <button xuiButton color="primary" (click)="current = current + 1" [disabled]="current === 2">Next</button> </div></div>With error
Loading preview…
<xui-steps [current]="1" class="w-[560px]"> <xui-step title="Uploaded" /> <xui-step title="Processing" status="error" description="Conversion failed" /> <xui-step title="Published" /></xui-steps>Vertical
Loading preview…
<xui-steps [current]="2" orientation="vertical" class="w-[320px]"> <xui-step title="Account created" description="2026-07-01" /> <xui-step title="Profile completed" description="2026-07-03" /> <xui-step title="First project" description="In progress" /> <xui-step title="Invite team" /></xui-steps>API
One step inside {@link XuiSteps}. title/description describe it; status overrides the status the parent would otherwise derive from current.
Inputs
titlestringThe step's name, shown beside its marker.''descriptionstringSupporting detail under the title.''statusXuiStepStatusForce a status instead of deriving it from the active step.A step / wizard progress indicator. Wrap <xui-step> entries and bind current (two-way) to the active index; each step's status is derived (finish before, process at, wait after) unless the step overrides it. With clickable, clicking a step moves current.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''currentnumberZero-based index of the active step. Everything before it reads as done, everything after as pending. Two-way bindable.0orientation'horizontal' | 'vertical'Run the steps across the page or down it.this.config.orientationclickablebooleanLet a step header jump to that step. Off by default, so the sequence stays under the host's control.this.config.clickable