Keyboard Navigation

The keyboard navigation of the Stepper is always available.

The Stepper component supports the following keyboard shortcuts.

SHORTCUTDESCRIPTION
Left ArrowFocuses previous Step.
Up ArrowFocuses previous Step.
Right ArrowFocuses next Step.
Down ArrowFocuses next Step.
HomeFocuses the first Step
EndFocuses the last Step
EnterSelects the focused Step.
SpaceSelects the focused Step.
TabBlurs the Stepper and moves the focus to the next focusable element on page.
Shift+TabBlurs the Stepper and moves the focus to the previous focusable element on page.
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 (
        <React.Fragment>
            <Stepper value={value} onChange={handleChange} items={items} />
        </React.Fragment>
    );
};

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