Location Search

Pro

“Where to?” search with pickup and destination fields, saved places, recents and live suggestions with the match in bold. Picking a place fills its field, and a line joins both ends once set.

Preview

Installation

npx @lumioui/cli add pro/location-search

Usage

import { LocationSearch } from "@/components/ui/location-search/location-search";
<LocationSearch />

Examples

Delivery address

Choose where dinner goes.

Ride

Destination search in a ride app.

API reference

Prop Type Default
mode "route" | "single"

"route" = pickup + destination pair with swap; "single" = one field. Default "route".

 "route"
from string

Controlled pickup text.

 —
defaultFrom string

Uncontrolled initial pickup text. Default "".

 ""
onFromChange (text: string) => void —
to string

Controlled destination text.

 —
defaultTo string

Uncontrolled initial destination text. Default "".

 ""
onToChange (text: string) => void —
fromPlaceholder string

Default "Current location".

 "Current location"
toPlaceholder string

Default "Destination".

 "Destination"
places PlaceSuggestion[]

Searchable places — filtered while typing.

 []
recent PlaceSuggestion[]

Shown before typing, under "Recent". Also searched.

 []
saved SavedPlace[]

Chips row above the list.

 []
onSelect
(place: PlaceSuggestion … (place: PlaceSuggestion, field: LocationField) => void

A place was picked for a field. A pick that completes the route resolves after the hold.

 —
onSavedPress (saved: SavedPlace) => void

A saved chip was tapped (fires before onSelect when it has a place).

 —
onSwap () => void

Swap tapped — values have already swapped (uncontrolled) or swap them yourself.

 —
onSetOnMap (field: LocationField) => void

Shows a "Set location on map" row.

 —
onUseCurrentLocation () => void

Shows a "Use current location" row (single mode).

 —
filter
(place: PlaceSuggestion … (place: PlaceSuggestion, query: string) => boolean

Custom matcher. Default: case-insensitive substring of title or subtitle.

 defaultFilter
autoFocus boolean

Focus the destination field on mount. Default false.

 false
recentTitle string

Section header above recents. Default "Recent".

 "Recent"
className string —