Stepper
The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.
Import #
import Stepper from 'primevue/stepper';
import StepperPanel from 'primevue/stepperpanel';
Basic #
Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead prevCallback and nextCallback events should be bound to your custom UI elements.
Content I
<Stepper>
<StepperPanel header="Header I">
<template #content="{ nextCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
</div>
<div class="flex pt-4 justify-content-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel header="Header II">
<template #content="{ prevCallback, nextCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
</div>
<div class="flex pt-4 justify-content-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel header="Header III">
<template #content="{ prevCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
</div>
<div class="flex pt-4 justify-content-start">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
</div>
</template>
</StepperPanel>
</Stepper>
Vertical #
Layout of the Stepper is configured with the orientation property that accepts horizontal and vertical as available options.
Content I
<Stepper orientation="vertical">
<StepperPanel header="Header I">
<template #content="{ nextCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
</div>
<div class="flex py-4">
<Button label="Next" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel header="Header II">
<template #content="{ prevCallback, nextCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
</div>
<div class="flex py-4 gap-2">
<Button label="Back" severity="secondary" @click="prevCallback" />
<Button label="Next" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel header="Header III">
<template #content="{ prevCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
</div>
<div class="flex py-4">
<Button label="Back" severity="secondary" @click="prevCallback" />
</div>
</template>
</StepperPanel>
</Stepper>
Linear #
When linear property is present, current step must be completed in order to move to the next step.
Content I
<Stepper linear>
<StepperPanel header="Header I">
<template #content="{ nextCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
</div>
<div class="flex pt-4 justify-content-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel header="Header II">
<template #content="{ prevCallback, nextCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
</div>
<div class="flex pt-4 justify-content-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel header="Header III">
<template #content="{ prevCallback }">
<div class="flex flex-column h-12rem">
<div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
</div>
<div class="flex pt-4 justify-content-start">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
</div>
</template>
</StepperPanel>
</Stepper>
Template #
Stepper provides various templating options to customize the default UI design.
Create your account
<Stepper v-model:activeStep="active">
<StepperPanel>
<template #header="{ index, clickCallback }">
<button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
<i class="pi pi-user" />
</span>
</button>
</template>
<template #content="{ nextCallback }">
<div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
<div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
<div class="field p-fluid">
<IconField>
<InputIcon>
<i class="pi pi-user" />
</InputIcon>
<InputText id="input" v-model="name" type="text" placeholder="Name" />
</IconField>
</div>
<div class="field p-fluid">
<IconField>
<InputIcon>
<i class="pi pi-envelope" />
</InputIcon>
<InputText id="email" v-model="email" type="email" placeholder="Email" />
</IconField>
</div>
<div class="field p-fluid">
<Password v-model="password" toggleMask placeholder="Password" />
</div>
</div>
<div class="flex pt-4 justify-content-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel>
<template #header="{ index, clickCallback }">
<button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
<i class="pi pi-star" />
</span>
</button>
</template>
<template #content="{ prevCallback, nextCallback }">
<div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
<div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
<div class="flex flex-wrap justify-content-center gap-3">
<ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
<ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
<ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
<ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
<ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
<ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
<ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
<ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
<ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
<ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
</div>
</div>
<div class="flex pt-4 justify-content-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
</div>
</template>
</StepperPanel>
<StepperPanel>
<template #header="{ index, clickCallback }">
<button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
<span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
<i class="pi pi-id-card" />
</span>
</button>
</template>
<template #content="{ prevCallback }">
<div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
<div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
<div class="text-center">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
</div>
</div>
<div class="flex pt-4 justify-content-start">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
</div>
</template>
</StepperPanel>
</Stepper>
Accessibility #
Screen Reader
Stepper container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Stepper. Each stepper header has a tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and aria-labelledby reference to the header as the accessible name.
Tab Header Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through the header. |
| enter | Activates the focused stepper header. |
| space | Activates the focused stepper header. |