DevExtreme v25.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Stepper - Overview

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

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

Backend API
$(() => { const stepperWithIcons = $('#icons').dxStepper({ linear: navigationModes[0].value, elementAttr: { 'aria-labelledby': 'iconsLabel' }, selectedIndex: 2, dataSource, }).dxStepper('instance'); const stepperWithNumbers = $('#numbers').dxStepper({ linear: navigationModes[0].value, elementAttr: { 'aria-labelledby': 'numbersLabel' }, selectedIndex: 2, dataSource: dataSource.map(({ icon, text, ...rest }) => rest), }).dxStepper('instance'); const stepperWithCustomText = $('#customText').dxStepper({ linear: navigationModes[0].value, elementAttr: { 'aria-labelledby': 'customTextLabel' }, selectedIndex: 2, dataSource: dataSource.map(({ icon, label, optional, ...rest }) => rest), }).dxStepper('instance'); $('#orientation').dxButtonGroup({ width: '100%', items: orientations, selectedItems: [orientations[0]], onSelectionChanged(data) { const $widgetWrapper = $('.widget-wrapper'); const { text, value } = data.addedItems[0]; const isVertical = text === 'Vertical'; $widgetWrapper.toggleClass('widget-wrapper-vertical', isVertical); $widgetWrapper.toggleClass('widget-wrapper-horizontal', !isVertical); setOption('orientation', value); }, }); $('#navigationMode').dxButtonGroup({ width: '100%', items: navigationModes, selectedItems: [navigationModes[0]], onSelectionChanged(data) { setOption('linear', data.addedItems[0].value); }, }); $('#selectOnFocus').dxCheckBox({ text: 'Select step on focus', value: true, onValueChanged(data) { setOption('selectOnFocus', data.value); }, }); $('#rtlMode').dxCheckBox({ text: 'Right-to-left mode', value: false, onValueChanged(data) { setOption('rtlEnabled', data.value); }, }); function setOption(option, value) { stepperWithIcons.option(option, value); stepperWithNumbers.option(option, value); stepperWithCustomText.option(option, value); } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="stepper-demo"> <div class="widget-container"> <div class="widget-wrapper widget-wrapper-horizontal"> <div class="stepper-wrapper"> <div id="iconsLabel" class="stepper-label">Icons and Labels</div> <div id="icons"></div> </div> <div class="stepper-wrapper"> <div id="numbersLabel" class="stepper-label">Numbers and Labels</div> <div id="numbers"> </div> </div> <div class="stepper-wrapper"> <div id="customTextLabel" class="stepper-label">Custom Text</div> <div id="customText"></div> </div> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div>Orientation</div> <div id="orientation"></div> </div> <div class="option"> <div>Navigation Mode</div> <div id="navigationMode"></div> </div> <div class="option-separator"></div> <div class="option"> <div id="selectOnFocus"></div> </div> <div class="option"> <div id="rtlMode"></div> </div> </div> </div> </div> </body> </html>
.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; } .widget-wrapper { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 80px; width: 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; } .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%; }
const dataSource = [ { 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', }, ]; const orientations = [ { text: 'Horizontal', value: 'horizontal' }, { text: 'Vertical', value: 'vertical' }, ]; const navigationModes = [ { text: 'Non-linear', value: false }, { text: 'Linear', value: true }, ];

Component Configuration

The following settings are available to you:

  • orientation (default: horizontal)
    JavaScript Stepper orientation (horizontal or vertical).

  • linear (default: true)
    Specifies whether users must navigate the JavaScript Stepper sequentially or can skip steps.

  • selectOnFocus (default: true)
    Specifies whether steps focused with keyboard navigation are selected automatically.

  • rtlEnabled (default: false)
    Switches the JavaScript 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, JavaScript Stepper numbers steps sequentially.

  • icon
    Indicator icon. JavaScript 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.