kbd

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:

• <short-cuts> — Keyboard shortcuts reference modal
• <command-palette> — Shows shortcut hints alongside commands

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