Address Input

Address search field built on Input with Mapbox-powered autocomplete suggestions.

Overview

AddressInput is the shared address search field used when the user should search for and select a real address suggestion rather than type freeform location text only.

It composes:

Input
Mapbox address-autofill search
a floating suggestions list

Use it when selecting an address should also produce structured address metadata such as city, state, postcode, and coordinates.

Basic Usage

<AddressInput
  label="Address"
  value={address}
  onChange={setAddress}
  onSelectSuggestion={(result) => {
    setValue('address', result.address_1 ?? '');
    setValue('city', result.city ?? '');
    setValue('state', result.state ?? '');
    setValue('postcode', result.postcode ?? '');
  }}
/>

What `onSelectSuggestion` Returns

When a suggestion is chosen, onSelectSuggestion receives structured data including:

coordinates
address_1
address_2
city
state
postcode
country

That makes AddressInput a good fit for forms that need both a visible address string and separate normalized address fields.

Props

Prop	Type	Default	Description
`value`	`string`	—	Current address text.
`onChange`	`(value: string) => void`	—	Called when the text input changes.
`onSelectSuggestion`	`(result) => void`	—	Called with structured address data when a suggestion is selected.
`error`	`string`	—	Field error text.
`label`	`string`	—	Field label.
`placeholder`	`string`	`'Enter address...'`	Placeholder text.
`className`	`string`	—	Additional input classes.
`labelIcon`	`IconName`	—	Optional icon next to the label.

Brand Dashboard Usage

Pattern	Path	Notes
Brand intake address entry	`fsai/apps/brand-dashboard/src/pages/GettingStarted/BrandIntake/BrandIntake.tsx`	Full form field with structured address capture.
Shared details-grid address editing	`fsai/packages/shared-ui/src/components/DetailsGrid/DetailsGrid.components.tsx`	Used to populate multiple address fields from a suggestion.
Map search and pin placement	`fsai/packages/shared-ui/src/modules/locations/components/LocationsMap/LocationsMap.tsx`	Address search drives map positioning and selection.

Important Cautions

AddressInput depends on the Mapbox address-autofill integration and MAPBOX_PUBLIC_TOKEN.
Free typing and selecting a suggestion are not the same thing. If the form needs structured address data, rely on onSelectSuggestion.
Suggestions are debounced and fetched asynchronously, so treat this as a search field, not a static input.

Guidelines

Do use AddressInput when address selection should also fill structured address fields or coordinates
Do use plain Input instead when you only need an arbitrary text location field
Do handle onSelectSuggestion if the surrounding form depends on normalized address data
Don't assume typed text alone has been validated as a real address