Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.
import { StepsModule } from 'primeng/steps';
Steps requires a collection of menuitems as its model.
<p-steps [model]="items" [readonly]="true" />
Steps can be controlled programmatically using activeIndex property.
<div class="flex mb-8 gap-2 justify-end">
<p-button (click)="active = 0" [rounded]="true" label="1" styleClass="w-8 h-8 p-0" [outlined]="active !== 0" />
<p-button (click)="active = 1" [rounded]="true" label="2" styleClass="w-8 h-8 p-0" [outlined]="active !== 1" />
<p-button (click)="active = 2" [rounded]="true" label="3" styleClass="w-8 h-8 p-0" [outlined]="active !== 2" />
</div>
<p-steps [activeIndex]="active" [model]="items" />
In order to add interactivity to the component, disable readonly and use a binding to activeIndex along with activeIndexChange to control the Steps.
<p-toast />
<p-steps [model]="items" [readonly]="false" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)" />
Example below uses nested routes with Steps.
<div class="card">
<p-toast />
<p-steps [model]="items" [readonly]="false" />
</div>
<router-outlet></router-outlet>
Steps component uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the current step item defines aria-current as "step".
| Key | Function |
|---|---|
| tab | Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. |
| enter | Activates the focused step if readonly is not enabled. |
| space | Activates the focused step if readonly is not enabled. |
| right arrow | Moves focus to the next step if readonly is not enabled. |
| left arrow | Moves focus to the previous step if readonly is not enabled. |
| home | Moves focus to the first step if readonly is not enabled. |
| end | Moves focus to the last step if readonly is not enabled. |