React Stepper - Step Template

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 itemRender property to customize all steps in a Stepper. For individual step customization, you will need to specify one of the following properties: items[].render or component properties.

TS JS

Backend API

import React from 'react'; import Stepper from 'devextreme-react/stepper'; import { steps } from './data.ts'; import CustomStepShape from './CustomStepShape.tsx'; import LabelOnly from './LabelOnly.tsx'; import IconOnly from './IconOnly.tsx'; export default function App() { return ( <> <div id="label-customStepShape" className="stepper-label">Custom Step Shape</div> <Stepper id="customStepShape" elementAttr={{ 'aria-labelledby': 'label-customStepShape' }} dataSource={steps} defaultSelectedIndex={2} linear={false} itemRender={CustomStepShape} /> <div id="label-labelOnly" className="stepper-label">Label Only</div> <Stepper id="labelOnly" elementAttr={{ 'aria-labelledby': 'label-labelOnly' }} dataSource={steps} defaultSelectedIndex={2} linear={false} itemRender={LabelOnly} /> <div id="label-iconOnly" className="stepper-label">Icon Only</div> <Stepper id="iconOnly" elementAttr={{ 'aria-labelledby': 'label-iconOnly' }} dataSource={steps} defaultSelectedIndex={2} linear={false} itemRender={IconOnly} /> </> ); }

import React from 'react'; import Stepper from 'devextreme-react/stepper'; import { steps } from './data.js'; import CustomStepShape from './CustomStepShape.js'; import LabelOnly from './LabelOnly.js'; import IconOnly from './IconOnly.js'; export default function App() { return ( <> <div id="label-customStepShape" className="stepper-label" > Custom Step Shape </div> <Stepper id="customStepShape" elementAttr={{ 'aria-labelledby': 'label-customStepShape' }} dataSource={steps} defaultSelectedIndex={2} linear={false} itemRender={CustomStepShape} /> <div id="label-labelOnly" className="stepper-label" > Label Only </div> <Stepper id="labelOnly" elementAttr={{ 'aria-labelledby': 'label-labelOnly' }} dataSource={steps} defaultSelectedIndex={2} linear={false} itemRender={LabelOnly} /> <div id="label-iconOnly" className="stepper-label" > Icon Only </div> <Stepper id="iconOnly" elementAttr={{ 'aria-labelledby': 'label-iconOnly' }} dataSource={steps} defaultSelectedIndex={2} linear={false} itemRender={IconOnly} /> </> ); }

import React from 'react'; import { type StepperTypes } from 'devextreme-react/stepper'; export default function CustomStepShape(data: StepperTypes.Item) { const { icon, label, optional } = data; return ( <> <div className="dx-step-indicator"> <i className={`dx-icon dx-icon-${icon}`}></i> </div> <div className="dx-step-caption"> <div className="dx-step-label">{label}</div> {optional && <div className="dx-step-optional-mark">(Optional)</div>} </div> </> ); }

import React from 'react'; interface IconOnlyProps { icon: string; label: string; } export default function IconOnly({ icon, label }: IconOnlyProps) { return ( <i className={`dx-icon dx-icon-${icon}`} role="img" aria-label={label}></i> ); }

import React from 'react'; interface LabelOnlyProps { label: string; } export default function LabelOnly({ label }: LabelOnlyProps) { return ( <div className="dx-step-caption"> <div className="dx-step-label">{label}</div> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import themes from 'devextreme/ui/themes'; import App from './App.tsx'; themes.initialized(() => { ReactDOM.render( <App />, document.getElementById('app'), ); });

import type { StepperTypes } from 'devextreme-react/stepper'; export const steps: StepperTypes.Item[] = [{ 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', }];

import React from 'react'; export default function CustomStepShape(data) { const { icon, label, optional } = data; return ( <> <div className="dx-step-indicator"> <i className={`dx-icon dx-icon-${icon}`}></i> </div> <div className="dx-step-caption"> <div className="dx-step-label">{label}</div> {optional && <div className="dx-step-optional-mark">(Optional)</div>} </div> </> ); }

import React from 'react'; export default function IconOnly({ icon, label }) { return ( <i className={`dx-icon dx-icon-${icon}`} role="img" aria-label={label} ></i> ); }

import React from 'react'; export default function LabelOnly({ label }) { return ( <div className="dx-step-caption"> <div className="dx-step-label">{label}</div> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import themes from 'devextreme/ui/themes'; import App from './App.js'; themes.initialized(() => { ReactDOM.render(<App />, document.getElementById('app')); });

export const steps = [ { 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', }, ];

<!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/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#app { 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); }