Steps

Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.

Import #


import { StepsModule } from 'primeng/steps';

Basic #

Steps requires a collection of menuitems as its model.


<p-steps [model]="items" [readonly]="true" />

Controlled #

Steps can be controlled programmatically using activeIndex property.


<div class="flex mb-5 gap-2 justify-content-end">
    <p-button 
        (onClick)="active = 0" 
        [rounded]="true" 
        label="1" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="active !== 0" />
    <p-button 
        (onClick)="active = 1" 
        [rounded]="true"
        label="2" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="active !== 1" />
    <p-button 
        (onClick)="active = 2" 
        [rounded]="true" 
        label="3" 
        styleClass="w-2rem h-2rem p-0" 
        [outlined]="active !== 2" />
</div>
<p-steps [activeIndex]="active" [model]="items" />

Interactive #

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)" />

Routing #

Example below uses nested routes with Steps.

Payment Information
Enter your card details 

<div class="card">
    <p-toast />
    <p-steps [model]="items" [readonly]="false" />
</div>
<router-outlet></router-outlet>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-stepsContainer element.
p-steps-itemMenuitem element.
p-steps-numberNumber of menuitem.
p-steps-titleLabel of menuitem.

Accessibility #

Screen Reader

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".

Keyboard Support

KeyFunction
tabAdds 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.
enterActivates the focused step if readonly is not enabled.
spaceActivates the focused step if readonly is not enabled.
right arrowMoves focus to the next step if readonly is not enabled.
left arrowMoves focus to the previous step if readonly is not enabled.
homeMoves focus to the first step if readonly is not enabled.
endMoves focus to the last step if readonly is not enabled.
PrimeNG 17.18.12 by PrimeTek