Documentation v1.0.0

Keyboard Input

---
title: Keyboard Input
description: Semantically represent user input with the `<kbd>` element and Bootstrap’s styles.
toc: true
---

## Example

Use the `<kbd>` element to display keyboard input or shortcuts. Bootstrap automatically styles it to look like a physical keyboard key.

<Example html={`<p class="text-muted">Use <kbd>Ctrl + B</kbd> <kbd>Ctrl + K</kbd> to open the command palette.</p>`} />

<Example html={`<p class="text-muted">Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>`} />

### In buttons or instructions

You can include `<kbd>` inside buttons or instructional text to show user actions clearly.

<Example
  html={`<p class="text-muted">To save your work, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<button class="btn btn-outline-secondary me-2">Accept<kbd class="ms-2">⏎</kbd></button>
<button class="btn btn-outline-secondary">Cancel<kbd class="ms-2">Esc</kbd></button>`}
/>

### Inside code blocks

Use `<kbd>` within `<code>` elements to show specific input sequences as part of code examples.

<Example html={`<code>Press <kbd>Esc</kbd> to exit insert mode</code>`} />

### Multiple keys

Display multiple key combinations by wrapping each key in its own `<kbd>` tag.

<Example html={`<kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>`} />

### Inside a search input

Use a `<kbd>` element to visually indicate a keyboard shortcut (like ⌘K or Ctrl+K) that opens a command menu or search dialog. This is a common UX pattern in modern web apps to guide power users.

<Callout type="warning">
  Note that this is only a visual hint—additional JavaScript is required to implement the actual shortcut behavior.
</Callout>

Semantically represent user input with the `<kbd>` element and Bootstrap’s styles.

Example

Use the <kbd> element to display keyboard input or shortcuts. Bootstrap automatically styles it to look like a physical keyboard key.

Use Ctrl + B Ctrl + K to open the command palette.

<p class="text-muted">Use <kbd>Ctrl + B</kbd> <kbd>Ctrl + K</kbd> to open the command palette.</p>

Press Ctrl + C to copy.

<p class="text-muted">Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

In buttons or instructions

You can include <kbd> inside buttons or instructional text to show user actions clearly.

To save your work, press Ctrl + S.

<p class="text-muted">To save your work, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<button class="btn btn-outline-secondary me-2">Accept<kbd class="ms-2">⏎</kbd></button>
<button class="btn btn-outline-secondary">Cancel<kbd class="ms-2">Esc</kbd></button>

Inside code blocks

Use <kbd> within <code> elements to show specific input sequences as part of code examples.

Press Esc to exit insert mode

<code>Press <kbd>Esc</kbd> to exit insert mode</code>

Multiple keys

Display multiple key combinations by wrapping each key in its own <kbd> tag.

Shift + Alt + Delete

<kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>

Inside a search input

Use a <kbd> element to visually indicate a keyboard shortcut (like ⌘K or Ctrl+K) that opens a command menu or search dialog. This is a common UX pattern in modern web apps to guide power users.

Note that this is only a visual hint—additional JavaScript is required to implement the actual shortcut behavior.

⌘ K

<div class="position-relative" style="max-width: 300px;">
<input type="text" class="form-control" placeholder="Search..." />
<kbd class="position-absolute top-50 end-0 translate-middle-y me-2">⌘ K</kbd>
</div>

On this page