--- layout: componentLayout title: Svelte KBD (Keyboard) - Flowbite breadcrumb_title: KBD dir: Components description: Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components --- Home {dir} {breadcrumb_title} {title} {description} Kbd 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. ```html ``` Here’s a list of KBD components that you can use inside any other element. ```svelte example hideScript Shift Ctrl Tab Caps Lock Esc Spacebar Enter ``` Use this example by nesting an inline KBD component inside a paragraph. ```svelte example hideScript

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

``` The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions. ```svelte example Key Description Shift or Tab Navigate to interactive elements Enter or Space bar 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.

``` Use this example to show arrow keys inside the KBD styled element. ```svelte example Arrow key up Arrow key down Arrow key left Arrow key right ``` Use this example if you need to show a key from the latin alphabet ```svelte example hideScript 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 ``` Use this example to show a key inside a KBD component from the english numeral system. ```svelte example hideScript 1 2 3 4 5 6 7 8 9 0 ``` This example can be used to denote function keys inside the KBD component. ```svelte example hideScript F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 ```

The component has the following props, type, and default values. See types page for type information.

Kbd

ArrowKeyDown

ArrowKeyLeft

ArrowKeyRight

ArrowKeyUp