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 - Step Template

JavaScript Stepper allows you to customize steps using the DevExtreme template engine. You can set custom markup for indicators including custom step shapes.

This demo uses the itemTemplate property to customize all steps in a JavaScript Stepper. For individual step customization, specify the items[].template property.

Backend API
$(() => { $('#customStepShape').dxStepper({ selectedIndex: 2, dataSource, linear: false, elementAttr: { 'aria-labelledby': 'label-customStepShape' }, itemTemplate(data) { return `<div class="dx-step-indicator"> <i class="dx-icon dx-icon-${data.icon}"></i> </div> <div class="dx-step-caption"> <div class="dx-step-label">${data.label}</div> ${data.optional ? '<div class="dx-step-optional-mark">(Optional)</div>' : ''} </div>`; }, }); $('#labelOnly').dxStepper({ selectedIndex: 2, dataSource, linear: false, elementAttr: { 'aria-labelledby': 'label-labelOnly' }, itemTemplate(data) { return `<div class='dx-step-caption'> <div class='dx-step-label'>${data.label}</div> </div>`; }, }); $('#iconOnly').dxStepper({ selectedIndex: 2, dataSource, linear: false, elementAttr: { 'aria-labelledby': 'label-iconOnly' }, itemTemplate(data) { return `<i class="dx-icon dx-icon-${data.icon}"></i>`; }, }); });
<!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 id="label-customStepShape" class="stepper-label">Custom Step Shape</div> <div id="customStepShape"></div> <div id="label-labelOnly" class="stepper-label">Label Only</div> <div id="labelOnly"></div> <div id="label-iconOnly" class="stepper-label">Icon Only</div> <div id="iconOnly"></div> </div> </body> </html>
.demo-container { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 16px; height: 580px; min-width: 320px; } .stepper-label { font-weight: 600; } #customStepShape { margin-bottom: 64px; } #customStepShape .dx-step-indicator { border-radius: 4px; } #labelOnly { margin-bottom: 64px; align-items: center; } #labelOnly .dx-step { padding-inline: 2px; } #labelOnly .dx-step-content { padding-block: 4px; } #labelOnly .dx-step-caption { width: auto; max-width: 100%; } #labelOnly .dx-step-label { background-color: var(--dx-color-main-bg); padding-inline: 8px; } #labelOnly .dx-step.dx-state-focused .dx-step-caption { box-shadow: 0 0 0 2px var(--dx-color-main-bg), 0 0 0 4px var(--dx-color-primary), 0 0 0 8px var(--dx-color-main-bg); border-radius: 4px; } #iconOnly { align-items: center; } #iconOnly .dx-step-content { margin-block: 4px; } #iconOnly .dx-icon { box-sizing: content-box; padding: 6px; background-color: var(--dx-color-main-bg); } #iconOnly .dx-state-focused .dx-icon { box-shadow: 0 0 0 2px var(--dx-color-primary), 0 0 0 6px var(--dx-color-main-bg); border-radius: 4px; } #iconOnly :is(.dx-step-selected, .dx-step-completed) .dx-icon { color: var(--dx-color-primary); }
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', }];