Display Modes

The Stepper enables you to specify steps layout.

Steps Layout

To specify if the steps will be displayed with or without an indicator, use the mode property. The possible values are:

  • (Default) steps. Render step indicator and optional label.
  • labels. Render labels only.

To configure the layout of the Step indicators, use the following properties:

  • icon — Sets an icon inside the Step indicator.
  • text — Sets custom text inside the Step indicator.

If neither of the two properties is provided, the steps indicators will render numbers in a sequence order.

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

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

const steps = [{}, {}, {}];

const stepsWithLabel = [
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' }
];
const icons = [
    { icon: 'k-i-lock' },
    { icon: 'k-i-user' },
    { icon: 'k-i-track-changes' }
];
const iconsWithLabel = [
    { icon: 'k-i-lock', label: 'Step 1' },
    { icon: 'k-i-user', label: 'Step 2' },
    { icon: 'k-i-track-changes', label: 'Step 3' }
];
const customText = [
    { text: 'A' },
    { text: 'B' },
    { text: 'C' }
];
const labelOnly = [
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' }
];

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

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

    return (
        <React.Fragment>
            <div className="row">
                <div className="col-6">
                    <p>Simple Steps</p>
                    <Stepper value={value} onChange={handleChange} items={steps} />
                </div>
                <div className="col-6">
                    <p>Steps with icons</p>
                    <Stepper value={value} onChange={handleChange} items={icons} />
                </div>
                <div className="col-6 pt-5">
                    <p>Steps with labels</p>
                    <Stepper value={value} onChange={handleChange} items={stepsWithLabel} />
                </div>
                <div className="col-6 pt-5">
                    <p>Steps with icons and labels</p>
                    <Stepper value={value} onChange={handleChange} items={iconsWithLabel} />
                </div>
                <div className="col-6 pt-5">
                    <p>Steps with custom text</p>
                    <Stepper value={value} onChange={handleChange} items={customText} />
                </div>
                <div className="col-6 pt-5">
                    <p>Labels Only</p>
                    <Stepper value={value} onChange={handleChange} mode={'labels'} items={labelOnly} />
                </div>
            </div>
        </React.Fragment>
    );
};

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

Steps Types

The Stepper provides various step types. For example, disabled, optional steps as well as steps with validation applied.

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

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

const items = [
    { label: 'Success Step', isValid: true },
    { label: 'Error Step', isValid: false },
    { label: 'Disabled Step', disabled: true },
    { label: 'Optional Step', optional: true },
];

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

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

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

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