Blazor Dropdown List Example - Keyboard Navigation

Dropdown List / Keyboard Navigation

This sample demonstrates the keyboard functionalities of Blazor DropDownList component. Use keyboard shortcuts to interact with DropDownList.

Loading Syncfusion Blazor Server Demos…

The DropDownList supports the following keyboard shortcuts to perform various actions.

Focus
  • Alt + J - Focuses on the first component of the sample.
Input Navigation
  • Alt + Down arrow - Opens the dropdown popup list.
  • Alt + Up arrow - Closes the dropdown popup list.
  • Tab - Focuses on the next Tab Index element on the page.
  • Shift + Tab - Focuses on the previous Tab Index element on the page.
Selection
  • Enter - Selects the focused item, and when it is in an open state the popup list closes. Otherwise, toggles the popup list.
Popup Navigation
  • Down arrow - Selects the first item in the DropDownList when no item is selected. Otherwise, selects the item next to the currently selected item.
  • Up arrow - Selects the item previous to the currently selected one.
  • Page down - Scrolls down to the next page and selects the first item when the popup list opens.
  • Page up - Scrolls up to the previous page and selects the first item when popup list opens.
  • Home - Selects the first item.
  • End - Selects the last item.
  • Esc - Closes the popup list when it is in an open state and the currently selected item remains the same.
Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE