Skip to main content
All docs
V25.2
  • TagBox - Keyboard Support

    • 3 minutes to read

    The DevExpress Blazor TagBox supports keyboard navigation. Users can focus the component’s edit box, navigate through tags and remove them, navigate within the drop-down item list, and select items. While DOM focus refers to the input element as the active element for keyboard interaction, visual focus can move to tags or list items. Keyboard navigation is also supported in virtual scroll mode.

    Run Demo: TagBox

    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.

    Shortcut Keys for Edit Box

    The following shortcut keys are available when the component’s edit box is focused:

    PC/Windows Shortcuts

    Mac Shortcuts

    Description

    Tab

    Tab

    Moves focus to the next focusable element on a page. Note that input elements (Clear button and selected tags) are excluded from the page tab sequence.
    If AllowCustomTags is set to true, entered characters are applied as a custom tag.

    Shift + Tab

    Shift + Tab

    Moves focus to the previous focusable element on a page.

    Alt + Delete

    Fn + Option + Delete

    Clears the input element.

    Characters

    Characters

    Adds characters to the input if AllowCustomTags is set to true.

    Arrow Right
    Arrow Left

    Arrow Right
    Arrow Left

    Navigate to next/previous tag or character.

    Delete

    Delete

    Removes characters or the focused tag. Once the tag is removed, focus moves to the next available tag.

    Backspace

    Fn + Delete

    Removes characters or the focused tag. Once the tag is removed, focus moves to the previous tag, if available. If the edit box does not contain any text and no tag is focused, the key removes the last available tag and keeps the text in the input element.

    Home
    End

    Option + Arrow Up
    Option + Arrow Down

    Move the caret to the start/end of input text.

    Alt + Arrow Down

    Option + Arrow Down

    Opens the drop-down list, but keeps focus on the input element.

    Alt + Arrow Up

    Option + Arrow Up

    Closes the drop-down list, but keeps focus on the input element.

    Shortcut Keys for Drop-Down Item List

    The following shortcut keys are available when the drop-down list is opened:

    PC/Windows Shortcuts

    Mac Shortcuts

    Description

    Arrow Up

    Arrow Up

    Moves focus one item up.

    Arrow Down

    Arrow Down

    Moves focus one item down.

    Ctrl + Shift + Home

    Ctrl + Shift + Fn + Arrow Up

    Moves focus to the first item in the list.

    Ctrl + Shift + End

    Ctrl + Shift + Fn + Arrow Down

    Moves focus to the last item in the list.

    Page Up

    Fn + Arrow Up

    Moves focus to an item on the previous page.

    Page Down

    Fn + Arrow Down

    Moves focus to an item on the next page.

    Tab

    Tab

    Selects the focused item, updates the Tags parameter value, closes the drop-down list, moves focus to the input element.

    Enter

    Enter

    Selects the focused item, updates the Tags parameter value, and closes the drop-down list.

    Escape

    Escape

    Closes the drop-down list.

    The TagBox does not currently allow you to navigate through elements in templated items.