SearchOverlay

organisms

Full-screen search overlay — large input + recent searches + suggested categories + trending events. Cmd+K shortcut to open. Mobile: takes full viewport.

ARIA Role: dialog

Demo

Demo for SearchOverlay (organisms)

Full-screen search overlay — large input + recent searches + suggested categories + trending events. Cmd+K shortcut to open. Mobile: takes full viewport.

Props

Prop	Type	Required	Default
`open`	`boolean`	Yes	`—`
`onOpenChange`	`(open: boolean) => void`	Yes	`—`
`onSearch`	`(query: string) => void`	Yes	`—`

TypeScript Interface

interface SearchOverlayProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSearch: (query: string) => void;
  recentSearches?: string[];
  suggestions?: { category: string; events: { id: string; title: string; href: string }[] }[];
}

Assertions (NASA Rule 5)

[type]open, onOpenChange, onSearch all required (controlled)(NASA Rule 5)
[aria]role='dialog' aria-modal='true' combobox pattern; ⌘K shortcut(WAI-ARIA Combobox 1.2 + Dialog)

Usage

Import

import { Searchoverlay } from '@epasslive/design-system'

Basic

<Searchoverlay />

With Variants

<Searchoverlay variant="primary" size="md" />