Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
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.Default KBD
Here’s a list of KBD components that you can use inside any other element.Shift Ctrl Tab Caps Lock Esc Spacebar Enter
KBD inside text
Use this example by nesting an inline KBD component inside a paragraph.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.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. |
Arrow keys
Use this example to show arrow keys inside the KBD styled element. 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 alphabetQ 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.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.F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12