Skip to main content

Address Autofill

Public beta for Mapbox Search JS

Mapbox Search JS is in public beta. During the public beta phase, frameworks may be subject to potential changes as they stabilize.

tutorial
Add Address Autofill in a React app

Create a React web app that uses autocomplete and Address Autofill.

chevron-right

AddressAutofill

<AddressAutofill> is a React component that wraps an address <input> element with intelligent, location-aware autocomplete functionality.

To use this element, you must have a Mapbox access token.

This component must be a descendant of a <form>, and the form must have inputs with proper HTML autocomplete attributes. If your application works with browser autofill, you may already have this functionality.

Internally, this wraps the <mapbox-address-autofill> element.

Parameters

Example

export function Component() {
const [value, setValue] = React.useState('');
return (
<form>
<AddressAutofill accessToken={<your access token here>}>
<input
autoComplete="shipping address-line1"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</AddressAutofill>
</form>
);
}
Was this section on AddressAutofill helpful?

AddressAutofillProps

Instance Members

Was this section on AddressAutofillProps helpful?
Was this section on AddressAutofillRefType helpful?
Was this page helpful?