Stepper
CStepper is a component that guides users through a multi-step process.
Horizontal
Use CStepList with CStep components for the step headers, and CStepPanels with CStepPanel for the content areas. The value property links each Step to its corresponding StepPanel. The activateCallback from the StepPanel's default slot enables navigation between steps.
Design Phase
Create wireframes, mockups, and design specifications for the project.
vue
<template>
<CStepper value="1">
<CStepList>
<CStep value="1">Design</CStep>
<CStep value="2">Development</CStep>
<CStep value="3">QA</CStep>
</CStepList>
<CStepPanels>
<CStepPanel v-slot="{ activateCallback }" value="1">
<div class="flex flex-col gap-4 pt-4">
<div class="text-lg font-medium">Design Phase</div>
<p>Create wireframes, mockups, and design specifications for the project.</p>
</div>
<div class="flex pt-6 justify-end">
<CButton label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</CStepPanel>
<CStepPanel v-slot="{ activateCallback }" value="2">
<div class="flex flex-col gap-4 pt-4">
<div class="text-lg font-medium">Development Phase</div>
<p>Implement the designs using the chosen technology stack and frameworks.</p>
</div>
<div class="flex pt-6 justify-between">
<CButton label="Back" severity="neutral" icon="pi pi-arrow-left" @click="activateCallback('1')" />
<CButton label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
</div>
</CStepPanel>
<CStepPanel v-slot="{ activateCallback }" value="3">
<div class="flex flex-col gap-4 pt-4">
<div class="text-lg font-medium">QA Phase</div>
<p>Run tests, fix bugs, and ensure quality standards are met before release.</p>
</div>
<div class="flex pt-6 justify-start">
<CButton label="Back" severity="neutral" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</CStepPanel>
</CStepPanels>
</CStepper>
</template>Vertical
Use CStepItem to wrap CStep and CStepPanel together for a vertical layout.
Design Phase
Create wireframes, mockups, and design specifications for the project.
vue
<template>
<CStepper value="1">
<CStepItem value="1">
<CStep>Design</CStep>
<CStepPanel v-slot="{ activateCallback }">
<div class="flex flex-col gap-4 pl-8">
<div class="text-lg font-medium">Design Phase</div>
<p>Create wireframes, mockups, and design specifications for the project.</p>
<div class="flex">
<CButton label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</div>
</CStepPanel>
</CStepItem>
<CStepItem value="2">
<CStep>Development</CStep>
<CStepPanel v-slot="{ activateCallback }">
<div class="flex flex-col gap-4 pl-8">
<div class="text-lg font-medium">Development Phase</div>
<p>Implement the designs using the chosen technology stack and frameworks.</p>
<div class="flex gap-2">
<CButton label="Back" severity="neutral" icon="pi pi-arrow-left" @click="activateCallback('1')" />
<CButton label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
</div>
</div>
</CStepPanel>
</CStepItem>
<CStepItem value="3">
<CStep>QA</CStep>
<CStepPanel v-slot="{ activateCallback }">
<div class="flex flex-col gap-4 pl-8">
<div class="text-lg font-medium">QA Phase</div>
<p>Run tests, fix bugs, and ensure quality standards are met before release.</p>
<div class="flex">
<CButton label="Back" severity="neutral" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</div>
</CStepPanel>
</CStepItem>
</CStepper>
</template>Linear
Setting the linear property enforces sequential step progression. Users must complete each step before moving to the next.
Design Phase
Create wireframes, mockups, and design specifications for the project.
vue
<template>
<CStepper value="1" linear>
<CStepList>
<CStep value="1">Design</CStep>
<CStep value="2">Development</CStep>
<CStep value="3">QA</CStep>
</CStepList>
<CStepPanels>
<CStepPanel v-slot="{ activateCallback }" value="1">
<div class="flex flex-col gap-4 pt-4">
<div class="text-lg font-medium">Design Phase</div>
<p>Create wireframes, mockups, and design specifications for the project.</p>
</div>
<div class="flex pt-6 justify-end">
<CButton label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</CStepPanel>
<CStepPanel v-slot="{ activateCallback }" value="2">
<div class="flex flex-col gap-4 pt-4">
<div class="text-lg font-medium">Development Phase</div>
<p>Implement the designs using the chosen technology stack and frameworks.</p>
</div>
<div class="flex pt-6 justify-between">
<CButton label="Back" severity="neutral" icon="pi pi-arrow-left" @click="activateCallback('1')" />
<CButton label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
</div>
</CStepPanel>
<CStepPanel v-slot="{ activateCallback }" value="3">
<div class="flex flex-col gap-4 pt-4">
<div class="text-lg font-medium">QA Phase</div>
<p>Run tests, fix bugs, and ensure quality standards are met before release.</p>
</div>
<div class="flex pt-6 justify-start">
<CButton label="Back" severity="neutral" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</CStepPanel>
</CStepPanels>
</CStepper>
</template>TIP
With linear mode, clicking on step headers for unvisited steps is disabled. Steps must be completed in order using the navigation buttons.
Steps Only
Use CStepList with CStep components without panels to create a standalone progress indicator.
vue
<template>
<CStepper v-model:value="activeStep">
<CStepList>
<CStep value="1">Design</CStep>
<CStep value="2">Development</CStep>
<CStep value="3">QA</CStep>
</CStepList>
</CStepper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const activeStep = ref('1');
</script>