<kbd>: The Keyboard Input element #

::: section-content The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <kbd> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Please press Ctrl + Shift + R to re-render an MDN page.

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; color: #333; display: inline-block; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

<kbd> may be nested in various combinations with the <samp> (Sample Output) element to represent various forms of input or output based on visual cues. :::

Attributes #

::: section-content This element only includes the global attributes. :::

Usage notes #

::: section-content Other elements can be used in tandem with <kbd> to represent more specific scenarios:

• Nesting a <kbd> element within another <kbd> element represents an actual key or other unit of input as a portion of a larger input. See Representing keystrokes within an input below.
• Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system. See Echoed input, below, for an example.
• Nesting a <samp> element inside a <kbd> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under Representing onscreen input options below.

::: {#sect1 .notecard .note} Note: You can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your CSS. ::: :::

Examples #

Basic example #

::: section-content ::: code-example [html]{.language-name}

<p>
  Use the command <kbd>help mycommand</kbd> to view documentation for the
  command "mycommand".
</p>

:::

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Representing keystrokes within an input #

::: section-content To describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>.

Unstyled #

First, let's look at what this looks like as just plain HTML.

HTML #

::: code-example [html]{.language-name}

<p>
  You can also create a new document using the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>

:::

This wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence.

::: {#sect3 .notecard .note} Note: You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <kbd> element. In other words, simplifying this to just <kbd>Ctrl</kbd>+<kbd>N</kbd> would be perfectly valid.

Note: Depending on your style sheet, though, you may find it useful to do this kind of nesting. :::

Result #

The output looks like this without a style sheet applied:

::: {#sect4 .code-example} ::: iframe ::: :::

With custom styles #

We can make more sense of this by adding some CSS:

CSS #

We add a new selector for nested <kbd> elements, kbd>kbd, which we can apply when rendering keyboard keys:

::: code-example [css]{.language-name}

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

:::

HTML #

Then we update the HTML to use this class on the keys in the output to be presented:

::: code-example [html]{.language-name}

<p>
  You can also create a new document by pressing the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>

:::

Result #

The result is just what we want!

::: {#sect5 .code-example} ::: iframe ::: ::: :::

Echoed input #

::: section-content Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system.

::: code-example [html]{.language-name}

<p>
  If a syntax error occurs, the tool will output the initial command you typed
  for your review:
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

:::

Result #

::: {#sect6 .code-example} ::: iframe ::: ::: :::

Representing onscreen input options #

::: section-content Nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:

::: code-example [html]{.language-name}

<p>
  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</p>

<p>
  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
  you've entered the name of the new file.
</p>

:::

This does some interesting nesting. For the menu option description, the entire input is enclosed in a <kbd> element. Then, inside that, both the menu and menu item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget.

Result #

::: {#sect7 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

HTML Standard
[# the-kbd-element]{.small}

:::

Browser compatibility #

::: _table #

      Desktop                                                          Mobile                                           

      Chrome    Edge   Firefox             Internet   Opera   Safari   WebView   Chrome    Firefox   Opera     Safari   Samsung
                                           Explorer                    Android   Android   for       Android   on IOS   Internet
                                                                                           Android                      

kbd 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0

                       Before Firefox 4,                                                                                
                       creating a \<kbd\>                                                                               
                       element incorrectly                                                                              
                       resulted in an                                                                                   
                       `HTMLSpanElement`                                                                                
                       object, instead of                                                                               
                       the expected                                                                                     
                       `HTMLElement`.                                                                                   

:::

See also #

::: section-content

• <code> :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd{._attribution-link} :::