> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/ja/llms.txt)

# React Quickstart

# Address Autofill - React Quickstart

**Address Autofill** is a Mapbox Search JS feature that makes filling out postal addresses on web forms faster, easier, and more accurate. It presents the user with suggested address matches after they begin typing in your form. Users can click a suggested address and instantly fill in the remaining inputs (city, state, postal code, etc).

Address autofill allows users to enter their information with fewer keystrokes and provide more accurate information.

![autofill-and-minimap](https://docs.mapbox.com/mapbox-search-js/ja/assets/ideal-img/autofill-and-minimap.7aa18ef.480.png)

This Quickstart Guide will help you get started with Address Autofill using the [Mapbox Search JS React framework](https://docs.mapbox.com/mapbox-search-js/ja/guides/#search-js-react).

To use Address Autofill in a website (without React), see the [Address Autofill Web Quickstart](https://docs.mapbox.com/mapbox-search-js/ja/guides/autofill/web/).

## Prerequisites

To use Mapbox Search JS, you need to have a Mapbox [access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/).

### Your default public token

You can use your *default public token* to get started with the code snippets in this guide.

To get your default public token, login to [account.mapbox.com](https://account.mapbox.com) and scroll down to the **Access Tokens** section.

This access token associates your search requests with a Mapbox account for billing. For more information on creating and using access tokens, see our [token management documentation](https://docs.mapbox.com/accounts/guides/tokens/).

## Installation

Install the NPM package.

```bash
npm install --save @mapbox/search-js-react
```

Once installed, the [`AddressAutofill`](https://docs.mapbox.com/mapbox-search-js/ja/api/react/autofill/#addressautofill) component and the [`useConfirmAddress`](https://docs.mapbox.com/mapbox-search-js/ja/api/react/autofill/#useconfirmaddress) hook will be available for import into your React app.

## Use the `AddressAutofill` component

The `<AddressAutofill>` component adds interactive search and autofill to your address form. It must be a descendant of a `<form>` element must wrap `<input>` elements with appropriate [autocomplete attributes](#autocomplete-attributes).

```jsx
import { AddressAutofill } from '@mapbox/search-js-react';

const MyAddressForm = () => {
  return (
    <form>
      <AddressAutofill
        accessToken='YOUR_MAPBOX_ACCESS_TOKEN'
      >
        <input type="text" name="address-1" autocomplete="address-line1" />
        <input type="text" name="address-2" autocomplete="address-line2" />
        <input type="text" name="city" autocomplete="address-level2" />
        <input type="text" name="state" autocomplete="address-level1" />
        <input type="text" name="zip" autocomplete="postal-code" />
      </AddressAutofill>
    </form>
  )
}

export default MyAddressForm

```

> **Related content (example): [Autofill Checkout (React) example](https://docs.mapbox.com/mapbox-search-js/ja/example/autofill-checkout-react/)**
> 
> Try a full address autofill workflow in React, including address confirmation and minimap.

## Address Confirmation

Address confirmation lets users match their address against our comprehensive database and presents a confirmation dialog. This workflow is usually triggered during form submission, providing a higher quality address to match the user's input if one can be found.

![did-you-mean](https://docs.mapbox.com/mapbox-search-js/ja/assets/ideal-img/did-you-mean.b7032d3.480.png)

With the `minimap` option, a small map image is presented with a pin for visual confirmation of an address. The user can move the pin to provide details about the physical delivery location that matches the address.

Address Confirmation for a form in a React app is implemented with the `useConfirmAddress` hook. When called, it returns a `ref` object which should be assigned to the address form, along with a function `showConfirm()` which will show the confirmation UI.

`showConfirm` returns an object with the `type` property set to either `'change'`, `'nochange'`, or `'cancel'` based on the user's actions. You can then continue with form submission using the original address or the suggested address.

`'change'` indicates that the autofill service found a better match and the user selected it for use. In this case, a `feature` property is also included in the returned object which includes the suggested match. `'nochange'` indicates that the user chose to use the address they provided instead of the suggested address. `'cancel'` indicates that the user closed the confirmation dialog.

```jsx
import React from 'react';
import {AddressAutofill, useConfirmAddress } from '@mapbox/search-js-react';

const MyAddressForm = () => {
  const { formRef, showConfirm } = useConfirmAddress({
    footer: 'My custom footer'
  });

  const handleSubmit = React.useCallback(async () => {
    const result = await showConfirm();

    // submit the original address if the user did not select a better match
    if (result.type === 'nochange') submitForm();
    // submit the address data from the better match chosen by the user
    if (result.type === 'change') {
      submitFormWithChanges(result.feature)
    };
  }, [showConfirm]);

  return (
    <div>
      <form
        ref={formRef}
        onSubmit={handleSubmit}
      >
        <AddressAutofill
          accessToken='YOUR_MAPBOX_ACCESS_TOKEN'
        >
          <input type="text" name="address-1" autocomplete="address-line1" />
          <input type="text" name="address-2" autocomplete="address-line2" />
          <input type="text" name="city" autocomplete="address-level2" />
          <input type="text" name="state" autocomplete="address-level1" />
          <input type="text" name="zip" autocomplete="postal-code" />
        <AddressAutofill>
      </form>
    </div>
  );
}

export default MyAddressForm

```

> **Related content (example): [Autofill Checkout (React) example](https://docs.mapbox.com/mapbox-search-js/ja/example/autofill-checkout-react/)**
> 
> Try a full address autofill workflow in React, including address confirmation and minimap.

## Autocomplete Attributes

Address Autofill requires HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) tags, a standard browser feature. Google Chrome, Mozilla Firefox, and Safari use `autocomplete` to autofill addresses and credit cards. You may already have autocomplete tags.

You can test this on your website with using the JavaScript Console. After opening the Console, run the following command:

```javascript
document.querySelector('[autocomplete~="street-address"], [autocomplete~="address-line1"]') != null
```

The output will read `true` if autocomplete tags are present.

### Add autocomplete tags

If autocomplete tags are not present, you'll have to add them to each HTML input you'd like to autofill.

Here are common autocomplete tags for addresses. This is a [non-exhaustive list](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).

| Autocomplete tag | Description | Example |
| --- | --- | --- |
| `autocomplete="address-line1"` | The first line of an address, usually includes the street number and street. | 740 15th St NW |
| `autocomplete="address-line2"` | The second line of an address, usually an apartment number. | Apartment 700 |
| `autocomplete="address-level1"` | The **least** specific administrative level. In the United States, this is the state or territory. | District of Columbia |
| `autocomplete="address-level2"` | The second **least** specific administrative level. In the United States, this is the city. | Washington |
| `autocomplete="address-level3"` | In countries with more than two administrative levels. |  |
| `autocomplete="postal-code"` | The postal code of the administrative level. | 20005 |
| `autocomplete="country"` | The standardized country code. | us |
| `autocomplete="country-name"` | The country name. *Note: These are non-standardized.* | United States |

## Additional Resources

Quickstart Guides are also available for the other main features of Mapbox Search JS:

-   Search Box - [Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/search/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/ja/guides/search/react/)
-   Geocoding - [Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/geocoding/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/ja/guides/geocoding/react/)

Address Autofill can also be implemented with a custom UI by using the [Mapbox Search JS Core Framework](https://docs.mapbox.com/mapbox-search-js/ja/guides/#search-js-core).