All docschevron-rightMapbox Search JSchevron-rightarrow-leftReact Referencechevron-rightAddress Autofill

Address Autofill

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

AddressAutofillProps

Instance Members