Stays Stay Search

Stay Search

The search that starts a stay: where to, check-in to check-out, Search. One bar on a desk, a stacked card on a phone.

Preview

Usage

tsx

import { StaySearch } from "zostel-ui";

<StaySearch
  suggestions={[{ value: "manali", label: "Manali", category: "Places" }, …]}
  from={from}
  to={to}
  onDatesChange={({ from, to }) => setDates({ from, to })}
  disabledDays={{ before: today }}
  onSearch={({ place, text, from, to }) => go(place?.value ?? text, from, to)}
  note="111 Zostels in 80+ destinations."
/>

Props

Prop	Type	Default	Description
`suggestions`	`{ value; label; category? }[]`	—	What “Where to?” suggests as you type, grouped by category (places, stays, trips).
`from / to`	`Date`	—	The stay’s dates (controlled).
`onDatesChange`	`({ from, to }) => void`	—	Called on every pick in the calendar.
`onSearch`	`({ place?, text, from?, to? }) => void`	—	Called on Search, and on Enter in “Where to?” when no suggestion is highlighted: the suggestion picked (if any), what was typed, the dates.
`disabledDays`	`Matcher \| Matcher[]`	—	Days that can’t be booked, e.g. { before: today }.
`placeholder`	`string`	`"Search a place, a stay or a trip"`	“Where to?”’s hint.
`note`	`ReactNode`	—	A line on the Beige strip under the bar.
`searchLabel`	`string`	`"Search"`	The button’s word.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

suggestions

Type: { value; label; category? }[]

Default: —

What “Where to?” suggests as you type, grouped by category (places, stays, trips).

from / to

Type: Date

Default: —

The stay’s dates (controlled).

onDatesChange

Type: ({ from, to }) => void

Default: —

Called on every pick in the calendar.

onSearch

Type: ({ place?, text, from?, to? }) => void

Default: —

Called on Search, and on Enter in “Where to?” when no suggestion is highlighted: the suggestion picked (if any), what was typed, the dates.

disabledDays

Type: Matcher | Matcher[]

Default: —

Days that can’t be booked, e.g. { before: today }.

placeholder

Type: string

Default: "Search a place, a stay or a trip"

“Where to?”’s hint.

note

Type: ReactNode

Default: —

A line on the Beige strip under the bar.

searchLabel

Type: string

Default: "Search"

The button’s word.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

On zostel.com

The home page’s first screen. “Where to?” is the kit’s SearchBar in its bare look (type, the arrow keys, Enter), the dates are the DateRangePicker in its split look (a sheet on a phone), and the bar is a form with role="search", so Enter searches from anywhere in it.