V3 has reached EOL, Upgrade to PrimeVue 4

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.

name	type	default	description
id	string	null	Unique identifier of the element.
model	MenuItem[]	null	An array of menuitems.
readonly	boolean	true	Whether the items are clickable or not.
exact	boolean	true	Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
activeStep	number	0	Active step index of menuitem.
pt	PassThrough<StepsPassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	type	default	description
instance	any	null	Defines instance.
props	StepsProps	null	Defines valid properties.
context	StepsContext	null	Defines current options.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	StepsPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
menu	StepsPassThroughOptionType	null	Used to pass attributes to the list's DOM element.
menuitem	StepsPassThroughOptionType	null	Used to pass attributes to the list item's DOM element.
action	StepsPassThroughOptionType	null	Used to pass attributes to the action's DOM element.
step	StepsPassThroughOptionType	null	Used to pass attributes to the step's DOM element.
label	StepsPassThroughOptionType	null	Used to pass attributes to the label's DOM element.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

name	type	default	description
item	any	null	Current menuitem
index	number	null	Index of the menuitem.
active	boolean	false	Current active state of menuitem as a boolean.
disabled	boolean	false	Current disabled state of menuitem as a boolean.

name	type	description
originalEvent	Event	Browser event.
item	MenuItem	Menuitem instance.
[key: string]	any

Steps

Import #

Basic #

Controlled #

Linear #

Template #

Accessibility #

Screen Reader

Keyboard Support

Steps API

Steps #

Props #

Slots #

Interfaces #

StepsPassThroughMethodOptions #

StepsPassThroughOptions #

StepsPassThroughAttributes #

StepsContext #

Types #

StepsPassThroughOptionType #

MenuItem #

Events #

MenuItemCommandEvent #

Options #

name	type	default	description
label	string \| Function	null	Property name or getter function to use as the label of an item.
icon	string	null	Icon of the item.
command	Function	null
url	string	null	External link to navigate when item is clicked.
items	MenuItem[]	null	An array of children menuitems.
disabled	boolean \| Function	false	A boolean or a function to return a boolean to specify if the item is disabled.
visible	boolean \| Function	true	A boolean or a function to return a boolean to specify if the item is visible.
target	string	null	Specifies where to open the linked document.
separator	boolean	false	Defines the item as a separator.
style	any	null	Inline style of the menuitem.
class	any	null	Style class of the menuitem.
key	string	null	Unique identifier of an item.
[key: string]	any	null