pnpm add @wandercom/design-system-web

The SearchBarFallback renders static empty or preselected states that visually match the SearchBar on desktop and mobile. The mobile fallback is 48px tall in every context, matching the live mobile trigger. Wrap the real SearchBar in a Suspense boundary with the fallback to avoid layout shift during loading. By default the composed fallback establishes a 65rem (1040px) query container and switches layout from its own available width. Pass inheritContainer when its matching SearchBar follows an ancestor container.

Pass the live location label as locationLabel when it differs from locationPlaceholder, so both versions reserve the same text width.

import { SearchBarFallback } from '@wandercom/design-system-web/ui/search-bar-fallback';
import { SearchBar } from '@wandercom/design-system-web/ui/search-bar';
import { Suspense } from 'react';

export function Example() {
  return (
    <Suspense fallback={<SearchBarFallback />}>
      <SearchBar />
    </Suspense>
  );
}

The example renders live and fallback versions of both empty and preselected states at the same available width.

Accepts all standard div element props.

SearchBarFallbackDesktop and SearchBarFallbackMobile are lower-level exports. When rendered independently, place them beneath an @container ancestor if their responsive visibility should adapt to a parent width.

Accepts all standard div element props.

Accepts all standard div element props.

All visible text can be customized via props to support localization:

<SearchBarFallback
  locationPlaceholder="Où ?"
  datesPlaceholder="Quand ?"
  guestsPlaceholder="Combien ?"
  searchLabel="Rechercher"
  mobilePlaceholder="Commencer la recherche"
/>

This component renders static HTML with no client-side JavaScript, hooks, or state. It works as a React Server Component. At container widths of 65rem (1040px) and wider, it shows a pill-shaped bar with location, dates, and guests placeholders plus a search button. Below that width, it shows a centered pill with a search icon and placeholder text. All copy is customizable via props with sensible English defaults.