Steps also known as Stepper, is an indicator for the steps in a workflow.
import Steps from 'primevue/steps';
Steps requires a collection of menuitems as its model.
<Steps :model="items" />
Steps can be controlled programmatically using activeStep property.
<div class="flex mb-2 gap-2 justify-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" />
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" />
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. |