Blazor ListBox Example - Keyboard Navigation
Select Your Favorite Car:
- Hennessey Venom
- Bugatti Chiron
- Bugatti Veyron Super Sport
- SSC Ultimate Aero
- Koenigsegg CCR
- McLaren F1
- Aston Martin One-77
- Jaguar XJ220
- McLaren P1
- Ferrari LaFerrari
This example demonstrates keyboard interaction capabilities of the ListBox component for efficient, keyboard-driven navigation and selection. The documented shortcuts cover focus management, single-item navigation, and multi-selection patterns commonly used in desktop and accessible web interfaces.
Focus navigation
- Alt + J — Focuses the first ListBox instance on the page.
Item navigation
- Up arrow — Move focus to the previous option.
- Down arrow — Move focus to the next option.
- Home — Move focus to the first option.
- End — Move focus to the last option.
- Space — Toggle the selection state of the focused option.
Multi-selection
- Ctrl + A — Select all options.
- Ctrl + Shift + Home — Select the focused option and all options up to the first.
- Ctrl + Shift + End — Select the focused option and all options down to the last.
- Ctrl + Arrow keys — Use Ctrl with Up/Down arrows (or mouse interactions) to extend or modify multiple selections incrementally.
Implement these shortcuts alongside proper focus management and ARIA attributes to ensure the ListBox remains accessible to keyboard users and assistive technologies while delivering efficient selection workflows.