Layout / Stepper / Getting Started
material theme

Getting Started with KendoReact Stepper

The KendoReact Stepper component enables the user to create a sequence of logical steps that visualizes progress.

It could also be used for navigation purposes.

The KendoReact Stepper is distributed through NPM under the kendo-react-layout package.

The Stepper component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

The following example demonstrates the Stepper in action.

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', optional: true },
    { 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} />
    );
};

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

Functionality and Features

Is this article helpful?

Not finding the help you need?

Contact Support