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

# Add Address Autofill to an HTML form (Custom Elements)

This example implements Address Autofill to automatically add suggestions to an existing HTML form. It uses the HTML custom element [`<mapbox-address-autofill>`](https://docs.mapbox.com/mapbox-search-js/api/web/autofill/#mapboxaddressautofill) which is available from the `MapboxAddressAutofill` class. For other ways to use Address Autofill, see [Using Address Autofill](https://docs.mapbox.com/mapbox-search-js/guides/autofill/web/#using-address-autofill) from the Quick start guide.

Using the `<mapbox-address-autofill>` HTML custom element makes it easy to add Address Autofill functionality without writing JavaScript and works well for simple applications. To use JavaScript to setup Address Autofill - see the [Address Autofill example](https://docs.mapbox.com/mapbox-search-js/example/simple-autofill)

Address Autofill works with [browser HTML autocomplete tags](https://web.dev/learn/forms/autofill/) and form inputs must have `autocomplete` attributes declared for Address Autofill to work.

**JavaScript**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add Address Autofill to an HTML form (Custom Elements)</title>
<!-- Default styling. Feel free to remove! -->
<link href="https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css" rel="stylesheet">
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.6.0/web.js"></script>
</head>
<body>
<form class="prose flex flex--column">
    <h3>Shipping</h3>

    <mapbox-address-autofill access-token="YOUR_MAPBOX_ACCESS_TOKEN">
        <input class="input mb12 bg-white" name="address" autocomplete="shipping address-line1" placeholder="Address">
    </mapbox-address-autofill>

    <input class="input mb12 bg-white" name="apartment" autocomplete="shipping address-line2" placeholder="Apartment">
    <div class="flex">
        <input class="input mb12 bg-white" name="city" autocomplete="shipping address-level2" placeholder="City">
        <input class="input mb12 ml6 bg-white" name="state" autocomplete="shipping address-level1" placeholder="State">
        <input class="input mb12 ml6 bg-white" autocomplete="shipping postal-code" placeholder="ZIP / Postcode">
    </div>

    <h3>Billing</h3>

    <mapbox-address-autofill access-token="YOUR_MAPBOX_ACCESS_TOKEN">
        <input class="input mb12 bg-white" name="address" autocomplete="billing address-line1" placeholder="Address">
    </mapbox-address-autofill>

    <input class="input mb12 bg-white" name="apartment" autocomplete="billing address-line2" placeholder="Apartment">
    <div class="flex">
        <input class="input mb12 bg-white" name="city" autocomplete="billing address-level2" placeholder="City">
        <input class="input mb12 ml6 bg-white" name="state" autocomplete="billing address-level1" placeholder="State">
        <input class="input mb12 ml6 bg-white" name="postcode" autocomplete="billing postal-code" placeholder="ZIP / Postcode">
    </div>
</form>

<!--  No Javascript needed with HTML custom elements
    <script></script>
-->

</body>
</html>
```