Keyboard shortcuts
Keyboard shortcuts allow users to execute actions, that are usually performed with a mouse or trackpad, using a keyboard. They increase the efficiency and productivity of users who primarily rely on their keyboard when interacting with applications.
The keyboard shortcuts pattern is a comprehensive and searchable list of the shortcuts that are currently available to the application user, helping them to quickly reference and learn key combinations and perform actions efficiently.
This pattern is a recommended layout and should be displayed within an appropriate container component that fits the application's information architecture and supports the user's workflow.
- Keyboard shortcuts switch: Allows users to enable or disable application keyboard shortcuts.
- Filter: Allows users to quickly search and discover specific shortcuts by typing keywords.
- Action name: User-initiated commands—such as Save or Delete—that correspond to defined shortcuts.
- Description: A brief description for actions that are unique to your application or require additional context to help users understand their purpose.
- Key: Keyboard shortcuts use a combination of modifier keys and character keys to perform actions.
Best practices
Use concise and descriptive names for actions to reflect the UI command executed by the shortcut.
- Use Switch to display keyboard shortcuts on/off switch.
- Use Combo box to display search field.
- Use Table to display keyboard shortcut list.
Use this pattern to:
- Display a comprehensive and searchable list of keyboard shortcuts available in the application.
- Help users quickly reference, discover, and learn key combinations, improving efficiency, accessibility, and overall user experience.
Best practices
Provide keyboard shortcuts as an alternative to mouse or trackpad interactions, supporting users who prefer or require keyboard input.
- The keyboard shortcuts initially displays all available shortcuts.
- When the user enters text in the filter input, the list updates to show only the matching shortcuts. For guidance on filtering behavior, refer to the List Filtering pattern page.
Allow users to control keyboard shortcuts with a switch. When shortcuts are disabled, the shortcut list should be hidden.
Best practices
Provide users with the option to disable keyboard shortcuts to enhance usability and accessibility. This is especially important in applications with custom shortcuts, as it helps prevent accidental activation and reduces user frustration.
If the keyboard shortcuts list exceeds the available display area, an overflow shadow and scrollbar should be displayed to help the user navigate the list and recognize that more shortcuts are available.
This pattern should be placed inside the appropriate container for your application. Select a container that aligns with the product’s user experience and context of use. Common options include:
- Dialog: Suitable when users need to focus on shortcuts without distraction, and when shortcuts should be accessible from anywhere in the application through a keyboard shortcut—quickly and without disrupting common tasks.
- Preferences dialog: Works well if keyboard shortcuts are part of broader settings.
- Drawer: Appropriate for persistent access, or when shortcut settings are relevant to a specific part of the application that is in focus.
The choice of container should be guided by how and when users will need to access the shortcuts, ensuring the pattern effectively supports the intended task.
When defining your shortcuts, we recommend taking the following steps:
- Consider whether each shortcut should be global or contextual.
- Combine one modifier key with a character key that's associated with the name of the action (e.g., "Cmd + S" for Save).
- Use a maximum of three keys, at least one of which must be a modifier key.
- Test your shortcuts on multiple keyboard layouts, operating systems, platforms, and browsers to ensure they are easy to use and do not conflict with essential system or browser shortcuts.
- Avoid ambiguous or hard-to-reach keys—prefer letters and numbers over symbols, as some characters (like the £ sign) are not universally available or may require complex key combinations on certain layouts.
- Clearly document shortcuts for each operating system.
Best practices
If your application includes shortcuts bound to a single character, you must comply with the Web Content Accessibility Guidelines (WCAG) 2.1. For further information, please refer to the Accessibility section below.
When setting up keyboard shortcuts for your application, consider both global and contextual shortcuts.
| Global shortcuts | Contextual shortcuts | |
|---|---|---|
| Definition | Available throughout the application, regardless of focus | Active only when specific elements are focused |
| Example use case | Saving a document from any screen | Selecting text in an input field |
| Example shortcut | Ctrl/Cmd + S | Ctrl/Cmd + A |
When the user presses a modifier key at the same time as another key, the default function of that key is modified—and together they execute the assigned shortcut. Cmd, Ctrl, Shift and Alt are examples of keys that you can use to modify other keys. Modifier keys can differ depending on the platform.
| Platform | Modifiers | |||
|---|---|---|---|---|
| macOS | Ctrl | Shift | Option | Cmd |
| Windows | Ctrl | Shift | Alt | Win |
| Linux | Ctrl | Shift | Alt | Meta |
| Bloomberg | Ctrl | Shift | Alt | Go |
Bloomberg Keyboards
Bloomberg keyboards, common in financial environments, feature a distinctive orange "Go" key used to execute commands. When designing shortcuts for these keyboards, consider supporting the "Go" key and avoid conflicts with Bloomberg’s built-in shortcuts. Always test your shortcuts for compatibility.
It is recommended to display up to three character keys in a keyboard shortcut. Make sure at least one of the keys has a close association to the action that the shortcut executes—for example, "Cmd + S" for the Save action. This will make it easier for users to memorize keyboard shortcuts they'll use frequently.
Common character keys include:
| Key Type | Modifier keys |
|---|---|
| Letters | a-z |
| Numbers | 0-9 |
| Function Keys | F1-F19 |
| Punctuation | ', -, =, [, ], , ;, *, ,, ., / |
| Navigation | Left, Up, Right, Down, PageUp, PageDown, End, Home |
| Other | Tab, Enter, Escape, Space, Backspace, Delete, Pause/Break, CapsLock, Insert |
| Numpad | Numpad0–Numpad9, Numpad_multiply, Numpad_add, Numpad_separator, Numpad_subtract, Numpad_decimal, Numpad_divide |
Best practices
When designing keyboard shortcuts, always ensure your chosen combination does not conflict with important pre-existing shortcuts or reserved browser hotkeys. To manage potential conflicts:
- Use a different modifier key (e.g., Ctrl, Alt, Shift).
- Consider the second character key in the action’s name.
- Add an extra character key if needed, but keep the total to no more than three keys for usability.
Some hotkeys cannot be overridden, as they are reserved by browsers to maintain user safety and a consistent browsing experience. Always verify that your shortcut does not interfere with these reserved combinations.
In our examples, we use the react-hotkeys-hook library to demonstrate keyboard shortcut implementation. It offers a simple and intuitive API for handling keyboard events, enabling you to add shortcut functionality with minimal setup. For installation instructions and detailed API usage, please refer to the official library documentation.
Providing keyboard functionality is essential for accessibility.
Users with visual or mobility impairments may rely entirely on the keyboard, and many power users prefer keyboard shortcuts for efficiency. By implementing the keyboard shortcuts pattern, you enhance the user experience for everyone.
It’s important to note that adding keyboard shortcuts alone does not guarantee full keyboard accessibility. All interactive elements in your application should remain accessible through standard keyboard navigation, such as using Tab, Shift+Tab, Enter, and Space keys to move focus and activate controls.
If you have shortcuts that are bound to only a single character, you must meet a requirement in the 2.1 version of the Web Content Accessibility Guidelines. Make sure you provide a mechanism to toggle the shortcuts on/off, remap them to different keys or (if they're related to a particular element) make them active only when that element has focus.
If you need to expand the pattern or share feedback with us, please contact the team.