New to Telerik UI for Blazor? Download free 30-day trial

Keyboard Navigation

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

How it Works

Generally, to focus a component, use the Tab key as the keyboard support of the page follows the normal flow of the content. Once inside 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.

Normally, users can use the keyboard to navigate only to HTML links, buttons, and form controls. The Telerik UI for Blazor library has gone to the next level and the components it delivers are focusable. In this way, even though the components represent complex structures, users can interact with them too.

The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, the focus has 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.

Most of the components in the library represent a single Tab stop. Once users reach and focus a component, they can leave it with a single tab. If the component is more complex, users can walk though its inside elements with the Arrow keys, for example, Grid cells, Menu items, Toolbar buttons. Some complex components can accommodate multiple other components. For example, the Grid can host a Toolbar and a Pager. In this case, you can tab to move the focus from one nested component to another.

Types of Keyboard Support

The Telerik UI for Blazor components may provide enhanced, standard, or no keyboard support.

  • Standard keyboard support implies similar keyboard navigation capabilities as standard HTML elements. For example, the Button components support Enter and Space for clicking them. All components with standard keyboard support are reachable through the Tab key and provide focus styles.
  • Enhanced keyboard support builds on top of the standard key combinations and provides additional built-in shortcuts for improved flexibility and user experience.
  • The components with no keyboard support serve a purely visualization purpose, are just content containers, provide no interaction, or provide only mouse and touch interaction by design.

Right-to-Left Support

When the right-to-left direction is enabled, the keyboard shortcuts for the components that support keyboard navigation remain unchanged except for the Left arrow and Right arrow keys—their functionality is reversed to follow the right-to-left direction.

Keyboard Support per Component

The following table lists the available Telerik UI for Blazor components with the type of keyboard support they provide. To see the combinations in action, click the desired component to see its keyboard navigation demo.

Component Keyboard Navigation Notes
ArcGauge -
AutoComplete Enhanced
Breadcrumb Enhanced
Button Standard
ButtonGroup Standard
Calendar Enhanced
Carousel Enhanced
Chart Enhanced
CheckBox Standard
Chip Enhanced
ChipList Enhanced
CircularGauge -
ColorGradient Enhanced
ColorPalette Enhanced
ColorPicker Enhanced See also the ColorGradient and ColorPalette.
ComboBox Enhanced
ContextMenu Enhanced
DateInput Enhanced
DatePicker Enhanced
DateRangePicker Enhanced
DateTimePicker Enhanced
Dialog Enhanced Tab to reach and use its buttons. The Dialog restricts the focus within itself during tabbing.
Drawer Enhanced
DropDownButton Enhanced
DropDownList Enhanced
DropZone -
Editor Enhanced
FileManager Enhanced Tab to focus the different nested components. Keyboard navigation for the file list is not available yet.
FileSelect Enhanced
Filter Enhanced
FlatColorPicker Enhanced Tab to focus the different nested components. See also the ColorGradient and ColorPalette.
FloatingLabel -
Form Standard
Gantt Enhanced Keyboard navigation is available for the nested TreeList.
Grid Enhanced Set Navigable="true"
GridLayout -
Icons -
LinearGauge -
ListView Enhanced
Loader -
LoaderContainer -
Map Enhanced
MaskedTextBox Standard
MediaQuery -
Menu Enhanced
MultiColumnComboBox Enhanced
MultiSelect Enhanced
Notification -
NumericTextBox Enhanced
Pager Enhanced
PanelBar Enhanced
PdfViewer Enhanced Tab to focus the different components in the toolbar. The built-in Pager provides keyboard navigation.
PivotGrid - Not Supported
(upcoming support)
ProgressBar -
QRCode -
RadialGauge -
RadioGroup Standard
RangeSlider Enhanced
Scheduler Enhanced
Signature -
Skeleton -
Slider Enhanced
SplitButton Enhanced
Splitter Enhanced
StackLayout -
Stepper Enhanced
StockChart -
Switch Enhanced
TabStrip Enhanced
TextArea Standard
TextBox Standard
TileLayout -
TimePicker Enhanced
ToggleButton Enhanced
ToolBar Enhanced
Tooltip -
TreeList Enhanced
TreeView Enhanced
Upload Enhanced
Validation -
Window Enhanced
Wizard Enhanced

See Also

In this article