Linear Mode

The Stepper enables you to set its steps flow using the linear Boolean property. By default, linear is set to false.

When the linear property is set to true, the Stepper will require to complete the previous step before proceeding to the next one.

The following example demonstrates how to configure a linear flow of the Stepper:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Stepper } from '@progress/kendo-react-layout';

const items = [
    { label: 'Cart', icon: 'k-i-cart' },
    { label: 'Delivery Address', icon: 'k-i-marker-pin-target' },
    { label: 'Payment Method', icon: 'k-i-dollar' },
    { label: 'Preview', icon: 'k-i-preview' },
    { label: 'Finish Order', icon: 'k-i-track-changes-accept' }
];

const App = () => {
    const [value, setValue] = React.useState(0);

    const handleChange = (e) => {
        setValue(e.value);
    };

    return (
        <Stepper value={value} onChange={handleChange} items={items} linear={true} />
    );
};

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);