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. It's commonly used in documentation, tutorials, and help content to show which keys users should press. The styling typically resembles physical keyboard keys with a slightly raised appearance.
Semantic Meaning
The keyboard input element has specific semantic meaning:
- Indicates text representing user keyboard input
- Screen readers may announce it differently to convey it's a key or command
- Distinguishes key presses from regular prose or code
- Can be nested to represent key combinations
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
- Command-line instructions: Show keys to press in terminal contexts
When NOT to Use
- Code: Use
<code>for programming code - Sample output: Use
<samp>for program output - Variables: Use
<var>for mathematical or programming variables
Variants
Default
Displays as a key-like element with monospace font, background, border, and shadow.
Press Enter to submit the form.
Live Examples
Single Keys
Press Tab to move to the next field.
Press Esc to close the dialog.
Press Space to toggle the checkbox.
Key Combinations
Press Ctrl + S to save.
Press Cmd + Shift + P to open the command palette.
Press Alt + F4 to close the window.
Platform-Specific Keys
macOS: Cmd + C to copy
Windows/Linux: Ctrl + C to copy
Arrow Keys
Use ArrowUp and ArrowDown to navigate the list.
Or with symbols: ↑ ↓ ← →
Function Keys
Press F1 for help.
Press F5 to refresh.
Press F11 for fullscreen.
Nested kbd Elements
Nest <kbd> elements to show key sequences.
In Vim, type :wq to save and quit.
Common Shortcuts Table
| Action | Shortcut |
|---|---|
| Copy | Ctrl + C |
| Paste | Ctrl + V |
| Undo | Ctrl + Z |
| Redo | Ctrl + Y |
| Find | Ctrl + F |
Terminal Input
Type ls -la and press Enter to list files.
CSS Properties
The <kbd> element is styled via the code element styles in Vanilla Breeze. Key styling properties include:
| Property | Value |
|---|---|
font-family |
var(--font-mono) |
font-size |
0.85em |
background |
var(--color-surface-raised) |
padding |
var(--size-3xs) var(--size-2xs) |
border |
var(--border-width-thin) solid var(--color-border) |
border-radius |
var(--radius-s) |
box-shadow |
Subtle shadow for key-like appearance |
Accessibility
- Screen readers: Will read the content, helping users understand keyboard shortcuts
- Visual distinction: Key-like styling helps sighted users identify keyboard input
- Plus signs: Use the plus symbol (+) between keys in combinations for clarity
- Descriptive text: Provide context around keyboard shortcuts (e.g., "Press X to do Y")
Best Practices
- Document keyboard shortcuts in a discoverable location
- Provide alternative methods for actions with keyboard shortcuts
- Use consistent terminology for keys (e.g., "Enter" not "Return" for consistency)