Beta
Mapbox Search JS

Address Autofill

Private beta for Mapbox Search JS

Mapbox Search JS is in private beta. During the private 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.

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>
);
}

AddressAutofillProps

Instance Members