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.

100%

<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 twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

Install the following front-end dependencies:

npm install flowbite
# ...or with Symfony AssetMapper
php bin/console importmap:require flowbite

Copy the following file(s) into your app:

templates/components/Kbd.html.twig

{# @block content The keyboard key text (e.g., "Ctrl", "⌘", "Enter"). #}
<kbd
    {{ attributes.defaults({
        class: 'inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</kbd>

Usage

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

Examples

Arrow keys

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

100%

<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").