The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more. Use the semantic `` keyboard input tag to use the default monospace font which is best suited for representing input keys. ## Default KBD Here's a list of KBD components that you can use inside any other element. ```html Shift Ctrl Tab Caps Lock Esc Spacebar Enter ``` ## KBD inside text Use this example by nesting an inline KBD component inside a paragraph. ```html

Please press Ctrl + Shift + R to re-render an MDN page.

``` ## KBD inside table The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions. ```html
Key Description
Shift or Tab Navigate to interactive elements
Enter or Spacebar Ensure elements with ARIA role="button" can be activated with both key commands.
Arrow key up Arrow key down or Arrow key left Arrow key right Choose and activate previous/next tab.
``` ## Arrow keys Use this example to show arrow keys inside the KBD styled element. ```html Arrow key up Arrow key down Arrow key left Arrow key right ``` ## Letter keys Use this example if you need to show a key from the latin alphabet ```html Q W E R T Y U I O P A S D F G H J K L Z X C V B N M ``` ## Number keys Use this example to show a key inside a KBD component from the english numeral system. ```html 1 2 3 4 5 6 7 8 9 0 ``` ## Function keys This example can be used to denote function keys inside the KBD component. ```html F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 ```