Keyboard Navigation

The Telerik UI for Blazor components support keyboard navigation so the end users can use the keyboard to walk through them and invoke actions such as clicking buttons, paging the grid and so on.

Generally, to focus a component use the Tab key as the keyboard support of the page follows the normal flow of the content. Once in a component, you can use specific keyboard shortcuts to trigger specific actions (such as using the arrow keys to focus different cells in the grid, or the Enter key to click a button).

By default, users can only navigate to links, buttons, and form controls with a keyboard, and we also made our components focusable so the user can interact with them too, even though they are complex structures. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, it needs to follow the visual horizontal and vertical flow of the page. For example, left to right and top to bottom, header first followed by the main and then page navigation.

The following list shows the Telerik components that support specific keyboard combinations and links to live demos where you can see the behavior in action, together with the available keyboard shortcuts:

  • AutoComplete

  • Button

  • ButtonGroup

  • Calendar

  • Chart - not applicable, the chart is a visualization component only.

  • Checkbox - not applicable, it is a simple input with the standard behavior.

  • ChunkProgressBar - not applicable, it is merely a visualization component the user cannot interact with.

  • Context Menu

  • ComboBox

  • DateInput

  • DatePicker

  • DateRangePicker

  • DateTimePicker

  • Drawer

  • DropDownList

  • Editor - will have keyboard navigation in an upcoming release.

  • Grid (set Navigable="true")

  • MaskedTextbox - not applicable, it is a simple input with the standard behavior.

  • Menu

  • ListView - not applicable, its entire rendering is up to the app. Its pager is a separate component that offers accessibility and keyboard navigation.

  • Loader - not applicable, it is merely a visualization component the user cannot interact with.

  • MultiSelect

  • NumericTextBox

  • Pager

  • ProgressBar - not applicable, it is merely a visualization component the user cannot interact with.

  • RadioGroup - has the standard behavior of radio buttons with the same name.

  • Scheduler - will have keyboard navigation in an upcoming release.

  • Switch

  • TabStrip

  • TextArea - not applicable, it is a simple input with the standard behavior.

  • Textbox - not applicable, it is a simple input with the standard behavior.

  • TileLayout - not applicable, the resize and drag actions apply to mouse/touch gestures only.

  • TimePicker

  • ToggleButton

  • TreeList - will have keyboard navigation in an upcoming release.

  • TreeView

  • Upload

  • Window

See Also

In this article
Not finding the help you need? Improve this article