kbd

The kbd element represents user keyboard input, displaying keys and key combinations in a distinctive style that resembles physical keyboard keys.

Description

The <kbd> element represents keyboard input from the user. VB styles it with a raised appearance resembling physical keyboard keys — monospace font, border, and a subtle box-shadow. It is part of VB's code-family styling alongside <code>, <samp>, and <var>.

When to Use

  • Keyboard shortcuts: Document hotkeys and shortcut combinations
  • Form instructions: Explain keyboard navigation
  • Application tutorials: Guide users through keyboard interactions
  • Accessibility documentation: Document keyboard-accessible controls

When NOT to Use

  • For programming code — use <code>
  • For program output — use <samp>
  • For variables — use <var>

Examples

CSS Reference

The border and box-shadow create a 3D key-cap appearance. VB also sets translate: no on <kbd> via the i18n system to prevent machine translation from breaking key names.

Accessibility

  • Some screen readers announce <kbd> content as keyboard input
  • Use the plus symbol (+) between keys in combinations for clarity
  • Provide context: "Press X to do Y"
  • Document shortcuts in a discoverable location
  • Always provide alternative methods for keyboard-shortcut-only actions

Components Using kbd

VB web components that display keyboard shortcuts use <kbd> styling:

Related

  • <code> — For programming code (shared var(--font-mono))
  • <samp> — For sample program output
  • <var> — For variables in code or math
  • Internationalization — Translation protection for code-family elements
↑