Booking Search Bar

Production-ready unified accommodation search bar — destination text input, date range picker, guest picker, and optional advanced filters panel. Composes DateRangePicker, GuestPicker, and AdvancedFiltersPanel. Available in horizontal (unified bar) and stacked layouts.

core/booking-search-bar

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Horizontal bar with advanced filters, and stacked layout.

Horizontal (default)

Stacked

API Reference

Prop	Type	Default	Description
`value`req	`BookingSearchValue`	—	Controlled { destination, dates, guests } value.
`onChange`req	`(value: BookingSearchValue) => void`	—	Called when any field changes.
`onSearch`	`(value: BookingSearchValue) => void`	—	Called when the user clicks the Search button.
`layout`	`"horizontal" \| "stacked"`	`"horizontal"`	Visual layout variant.
`guestConfig`	`GuestPickerConfig`	—	Occupancy constraints passed to the guest picker.
`dateConfig`	`BookingDateConfig`	—	Date picker constraints: minDate, maxDate, minNights, maxNights, blockedDates.
`showAdvancedFilters`	`boolean`	—	Shows the Filters button and wires up the AdvancedFiltersPanel.
`filtersContent`	`React.ReactNode`	—	Content to render inside the filters panel.
`filtersActiveCount`	`number`	—	Active filter count badge shown on the Filters button and in the panel.
`onFiltersApply`	`() => void`	—	Called when the user applies filters.
`onFiltersReset`	`() => void`	—	Called when the user resets filters.
`destinationPlaceholder`	`string`	`"Where are you going?"`	Placeholder for the destination input.
`disabled`	`boolean`	—	Disables all fields.
`analytics`	`BookingSearchAnalytics`	—	Analytics callbacks from useBookingSearchAnalytics. When provided, key events (search submit, filter apply/reset) are forwarded to your adapter.