Keyboard

Represents text from an input device

Demo

Press ⇧⌘T to close window

Ctrl + N

API

Tag

Name		Type		Content
`kbd`		Native element (documentation)		Text or other `kbd` elements

Guidelines

Formatting

Mdash doesn't define a format for keyboard shortcuts because there are many popular ways to do it. Shortcuts are also platform-specific and so it is recommended to follow the format used by the user's OS. There are several ways to detect OS using the Navigator object.

Windows seems to use a format that includes + characters to indicate a combination of key presses, like Ctrl + C.

macOS seems to use a sequence of characters to indicate a combination of key presses, like ⌘C. Symbols are used for modifier keys (see below).

Be careful how you show the + character. Users can misinterpret it as representing a required key.

macOS Modifier Key Symbols

To create macOS keyboard shortcuts, copy these symbols:

⌘ - Command key
⇧ - Shift key
⌥ - Option/Alt key
⌃ - Control key
⇪ - Caps Lock key

There are no accessibility recommendations for the keyboard element.