Search/

Keyboard

Last modified:

Use to style keyboard keys when providing hot-key or keyboard support hint text.

Example of Keyboard - default

<p class="bc-hint">
  Use <span class="bc-kbd">Tab</span> or <span class="bc-kbd">←</span><span class="bc-kbd">→</span> to navigate
</p>

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

The <kbd> element represents a single key on a physical keyboard.

Design

Last modified:

Used kbd element to show text of user input from a keyboard.

Accessibility

Last modified:

Only provide keys that are actually present on standardized keyboards.

When showing OS-specific keys remember to show all supported operating systems, eg. ⌘ (Apple’s ‘Command’) and Ctrl (Control) keys.

Interested in the history? Check out this other good Wikipedia article on the Control character (as distinct from Control key).

Rationale

Last modified:

Use the HTML5 <kbd> element.

See also

Last modified: