Transport Search Bar

Horizontal search bar for the Transport pillar. Composes two QueryCombobox fields (origin + destination), a date picker that switches between single (one-way) and range (return trip), and a PartyPicker with passenger-specific labels. An optional ToggleGroup mode selector renders below the bar.

core/transport-search-bar

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

One-way with mode selector, and return trip (date range) variant.

One-way (single date) · with mode selector

Return trip (date range)

API Reference

Prop	Type	Default	Description
`value`req	`TransportSearchValue`	—	Controlled search state.
`onChange`req	`(value: TransportSearchValue) => void`	—	Called on any field change.
`onSearch`	`(value: TransportSearchValue) => void`	—	Called when the user clicks Search.
`originSuggestions`	`QuerySuggestion[]`	—	Autocomplete suggestions for the origin field.
`originSuggestionsLoading`	`boolean`	—	Shows origin suggestion loading skeleton.
`onOriginSelect`	`(ref: LocationRef) => void`	—	Called when the user selects an origin suggestion.
`destinationSuggestions`	`QuerySuggestion[]`	—	Autocomplete suggestions for the destination field.
`destinationSuggestionsLoading`	`boolean`	—	Shows destination suggestion loading skeleton.
`onDestinationSelect`	`(ref: LocationRef) => void`	—	Called when the user selects a destination suggestion.
`modes`	`TransportMode[]`	—	Which mode chips to render below the bar. Omit to hide the mode selector.
`passengerCategories`	`PartyCategory[]`	—	Passenger categories. Defaults to Adults / Children / Infants.
`minDate`	`string`	—	Minimum selectable date (ISO). Defaults to today.
`maxDate`	`string`	—	Maximum selectable date (ISO).
`disabled`	`boolean`	—	Disables all fields.