SearchOverlay

Implemented

Full-screen search overlay — large input + recent searches + suggested categories + trending events. Controlled (open/onOpenChange); full-viewport overlay at all breakpoints. ADR-071: the panel's field form owns the single focus-within ring (the input previously had no indicator at all).

Categoryorganisms

Sourcecomponents/organisms/SearchOverlay/SearchOverlay.tsx

AI HintUse for complex UI sections. Compose molecules and atoms into page sections.

Full-screen search overlay — large input + recent searches + suggested categories + trending events.

SearchOverlay

organisms

Full-screen search overlay — large input + recent searches + suggested categories + trending events.

Props

Preview

SearchOverlay

Prop

Type

Required

Default

Description

open

boolean

Required

—

Whether the overlay is currently visible (controlled).

onOpenChange

(open: boolean) => void

Required

—

Called with the next open state — overlay requests closure (ESC, scrim, submit).

onSearch

(query: string) => void

Required

—

Called with the trimmed query when the user submits or picks a suggestion/recent chip.

recentSearches

string[]

Optional

[]

Recent search strings rendered as chips below the results.

suggestions

SearchOverlayCategory[]

Optional

[]

Suggested events grouped by category, filtered client-side as the user types.

placeholder

string

Optional

'Search events, venues, artists…'

Placeholder for the search input.

emptyMessage

string

Optional

'No matches yet — try a different keyword.'

Message rendered when no suggestion matches the query.

ariaLabel

string

Optional

'Search overlay'

Accessible name for the dialog itself (and the results listbox, suffixed "results").

inputAriaLabel

string

Optional

placeholder

Accessible name for the search input (combobox). Falls back to placeholder — never hardcoded English.

recentLabel

string

Optional

'Recent'

Heading above the recent-searches chips — pass the localized string from the consumer.

className

string

Optional

—

Extra classes appended to the overlay root.

id

string

Optional

'sov-<useId>'

Base id for the overlay — derived (sov-*) when omitted.

Quick use:<SearchOverlay />

Accessibility

ARIA roledialog

Usage

Import

tsxSnippet

import { SearchOverlay } from "@epasslive/design-system"

Example 1

tsxSnippet

<SearchOverlay open onOpenChange={...} onSearch={...} />

Example 2

tsxSnippet

<SearchOverlay open onOpenChange={...} onSearch={...} recentSearches={["..."]} suggestions={[{ category: "...", events: [...] }]} recentLabel="Récents" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources