HeroSearch

molecules

Large prominent search bar inside hero — 56px height, 2-segment input (what + where), date picker, search button. Mobile: stacks vertically.

ARIA Role: search

Demo

Demo for HeroSearch (molecules)

Large prominent search bar inside hero — 56px height, 2-segment input (what + where), date picker, search button. Mobile: stacks vertically.

Props

Prop	Type	Required	Default	Description
`onSearch`	`(params: SearchParams) => void`	Yes	`—`
`ariaLabel`	`string`	Yes	`—`

TypeScript Interface

interface HeroSearchProps {
  onSearch: (params: { query: string; location: string; dateRange?: { from: string; to: string } }) => void;
  defaultQuery?: string;
  defaultLocation?: string;
  popularSearches?: string[];
  ariaLabel: string;
}

Assertions (NASA Rule 5)

[type]onSearch and ariaLabel required(NASA Rule 5)
[aria]role='search'; each input has its own label; submit announces results(WCAG 1.3.1)

Usage

Import

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

Basic

<Herosearch />

With Variants

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