Vue Stepper - Configure a Read-Only Stepper

You can disable all user interaction with Stepper by setting focusStateEnabled to false and assigning the pointer-events: none; CSS style to the component. Define and modify the selectedIndex property to control the Stepper state independently of the component. The code snippet below allows users to change the active step with two Buttons.

jQuery
index.html
index.js
index.css
<div id="stepper"></div>
<div id="buttons">
    <div id="prev"></div><div id="next"></div>
</div>
$(() => {
    const stepper = $('#stepper').dxStepper({
        focusStateEnabled: false,
        dataSource,
    }).dxStepper('instance');
    $('#prev').dxButton({
        text: "Previous step",
        onClick: () => {
            const selectedIndex = stepper.option('selectedIndex');
            if (selectedIndex > 0) {
                stepper.option('selectedIndex', selectedIndex - 1);
            }
        }
    });
    $('#next').dxButton({
        text: "Next step",
        onClick: () => {
            const selectedIndex = stepper.option('selectedIndex');
            if (selectedIndex < dataSource.length - 1) {
                stepper.option('selectedIndex', selectedIndex + 1);
            }
        }
    });
});
#stepper {
    pointer-events: none;
}
Angular
app.component.html
app.component.ts
app.component.css
<dx-stepper
    id="stepper"
    [dataSource]="dataSource"
    [selectedIndex]="selectedIndex"
    [focusStateEnabled]="false"
>
</dx-stepper>
<dx-button text="Previous Step" (onClick)="handlePreviousButtonClick()"></dx-button>
<dx-button text="Next Step" (onClick)="handleNextButtonClick()"></dx-button>
// ...
export class AppComponent {
    selectedIndex: number = 0;
    handlePreviousButtonClick() {
        if (this.selectedIndex > 0) {
            this.selectedIndex -= 1;
        }
    }
    handleNextButtonClick() {
        if (this.selectedIndex < this.dataSource.length - 1) {
            this.selectedIndex += 1;
        }
    }
}
#stepper {
    pointer-events: none;
}
Vue
App.vue
<template>
    <DxStepper
        id="stepper"
        :dataSource="dataSource"
        :selected-index="selectedIndex"
        :focus-state-enabled="false"
    />
    <DxButton
        text="Previous Step"
        @click="handlePreviousButtonClick()"
    />
    <DxButton
        text="Next Step"
        @click="handleNextButtonClick()"
    />
</template>
<script>
// ...
    const selectedIndex = ref(0);
    const handlePreviousButtonClick = () => {
        if (selectedIndex.value > 0) {
            selectedIndex.value -= 1;
        }
    }
    const handleNextButtonClick = () => {
        if (selectedIndex.value < dataSource.length - 1) {
            selectedIndex.value += 1;
        }
    }
</script>
<style scoped>
    #stepper {
        pointer-events: none;
    }
</style>
React
App.tsx
styles.css
export default function App() {
    const [selectedIndex, setSelectedIndex] = useState(0)
    const handlePreviousButtonClick = () => {
        if (selectedIndex > 0) {
            setSelectedIndex(selectedIndex-1);
        }
    }
    const handleNextButtonClick = () => {
        if (selectedIndex < dataSource.length - 1) {
            setSelectedIndex(selectedIndex+1);
        }
    }

    return (
        <Stepper id="stepper" dataSource={dataSource} focusStateEnabled={false} selectedIndex={selectedIndex} />
        <Button text="Previous Step" onClick={handlePreviousButtonClick} />
        <Button text="Next Step" onClick={handleNextButtonClick} />
    )
}
#stepper {
    pointer-events: none;
}