All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Keyboard Support

The DevExtreme UI components enable you to use the keyboard to switch between UI components within a view. The UI component tabbing order is specified by the tabIndex property. When an end-user presses Tab or Shift+Tab, focus is moved to the UI component with a higher or lower tabIndex value respectively.

JavaScript
var buttonOptions = {
    text: 'Click me',
    tabIndex: 0
}
var checkBoxOptions = {
    value: true,
    tabIndex: 1
}
var textBoxOptions = {
    placeholder: 'Input text'
    tabIndex: 2
}

If a UI component is focused, the dx-state-focused css class is applied to the UI component element. You can modify this class to use a custom style for a UI component when it is focused.

Focused UI components can be fully controlled with the keyboard. To learn how to control a certain UI component using the keyboard, refer to the UI component description in the UI Widgets guides.