Vue Stepper - Overview

The DevExtreme Stepper allows you to indicate progress within a multi-step process and allows users to navigate between individual steps. Use our Stepper UI component to implement multi-page navigation in lengthy forms such as store/cart checkout.

To get started with DevExtreme Stepper, refer to the following step-by-step tutorial: Getting Started with Stepper.

Backend API

<template> <div class="stepper-demo"> <div class="widget-container"> <div :class="['widget-wrapper', 'widget-wrapper-' + orientation]"> <div v-for="config in stepperConfigs" :key="config.id" class="stepper-wrapper" > <div :id="config.labelId" class="stepper-label" > {{ config.title }} </div> <DxStepper :id="config.id" :element-attr="{ 'aria-labelledby': config.labelId }" :selected-index="2" :orientation="orientation" :linear="navigationMode" :select-on-focus="selectOnFocus" :rtl-enabled="rtlMode" > <DxItem v-for="(step, index) in steps" :key="index" v-bind="getItemProps(step, config.fields)" /> </DxStepper> </div> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div>Orientation</div> <DxButtonGroup id="orientation" key-expr="value" :items="orientations" :selected-item-keys="[orientation]" @item-click="onOrientationClick" /> </div> <div class="option"> <div>Navigation Mode</div> <DxButtonGroup id="navigationMode" key-expr="value" :items="navigationModes" :selected-item-keys="[navigationMode]" @item-click="onNavigationModeClick" /> </div> <div class="option-separator"/> <div class="option"> <DxCheckBox id="selectOnFocus" text="Select step on focus" v-model:value="selectOnFocus" /> </div> <div class="option"> <DxCheckBox id="rtlMode" text="Right-to-left mode" v-model:value="rtlMode" /> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxStepper, DxItem } from 'devextreme-vue/stepper'; import { DxButtonGroup, type DxButtonGroupTypes } from 'devextreme-vue/button-group'; import { DxCheckBox } from 'devextreme-vue/check-box'; import { steps, orientations, navigationModes, type Step } from './data.ts'; type Fields = Array<keyof Step>; const orientation = ref(orientations[0].value); const navigationMode = ref(navigationModes[0].value); const selectOnFocus = ref(true); const rtlMode = ref(false); function onOrientationClick(e: DxButtonGroupTypes.ItemClickEvent) { orientation.value = e.itemData.value; } function onNavigationModeClick(e: DxButtonGroupTypes.ItemClickEvent) { navigationMode.value = e.itemData.value; } const stepperConfigs = [ { id: 'icons', labelId: 'iconsLabel', title: 'Icons and Labels', fields: ['label', 'icon', 'optional'] as Fields, }, { id: 'numbers', labelId: 'numbersLabel', title: 'Numbers and Labels', fields: ['label', 'optional'] as Fields, }, { id: 'customText', labelId: 'customTextLabel', title: 'Custom Text', fields: ['text'] as Fields, }, ]; function getItemProps(step: Step, fields: Fields) { return fields.reduce((acc, field) => { if (field in step) { acc[field] = step[field]; } return acc; }, {} as Record<string, unknown>); } </script> <style> #app { display: flex; flex-direction: column; } .stepper-demo { display: flex; height: 580px; gap: 20px; } .widget-container { display: flex; align-items: center; justify-content: center; width: calc(100% - 280px); min-width: 320px; overflow: clip; gap: 20px; } .widget-wrapper { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 80px; width: 100%; height: 100%; } .widget-wrapper-vertical { display: flex; flex-direction: row; justify-content: space-around; } .widget-wrapper-vertical .stepper-wrapper { width: auto; max-width: 33%; } .widget-wrapper-vertical .stepper-label { text-align: center; white-space: nowrap; } .widget-wrapper-vertical #customText { width: auto; } .dx-stepper-vertical { height: 400px; width: 100%; } .stepper-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; } .stepper-label { font-weight: 600; } .options { display: flex; flex-direction: column; flex-shrink: 0; width: 300px; box-sizing: border-box; padding: 20px; background-color: rgba(191, 191, 191, 0.15); gap: 16px; height: 100%; } .caption { font-weight: 500; font-size: 18px; } .option { display: flex; flex-direction: column; row-gap: 4px; } .option-separator { border-bottom: 1px solid var(--dx-color-border); } .dx-buttongroup .dx-button { width: 50%; } </style>

import { type Orientation } from "devextreme-vue/common"; export interface Step { text: string, label: string, icon: string, optional?: boolean, } export const steps: Step[] = [ { text: 'A', label: 'Cart', icon: 'cart', }, { text: 'B', label: 'Shipping Info', icon: 'clipboardtasklist', }, { text: 'C', label: 'Promo Code', icon: 'gift', optional: true, }, { text: 'D', label: 'Checkout', icon: 'packagebox', }, { text: 'E', label: 'Ordered', icon: 'checkmarkcircle', }, ]; export const orientations: { text: string; value: Orientation }[] = [ { text: 'Horizontal', value: 'horizontal' }, { text: 'Vertical', value: 'vertical' }, ]; export const navigationModes = [ { text: 'Non-linear', value: false }, { text: 'Linear', value: true }, ];

import { createApp } from 'vue'; import themes from 'devextreme/ui/themes'; import App from './App.vue'; themes.initialized(() => createApp(App).mount('#app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

Component Configuration

The following settings are available to you:

orientation (default: horizontal)
Stepper orientation (horizontal or vertical).
linear (default: true)
Specifies whether users must navigate the Stepper sequentially or can skip steps.
selectOnFocus (default: true)
Specifies whether steps focused with keyboard navigation are selected automatically.
rtlEnabled (default: false)
Switches the Stepper to Right-to-Left mode.

Step Settings

To add steps, populate the items collection or specify a dataSource.

Use the following properties to customize steps:

text
Indicator text. If you do not define this option, Stepper numbers steps sequentially.
icon
Indicator icon. Stepper prioritizes icons over the text property.
label
Step caption displayed next to the indicator.
optional
Adds an (Optional) label to the step.
isValid
Allows you to indicate step-related validation errors.
disabled
Deactivates the step.
hint
Tooltip text for the step.
template
Allows you to customize step-related appearance. This property overrides all other step settings.