Svelte KBD (Keyboard) - Flowbite

Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components

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.

Setup #

Svelte
<script>
  import { Kbd } from 'flowbite-svelte'
</script>

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
Svelte
<Kbd class='px-2 py-1.5'>Shift</Kbd>
<Kbd class='px-2 py-1.5'>Ctrl</Kbd>
<Kbd class='px-2 py-1.5'>Tab</Kbd>
<Kbd class='px-2 py-1.5'>Caps Lock</Kbd>
<Kbd class='px-2 py-1.5'>Esc</Kbd>
<Kbd class='px-4 py-1.5'>Spacebar</Kbd>
<Kbd class='px-2 py-1.5'>Enter</Kbd>

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.

Svelte

<p class="text-gray-500 dark:text-gray-400">
Please press <Kbd class="px-2 py-1.5">Ctrl</Kbd> + <Kbd class="px-2 py-1.5">Shift</Kbd> + <Kbd class="px-2 py-1.5">R</Kbd> to re-render an MDN page.
</p>

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.
Svelte
<script>
  import { Kbd, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, TableBodyRow, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte'
</script>

<Table>
  <TableHead>
    <TableHeadCell>Key</TableHeadCell>
    <TableHeadCell>Description</TableHeadCell>
  </TableHead>
  <TableBody class="divide-y">
    <TableBodyRow>
      <TableBodyCell>
        <Kbd class='px-2 py-1.5'>Shift</Kbd> or <Kbd class='px-2 py-1.5'>Tab</Kbd>
      </TableBodyCell>
      <TableBodyCell>Navigate to interactive elements</TableBodyCell>
    </TableBodyRow>
    <TableBodyRow>
      <TableBodyCell>
        <Kbd class='px-2 py-1.5'>Enter</Kbd> or <Kbd class='px-4 py-1.5'>Space bar</Kbd>
      </TableBodyCell>
      <TableBodyCell>Ensure elements with ARIA role="button" can be activated with both key commands.</TableBodyCell>
    </TableBodyRow>
    <TableBodyRow>
      <TableBodyCell>
        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
        <ArrowKeyUp />
        <span class="sr-only">Arrow key up</span>
        </Kbd>
        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
        <ArrowKeyDown />
        <span class="sr-only">Arrow key down</span>
        </Kbd> or 
        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
        <ArrowKeyLeft />
        <span class="sr-only">Arrow key left</span>
        </Kbd>
        <Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
        <ArrowKeyRight />
        <span class="sr-only">Arrow key right</span>
        </Kbd>
      </TableBodyCell>
      <TableBodyCell>Choose and activate previous/next tab.</TableBodyCell>
    </TableBodyRow>
  </TableBody>
</Table>

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
Svelte
<script>
  import { Kbd, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte'
</script>

<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
  <ArrowKeyUp />
  <span class="sr-only">Arrow key up</span>
</Kbd>
<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
  <ArrowKeyDown />
  <span class="sr-only">Arrow key down</span>
</Kbd>
<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
  <ArrowKeyLeft />
  <span class="sr-only">Arrow key left</span>
</Kbd>
<Kbd class="inline-flex items-center mr-1 px-2 py-1.5" >
  <ArrowKeyRight />
  <span class="sr-only">Arrow key right</span>
</Kbd>

Letter keys #

Use this example if you need to show a key from the latin alphabet

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
Svelte
<Kbd class="px-2 py-1.5">Q</Kbd>
<Kbd class="px-2 py-1.5">W</Kbd>
<Kbd class="px-2 py-1.5">E</Kbd>
<Kbd class="px-2 py-1.5">R</Kbd>
<Kbd class="px-2 py-1.5">T</Kbd>
<Kbd class="px-2 py-1.5">Y</Kbd>
<Kbd class="px-2 py-1.5">U</Kbd>
<Kbd class="px-2 py-1.5">I</Kbd>
<Kbd class="px-2 py-1.5">O</Kbd>
<Kbd class="px-2 py-1.5">P</Kbd>
<Kbd class="px-2 py-1.5">A</Kbd>
<Kbd class="px-2 py-1.5">S</Kbd>
<Kbd class="px-2 py-1.5">D</Kbd>
<Kbd class="px-2 py-1.5">F</Kbd>
<Kbd class="px-2 py-1.5">G</Kbd>
<Kbd class="px-2 py-1.5">H</Kbd>
<Kbd class="px-2 py-1.5">J</Kbd>
<Kbd class="px-2 py-1.5">K</Kbd>
<Kbd class="px-2 py-1.5">L</Kbd>
<Kbd class="px-2 py-1.5">Z</Kbd>
<Kbd class="px-2 py-1.5">X</Kbd>
<Kbd class="px-2 py-1.5">C</Kbd>
<Kbd class="px-2 py-1.5">V</Kbd>
<Kbd class="px-2 py-1.5">B</Kbd>
<Kbd class="px-2 py-1.5">N</Kbd>
<Kbd class="px-2 py-1.5">M</Kbd>

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
Svelte
<Kbd class="px-2 py-1.5">1</Kbd>
<Kbd class="px-2 py-1.5">2</Kbd>
<Kbd class="px-2 py-1.5">3</Kbd>
<Kbd class="px-2 py-1.5">4</Kbd>
<Kbd class="px-2 py-1.5">5</Kbd>
<Kbd class="px-2 py-1.5">6</Kbd>
<Kbd class="px-2 py-1.5">7</Kbd>
<Kbd class="px-2 py-1.5">8</Kbd>
<Kbd class="px-2 py-1.5">9</Kbd>
<Kbd class="px-2 py-1.5">0</Kbd>

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
Svelte
<Kbd class="px-2 py-1.5">F1</Kbd>
<Kbd class="px-2 py-1.5">F2</Kbd>
<Kbd class="px-2 py-1.5">F3</Kbd>
<Kbd class="px-2 py-1.5">F4</Kbd>
<Kbd class="px-2 py-1.5">F5</Kbd>
<Kbd class="px-2 py-1.5">F6</Kbd>
<Kbd class="px-2 py-1.5">F7</Kbd>
<Kbd class="px-2 py-1.5">F8</Kbd>
<Kbd class="px-2 py-1.5">F9</Kbd>
<Kbd class="px-2 py-1.5">F10</Kbd>
<Kbd class="px-2 py-1.5">F11</Kbd>
<Kbd class="px-2 py-1.5">F12</Kbd>

Props #

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

Kbd #

Name	Type	Default
kbdClass	string	'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500'

ArrowKeyDown #

Name	Type	Default
svgClass	string	'w-4 h-4'

ArrowKeyLeft #

Name	Type	Default
svgClass	string	'w-4 h-4'

ArrowKeyRight #

Name	Type	Default
svgClass	string	'w-4 h-4'

ArrowKeyUp #

Name	Type	Default
svgClass	string	'w-4 h-4'

References #

Tailwind CSS KBD (Keyboard)

Indicators

List Group