# Location Search

“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.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/location-search
```

## Import

```tsx
import { LocationSearch } from "@/components/ui/location-search/location-search";
```

## Variants

- `delivery-address` — Delivery address: `npx @lumioui/cli add pro/location-search-delivery-address`
- `ride` — Ride: `npx @lumioui/cli add pro/location-search-ride`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `mode?` | `"route" | "single"` | "route" = pickup + destination pair with swap; "single" = one field. Default "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". |
| `toPlaceholder?` | `string` | Default "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, 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, query: string) => boolean` | Custom matcher. Default: case-insensitive substring of title or subtitle. |
| `autoFocus?` | `boolean` | Focus the destination field on mount. Default false. |
| `recentTitle?` | `string` | Section header above recents. Default "Recent". |
| `className?` | `string` | — |

## Icons rendered

- `home` — /icons.html?i=home
- `x` — /icons.html?i=x
- `search` — /icons.html?i=search
- `pointer` — /icons.html?i=pointer
- `map-pin` — /icons.html?i=map-pin

Source: https://lumioui.com/components/location-search