Skip to main content

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> which is available from the MapboxAddressAutofill class. For other ways to use Address Autofill, see 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

Address Autofill works with browser HTML autocomplete tags and form inputs must have autocomplete attributes declared for Address Autofill to work.

<!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.5.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>
Was this example helpful?