Steps

Steps also known as Stepper, is an indicator for the steps in a workflow.

Import #


import Steps from 'primevue/steps';

Basic #

Steps requires a collection of menuitems as its model.


<Steps :model="items" />

Controlled #

Steps can be controlled programmatically using activeStep property.


<div class="flex mb-2 gap-2 justify-content-end">
    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
</div>
<Steps v-model:activeStep="active" :model="items" />

Linear #

Steps is linear by default to enforce completion of a previus step to proceed, set readonly as false for non-linear mode.


<Steps :model="items" :readonly="false" />

Template #

Steps offers item customization with the item template that receives the item instance from the model as a parameter.


<Steps :model="items" class="custom-steps" :readonly="false">
    <template #item="{ item, active }">
        <span :class="['inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer', { 'bg-primary': active, 'surface-overlay text-primary': !active }]">
            <i :class="[item.icon, 'text-xl']" />
        </span>
    </template>
</Steps>

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

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.