KBD (Keyboard) - Laravel Blade

Use the KBD component to indicate keyboard inputs and shortcuts in your documentation and tutorials.

Default KBD

Shift Ctrl Tab Caps Lock Esc Spacebar Enter

Blade code

<div class="flex flex-wrap gap-1">
    <x-fwb.kbd>Shift</x-fwb.kbd>
    <x-fwb.kbd>Ctrl</x-fwb.kbd>
    <x-fwb.kbd>Tab</x-fwb.kbd>
    <x-fwb.kbd>Caps Lock</x-fwb.kbd>
    <x-fwb.kbd>Esc</x-fwb.kbd>
    <x-fwb.kbd>Spacebar</x-fwb.kbd>
    <x-fwb.kbd>Enter</x-fwb.kbd>
</div>

KBD Inside Text

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

Blade code

<p class="text-gray-500 dark:text-gray-400">
    Please press <x-fwb.kbd>Ctrl</x-fwb.kbd> + <x-fwb.kbd>Shift</x-fwb.kbd> + <x-fwb.kbd>R</x-fwb.kbd> to re-render the page.
</p>

KBD Inside Table

Key Description
Shift or Tab Navigate to interactive elements
Enter or Spacebar Ensure elements with ARIA role are reachable

Blade code

<div class="overflow-x-auto">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th class="px-6 py-3">Key</th>
                <th class="px-6 py-3">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <td class="px-6 py-4"><x-fwb.kbd>Shift</x-fwb.kbd> or <x-fwb.kbd>Tab</x-fwb.kbd></td>
                <td class="px-6 py-4">Navigate to interactive elements</td>
            </tr>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <td class="px-6 py-4"><x-fwb.kbd>Enter</x-fwb.kbd> or <x-fwb.kbd>Spacebar</x-fwb.kbd></td>
                <td class="px-6 py-4">Ensure elements with ARIA role are reachable</td>
            </tr>
        </tbody>
    </table>
</div>

Arrow Keys

Arrow down Arrow up Arrow left Arrow right

Blade code

<div class="flex flex-wrap gap-1">
    <x-fwb.kbd :arrow="true">
        <x-fwb-o-chevron-down class="w-2.5 h-2.5" />
        <span class="sr-only">Arrow down</span>
    </x-fwb.kbd>
    <x-fwb.kbd :arrow="true">
        <x-fwb-o-chevron-down class="w-2.5 h-2.5 rotate-180" />
        <span class="sr-only">Arrow up</span>
    </x-fwb.kbd>
    <x-fwb.kbd :arrow="true">
        <x-fwb-o-chevron-down class="w-2.5 h-2.5 rotate-90" />
        <span class="sr-only">Arrow left</span>
    </x-fwb.kbd>
    <x-fwb.kbd :arrow="true">
        <x-fwb-o-chevron-down class="w-2.5 h-2.5 -rotate-90" />
        <span class="sr-only">Arrow right</span>
    </x-fwb.kbd>
</div>

Letter Keys

Q W E R T Y U I O P A S D F G H J K L

Blade code

<div class="flex flex-wrap gap-1">
    <x-fwb.kbd>Q</x-fwb.kbd>
    <x-fwb.kbd>W</x-fwb.kbd>
    <x-fwb.kbd>E</x-fwb.kbd>
    <x-fwb.kbd>R</x-fwb.kbd>
    <x-fwb.kbd>T</x-fwb.kbd>
    <x-fwb.kbd>Y</x-fwb.kbd>
    <x-fwb.kbd>U</x-fwb.kbd>
    <x-fwb.kbd>I</x-fwb.kbd>
    <x-fwb.kbd>O</x-fwb.kbd>
    <x-fwb.kbd>P</x-fwb.kbd>
    <x-fwb.kbd>A</x-fwb.kbd>
    <x-fwb.kbd>S</x-fwb.kbd>
    <x-fwb.kbd>D</x-fwb.kbd>
    <x-fwb.kbd>F</x-fwb.kbd>
    <x-fwb.kbd>G</x-fwb.kbd>
    <x-fwb.kbd>H</x-fwb.kbd>
    <x-fwb.kbd>J</x-fwb.kbd>
    <x-fwb.kbd>K</x-fwb.kbd>
    <x-fwb.kbd>L</x-fwb.kbd>
</div>

Number Keys

1 2 3 4 5 6 7 8 9 0

Blade code

<div class="flex flex-wrap gap-1">
    <x-fwb.kbd>1</x-fwb.kbd>
    <x-fwb.kbd>2</x-fwb.kbd>
    <x-fwb.kbd>3</x-fwb.kbd>
    <x-fwb.kbd>4</x-fwb.kbd>
    <x-fwb.kbd>5</x-fwb.kbd>
    <x-fwb.kbd>6</x-fwb.kbd>
    <x-fwb.kbd>7</x-fwb.kbd>
    <x-fwb.kbd>8</x-fwb.kbd>
    <x-fwb.kbd>9</x-fwb.kbd>
    <x-fwb.kbd>0</x-fwb.kbd>
</div>

Function Keys

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12

Blade code

<div class="flex flex-wrap gap-1">
    <x-fwb.kbd>F1</x-fwb.kbd>
    <x-fwb.kbd>F2</x-fwb.kbd>
    <x-fwb.kbd>F3</x-fwb.kbd>
    <x-fwb.kbd>F4</x-fwb.kbd>
    <x-fwb.kbd>F5</x-fwb.kbd>
    <x-fwb.kbd>F6</x-fwb.kbd>
    <x-fwb.kbd>F7</x-fwb.kbd>
    <x-fwb.kbd>F8</x-fwb.kbd>
    <x-fwb.kbd>F9</x-fwb.kbd>
    <x-fwb.kbd>F10</x-fwb.kbd>
    <x-fwb.kbd>F11</x-fwb.kbd>
    <x-fwb.kbd>F12</x-fwb.kbd>
</div>

Component Properties

KBD x-fwb.kbd

Prop Type Default Description
size string default Size of the KBD element. Options: sm, default, lg.
arrow bool false Enable inline-flex layout for arrow key icons with SVG content.