Keyboard shortcut list

How to use it

Use on a help page or help panel to list an application's keyboard shortcuts, grouped by task. Replace the rows with your own actions and keys, and write keys the way they appear on the keyboard (Ctrl on Windows and Linux, ⌘ on macOS -- show both if you support both). Keep it to reference material; shortcuts should never be the only way to do something.

Accessibility

A real <table> with a <caption> and column headers (<th scope="col">) and row headers (<th scope="row">), so each key combination is announced with the action it performs. Every key is a <kbd> nested inside an outer <kbd> for the whole combination, as the HTML spec recommends, and the "+" between keys is real text so the combination is read as "Ctrl + S". Nothing is focusable except the scroll wrapper's native behaviour. Body text #0f172a on white is 17.9:1, keys #0f172a on #f1f5f9 are 16.3:1, and headers #334155 on #f8fafc are 9.9:1.

Source (copy-ready)

Copy code

<div class="dcl-kbdlist">
  <table class="dcl-kbdlist__table">
    <caption class="dcl-kbdlist__caption">Editor keyboard shortcuts</caption>
    <thead>
      <tr><th scope="col" class="dcl-kbdlist__head">Action</th><th scope="col" class="dcl-kbdlist__head">Keys</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row" class="dcl-kbdlist__action">Save document</th><td class="dcl-kbdlist__keys"><kbd class="dcl-kbdlist__combo"><kbd class="dcl-kbdlist__key">Ctrl</kbd> + <kbd class="dcl-kbdlist__key">S</kbd></kbd></td></tr>
      <tr><th scope="row" class="dcl-kbdlist__action">Find in document</th><td class="dcl-kbdlist__keys"><kbd class="dcl-kbdlist__combo"><kbd class="dcl-kbdlist__key">Ctrl</kbd> + <kbd class="dcl-kbdlist__key">F</kbd></kbd></td></tr>
      <tr><th scope="row" class="dcl-kbdlist__action">Undo last change</th><td class="dcl-kbdlist__keys"><kbd class="dcl-kbdlist__combo"><kbd class="dcl-kbdlist__key">Ctrl</kbd> + <kbd class="dcl-kbdlist__key">Z</kbd></kbd></td></tr>
      <tr><th scope="row" class="dcl-kbdlist__action">Open command palette</th><td class="dcl-kbdlist__keys"><kbd class="dcl-kbdlist__combo"><kbd class="dcl-kbdlist__key">Ctrl</kbd> + <kbd class="dcl-kbdlist__key">Shift</kbd> + <kbd class="dcl-kbdlist__key">P</kbd></kbd></td></tr>
      <tr><th scope="row" class="dcl-kbdlist__action">Close panel</th><td class="dcl-kbdlist__keys"><kbd class="dcl-kbdlist__combo"><kbd class="dcl-kbdlist__key">Esc</kbd></kbd></td></tr>
    </tbody>
  </table>
</div>
<style>
.dcl-kbdlist { max-width: 32rem; overflow-x: auto; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-kbdlist__table { width: 100%; border-collapse: collapse; }
.dcl-kbdlist__caption { padding-bottom: 0.5rem; text-align: left; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-kbdlist__head { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; border-bottom: 1px solid #cbd5e1; color: #334155; background-color: #f8fafc; }
.dcl-kbdlist__action { padding: 0.5rem 0.75rem; text-align: left; font-weight: 400; border-bottom: 1px solid #e2e8f0; color: #0f172a; background-color: #ffffff; }
.dcl-kbdlist__keys { padding: 0.5rem 0.75rem; white-space: nowrap; border-bottom: 1px solid #e2e8f0; color: #0f172a; background-color: #ffffff; }
.dcl-kbdlist__combo { font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-kbdlist__key { display: inline-block; min-width: 1.5rem; padding: 0.0625rem 0.375rem; border: 1px solid #94a3b8; border-bottom-width: 2px; border-radius: 0.25rem; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; color: #0f172a; background-color: #f1f5f9; }
</style>