View as Markdown

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.

Loading... 
<div>
    <twig:Kbd>Shift</twig:Kbd>
    <twig:Kbd>Ctrl</twig:Kbd>
    <twig:Kbd>Tab</twig:Kbd>
    <twig:Kbd>Caps Lock</twig:Kbd>
    <twig:Kbd>Esc</twig:Kbd>
    <twig:Kbd>Spacebar</twig:Kbd>
    <twig:Kbd>Enter</twig:Kbd>
</div>

Installation

php bin/console ux:install kbd --kit flowbite-4

Install the following Composer dependencies:

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your app:

{# @block content The keyboard key text (e.g., &quot;Ctrl&quot;, &quot;⌘&quot;, &quot;Enter&quot;). #}
&lt;kbd
    class=&quot;{{ (&#039;inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/kbd&gt;

Usage

<twig:Kbd>Ctrl</twig:Kbd>

Examples

Arrow keys

Use this example to show arrow keys inside the KBD styled element.

Loading... 
<div>
    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-up-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key up</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-down-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key down</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-left-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key left</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-right-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key right</span>
    </twig:Kbd>
</div>

API Reference

<twig:Kbd>

Block Description
content The keyboard key text (e.g., "Ctrl", "⌘", "Enter").