Keyboard Navigation

The keyboard navigation of the Stepper is always available.

The Stepper supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Focuses the previous step in a vertical Stepper.
Down Arrow Focuses the next step in a vertical Stepper.
Left Arrow Focuses the previous step in a horizontal Stepper.
Right Arrow Focuses the next step in a horizontal Stepper.
Home Focuses the first step of the Stepper.
End Focuses the last step of the Stepper.
Enter Activates the currently focused step.
Space Activates the currently focused step.
Tab Moves the focus away from the Stepper.
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [steps]="steps"
            [stepType]="'full'"
            [currentStep]="1"
            [linear]="false"
            [style.width.px]="570">
        </kendo-stepper>
    `
})
export class AppComponent {
    public steps = [
        { label: 'Personal Info', icon: 'user' },
        { label: 'Education', icon: 'dictionary-add' },
        { label: 'Attachments', icon: 'attachment', optional : true },
        { label: 'Preview', icon: 'preview' },
        { label: 'Submit', icon: 'file-add' }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article