Back to docs

Recipe: Search input patterns

Three production-ready search input variants with debounce, clear, and keyboard shortcuts.

Variant A — Icon + clear

Variant B — Keyboard shortcut

⌘K

Variant C — Minimal underline

Implementation notes

  • • Debounce input with a 300ms timer before firing search
  • • Clear button resets state and refocuses the input
  • • ⌘K variant listens for global keydown to open a command palette
  • • All variants use native HTML — zero dependencies