Skip to content
Components

LocationInput

Location autocomplete input with a dropdown of suggestions for city or address search. The geocoder is injected: pass search (query to suggestions) and resolve (suggestion to full Location). Queries are debounced by 300ms and start at two characters.

Usage

import { Location, LocationInput, LocationMode, LocationResolve, LocationSearch, LocationSuggestion } from "@instruments/materia-ui/components/location-input";

Best practices

  • search and resolve are required - the component has no built-in geocoder. Wrap your provider (Google Places, Mapbox, your own API) in those two functions.

  • search may reject; the dropdown then shows no suggestions. Return null from resolve to ignore a selection.

  • Pick mode="city" vs "address" to scope the geocoding; drive it controlled via the Location value + onChange (which also fires on clear).

Props

PropTypeDefaultDescription
sizeResponsiveValue<LocationInputSize>"xl"

Input size - a single token or a per-breakpoint object like { base: "sm", md: "lg" }. Matches DEFAULT_INPUT_SIZE so LocationInput lines up with Input/Button at the same size.

hasErrorboolean

Show error styling

search(required)LocationSearch

Geocoder search, supplied by the application. Required: the component ships no geocoding of its own.

resolve(required)LocationResolve

Resolves a chosen suggestion to a full Location, supplied by the application. Required.

classNamestring | undefined

Additional CSS classes for the wrapper

disabledboolean | undefined

Disabled state

idstring | undefined

Input ID for label association

modeLocationMode | undefined

Search mode: "city" (default) or "address". Passed to search.

onChange(required)(location: Location | null) => void

Called with the chosen location, or null when cleared or edited.

placeholderstring | undefined

Input placeholder text

valueLocation | null | undefined

Currently selected location (controlled)

testIdstring

Also exports

  • interfaceLocation
  • typeLocationMode
  • typeLocationResolve
  • typeLocationSearch
  • interfaceLocationSuggestion

Composition

Builds on

Button, Icon, MenuItem