Back to DocsRecipe

Keyboard Form Navigation

Ship a form where power users never touch the mouse. Tab, Enter, Escape, and arrow keys drive every interaction — save, cancel, and field traversal all work from the keyboard.

Ingredients

  • onKeyDowncapture phase on the form element
  • e.keyswitch on Enter, Escape, Tab, ArrowUp, ArrowDown
  • e.preventDefault()suppress default browser behavior where needed
  • useReffocus ring management for field-to-field jumps

Pattern

  1. 1Wrap all inputs in a single <form> with an onKeyDown handler.
  2. 2Enter submits. Escape fires a cancel callback. Tab moves forward; Shift+Tab moves backward.
  3. 3Arrow keys inside select lists or radio groups cycle options without opening a dropdown.
  4. 4Ctrl+S triggers save. Announce the shortcut via a subtle aria-label on the form.
All Recipes