SearchModal

Full-featured search modal with keyboard navigation and customizable results display

Basic Search Modal

Simple search modal with placeholder text

Start typing to search

Use ↑ ↓ to navigate, Enter to select

Show Code

Search Modal with Results

Search modal displaying search results

Button Component

Action

Interactive buttons with multiple variants

Input Component

Input

Text input fields for user data

Show Code

Loading Search Modal

Search modal with loading state

Searching...

Show Code

Customized Search Modal

Search modal with custom settings

Start typing to search

Show Code

Usage Notes

  • Includes full keyboard navigation (↑↓ to navigate, Enter to select, Esc to close)
  • Auto-focuses search input when opened for better UX
  • Supports SearchResult interface with id, title, description, url, category
  • Loading state shows spinner and prevents interactions
  • maxResults controls how many results are visible (with overflow indicator)
  • Keyboard shortcuts are hidden on mobile for better responsive design
  • Built on top of Modal component for consistent behavior
  • Automatically clears search query when closed