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>