htmx 4.0 is under construction — migration guide

Keyboard Shortcuts

Bind keyboard shortcuts to interactive elements

Basic usage

On the client, add a keyboard event to hx-trigger alongside click.

<button hx-trigger="click, keyup[altKey&&shiftKey&&key=='D'] from:body"
        hx-post="/doit">
  Do It! (Alt+Shift+D)
</button>
  • hx-trigger accepts multiple events separated by commas.
  • keyup[altKey&&shiftKey&&key=='D'] uses an event filter to match only the Alt+Shift+D combination.
  • from:body makes the shortcut global: the listener is on the <body>, not the button itself.

On the server, respond with the result content:

<span>Done!</span>

Notes

Keyboard event properties

The filter expression inside [...] has access to the raw KeyboardEvent properties: key, code, altKey, ctrlKey, shiftKey, and metaKey. Combine them with && and || to match any shortcut.

For details on key values, see Keyboard Events on javascript.info.