---
title: Kbd
description: Keyboard key indicator
visibility: guest
draft: false
---

# Kbd

**Kbd** stands for the HTML `<kbd>` element — short for "keyboard input" — and is the standard semantic tag for representing user keystrokes (W3C HTML spec). The `<x-wirekit::kbd>` component wraps that element into a small, raised "keycap" — a `<kbd>` tag with a monospace font, a subtle border, a tinted background, and a rounded corner. Use it whenever you describe a keyboard input the user is meant to press.

Two common patterns:

- **Inline shortcut hints** — sprinkle a single `<x-wirekit::kbd>` into running text to label a key (e.g. `press <x-wirekit::kbd size="sm">Esc</x-wirekit::kbd> to close`). The component sits inline with the surrounding font flow and adapts its size relative to the parent typography.
- **Key combinations** — wrap multiple `<x-wirekit::kbd>` in a `<x-wirekit::row gap="xs">` to render shortcut sequences like `<x-wirekit::kbd size="sm">⌘</x-wirekit::kbd> <x-wirekit::kbd size="sm">K</x-wirekit::kbd>`. Each key gets its own `<kbd>` element so screen readers announce them as discrete inputs rather than concatenating them into a single token.

The component renders the semantic HTML5 `<kbd>` element — assistive technology announces it as "keyboard input" automatically, so authors don't need to add `aria-label` for the indicator role itself. For platform-specific glyphs (`⌘` Cmd on macOS, `Ctrl` on Windows / Linux, `⇧` Shift, `⌥` Opt, `⌃` Ctrl-on-Mac, `↵` Enter), prefer the symbol on macOS / iOS surfaces and the spelled-out label everywhere else — or detect the platform and swap server-side.

## Live Sandbox

This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.

:::preview{title="Sandbox" sandbox="kbd" props='{"body":"Cmd"}'}
<x-wirekit::kbd>Cmd</x-wirekit::kbd>
:::

## Basic Usage

:::preview{title="Single key"}
<x-wirekit::kbd>K</x-wirekit::kbd>
:::

## Key Combinations

:::preview{title="Keyboard shortcut"}
<x-wirekit::row gap="xs" align="center">
    <x-wirekit::kbd>⌘</x-wirekit::kbd>
    <x-wirekit::kbd>K</x-wirekit::kbd>
</x-wirekit::row>
:::

## Sizes

:::preview{title="Kbd sizes"}
<x-wirekit::row gap="md" align="center">
    <x-wirekit::kbd size="sm">Esc</x-wirekit::kbd>
    <x-wirekit::kbd size="md">Enter</x-wirekit::kbd>
    <x-wirekit::kbd size="lg">Space</x-wirekit::kbd>
</x-wirekit::row>
:::

## In Context

:::preview{title="Shortcut hint in text"}
<x-wirekit::text>
    Press <x-wirekit::kbd size="sm">⌘</x-wirekit::kbd> <x-wirekit::kbd size="sm">K</x-wirekit::kbd> to open the command palette.
</x-wirekit::text>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | string | `'md'` | Size: `sm`, `md`, `lg` |
| `scope` | string\|null | `null` | Scoped personalization name |

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

## Pitfalls

- **Don't combine `<x-wirekit::kbd>` with text shortcuts inside `<button>`.** The `<kbd>` element renders inline-block; mixed inside a button it picks up the button's font and loses its monospace identity. Render the shortcut outside the button.

## Design Tokens

| Token | Used for |
| --- | --- |
| `--font-wk-mono` | Monospace font family |
| `--color-wk-border` | Key border |
| `--color-wk-bg-muted` | Key background |
| `--color-wk-text` | Key text color |
| `--radius-wk-sm` | Border radius |
| `--border-wk-width` | Border width |