KBD (Keyboard)
Default
Shift Ctrl Tab Caps Lock Esc Spacebar Enter
<script lang="ts">
import { Kbd } from 'svelte-5-ui-lib';
</script>
<div class="flex flex-wrap justify-center gap-1">
<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>
</div>
Letter keys
Type a letter
<script lang="ts">
import { Kbd, Input } from 'svelte-5-ui-lib';
let letter = $state('');
</script>
<div class="space-y-4">
<Kbd class="px-2 py-1.5">{letter === '' ? 'Type a letter' : letter}</Kbd>
<Input bind:value={letter} placeholder="Type a letter" />
</div>
Inside text
Please press Ctrl + Shift + R to re-render an MDN page.
<script lang="ts">
import { Kbd } from 'svelte-5-ui-lib';
</script>
<div class="flex flex-wrap justify-center">
<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>
</div>
Inside 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. |
<script lang="ts">
import {
Table,
TableBody,
TableBodyCell,
TableBodyRow,
TableHead,
TableHeadCell,
Kbd
} from 'svelte-5-ui-lib';
import {
CaretDownSolid,
CaretUpSolid,
CaretLeftSolid,
CaretRightSolid
} from 'flowbite-svelte-icons';
</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="me-1 inline-flex items-center px-2 py-1.5">
<CaretUpSolid size="xs" />
<span class="sr-only">Arrow key up</span>
</Kbd>
<Kbd class="me-1 inline-flex items-center px-2 py-1.5">
<CaretDownSolid size="xs" />
<span class="sr-only">Arrow key down</span>
</Kbd> or
<Kbd class="me-1 inline-flex items-center px-2 py-1.5">
<CaretLeftSolid size="xs" />
<span class="sr-only">Arrow key left</span>
</Kbd>
<Kbd class="me-1 inline-flex items-center px-2 py-1.5">
<CaretRightSolid size="xs" />
<span class="sr-only">Arrow key right</span>
</Kbd>
</TableBodyCell>
<TableBodyCell>Choose and activate previous/next tab.</TableBodyCell>
</TableBodyRow>
</TableBody>
</Table>
Arrow keys
Arrow key up Arrow key down Arrow key left Arrow key right
<script lang="ts">
import { Kbd } from 'svelte-5-ui-lib';
import {
CaretDownSolid,
CaretLeftSolid,
CaretRightSolid,
CaretUpSolid
} from 'flowbite-svelte-icons';
</script>
<div class="flex flex-wrap justify-center">
<Kbd class="me-1 inline-flex items-center px-2 py-1.5">
<CaretUpSolid size="xs" />
<span class="sr-only">Arrow key up</span>
</Kbd>
<Kbd class="me-1 inline-flex items-center px-2 py-1.5">
<CaretDownSolid size="xs" />
<span class="sr-only">Arrow key down</span>
</Kbd>
<Kbd class="me-1 inline-flex items-center px-2 py-1.5">
<CaretLeftSolid size="xs" />
<span class="sr-only">Arrow key left</span>
</Kbd>
<Kbd class="me-1 inline-flex items-center px-2 py-1.5">
<CaretRightSolid size="xs" />
<span class="sr-only">Arrow key right</span>
</Kbd>
</div>