Stay Search Bar

Horizontal search bar for accommodation / stay search. Composes QueryCombobox (destination), DateRangePicker (check-in/out), and GuestPickerPanel (guests). Emits a StaySearchValue with ISO date strings.

core/stay-search-bar

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Full search bar with destination autocomplete.

Stay search bar

Stay search flow

Full-page composition: search bar + results list. Use this as the visual reference for stay search UIs.

3 stays found in Bali

Sorted by recommended

Hotel

The Palms Boutique Hotel

Seminyak, Bali

9.2Exceptional· 1,840 reviews

Free cancellation before 48 hours
Breakfast included
Free airport shuttle

Free cancellation before Mar 12

$189 / night

$567 total for 3 nights

Resort

Alaya Resort Ubud

Ubud, Bali

9.6Exceptional· 742 reviews

Infinity pool with rice terrace views
Daily yoga sessions

Non-refundable

$320 / night

$960 total for 3 nights

API Reference

Prop	Type	Default	Description
`value`req	`StaySearchValue`	—	Controlled search state with ISO date fields.
`onChange`req	`(value: StaySearchValue) => void`	—	Called on any field change.
`onSearch`	`(value: StaySearchValue) => void`	—	Called when the user clicks Search.
`suggestions`	`QuerySuggestion[]`	—	Destination autocomplete suggestions.
`suggestionsLoading`	`boolean`	—	Shows suggestion loading skeleton.
`guestConfig`	`GuestPickerConfig`	—	Occupancy constraints passed to GuestPicker.
`minDate`	`string`	—	Minimum selectable date (ISO). Defaults to today.
`maxDate`	`string`	—	Maximum selectable date (ISO).
`minNights`	`number`	—	Minimum nights between check-in and check-out.
`maxNights`	`number`	—	Maximum nights between check-in and check-out.
`disabled`	`boolean`	—	Disables all fields.