Keyboard Support in Blazor Filter Builder

• Oct 07, 2025
• 3 minutes to read

The DevExpress Blazor Filter Builder supports keyboard shortcuts for full UI accessibility. Keyboard navigation runs on the client side and remains responsive even in Blazor Server apps with slow connections.

Run Demo: Filter Builder – Overview

Note

Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.

The Filter Builder component arranges its UI elements into rows. Use Down Arrow/Up Arrow keys to navigate through these rows and Right Arrow/Left Arrow keys to navigate through individual elements.

Press Enter/Space to invoke a click event handler for the focused element (open the drop-down list, switch the value to edit mode, or remove the filter condition).

Use Tab or Shift + Tab shortcut keys to move focus from the Filter Builder component to the next or previous focusable page element.

Elements with Drop-Down Lists

The following table lists shortcut keys available for UI elements that reveal drop-down lists (fields, logical and criteria operators, and the Add condition/Add group menu).

PC/Windows Shortcuts	Mac Shortcuts	Description
Enter, Space, Alt + Down Arrow	Enter, Space, Option + Down Arrow	Opens a drop-down window and moves focus to the first list item.
Esc, Alt + Up Arrow	Esc, Option + Up Arrow	Closes the drop-down window.
Down Arrow, Up Arrow	Down Arrow, Up Arrow	Moves focus to the next or previous item in the list.
Space	Space	Selects the focused item. Has no effect in the field tree.
Enter	Enter	Selects the focused item. For the field tree: If field selection is enabled, selects the focused field. Otherwise, expands the field or has no effect.
Right Arrow	Right Arrow	For the field tree: Expands the focused field. If the focused field is already expanded, moves focus to the first child field.
Left Arrow	Left Arrow	For the field tree: When a child field is focused, moves focus to its parent field. When a parent field is focused, collapses the field.
Tab	Tab	For criteria operator lists: When the search box is focused, moves focus to the first or previously focused operator item. Otherwise, moves focus to the next focusable page element.
Shift + Tab	Shift + Tab	For criteria operator lists: When an operator item is focused, moves focus to the search box. Otherwise, moves focus to the previous focusable page element.

Field Values and Value Editors

The following table lists shortcut keys available for field values and associated value editors.

PC/Windows Shortcuts	Mac Shortcuts	Description
Enter, Space	Enter, Space	Switches the field value to edit mode. For templated values: Moves focus to the first focusable element in the template.
Enter, Esc	Enter, Esc	Switches the value from the edit to display mode.
Alt + Down Arrow	Option + Down Arrow	Opens the drop-down editor.
Alt + Up Arrow, Esc	Option + Up Arrow, Esc	Closes the drop-down editor.

Value editors include their own navigation shortcuts. Refer to the following help topic for more information on keyboard support in various DevExpress Blazor components: Accessibility - Keyboard Support.