# Address autocomplete/suggestions reduce typing

- **Pattern:** `ab-001103` (`ecommerce-cart-ux.address-forms.autocomplete`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001103
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001103)

## Why it matters

Typing a full address on mobile is the single slowest part of checkout. Without autocomplete, shoppers hunt-and-peck through street, city, state, and zip on a cramped keyboard, with every typo risking a shipping failure downstream. Browser-level `autocomplete` attributes alone let the OS fill saved addresses in one tap — skipping them is a pure self-own. Richer autocomplete via Google Places or Smarty cuts typing by roughly 20% and catches undeliverable addresses before the order is submitted.

## Severity rationale

High because missing autocomplete adds measurable friction to every address entry and drives mobile-checkout abandonment.

## Remediation

At minimum, add correct `autocomplete` attributes to every address field in `src/components/AddressForm.tsx` — the browser already has the data, you just have to let it fill. For richer UX, integrate Google Places or a comparable API behind a debounced input.

```tsx
<input autoComplete="address-line1" />
<input autoComplete="address-level2" />
<input autoComplete="address-level1" />
<input autoComplete="postal-code" />
<select autoComplete="country" />
```

## Detection

- **ID:** `autocomplete`
- **Severity:** `high`
- **What to look for:** Count all address input fields in the checkout flow (street, city, state, zip/postal, country). For the primary address field (street line 1), check for autocomplete integration by searching for: Google Places API, Mapbox, Smarty (SmartyStreets), PostalCodes API, or HTML `autocomplete` attributes. List all address-related API keys or SDK imports found. Count how many address fields auto-populate when a suggestion is selected (at least 3 of 5 fields should populate: street, city, state, zip, country).
- **Pass criteria:** At least 1 address suggestion mechanism is present — either an autocomplete API integration or proper HTML `autocomplete` attributes on at least 3 of 5 address fields. Selecting a suggestion populates at least 3 address fields automatically. Report: "Address form has X fields, Y have autocomplete attributes. API integration: Z."
- **Fail criteria:** All address fields are plain text inputs with no `autocomplete` HTML attribute and no third-party suggestion API.
- **Skip (N/A) when:** Address is not collected in checkout (e.g., digital-only products, no physical shipping).
- **Detail on fail:** Example: `"Found 5 address fields in src/components/AddressForm.tsx. 0 of 5 have HTML autocomplete attributes. No Google Places or similar API integration found. Users must type full address manually."`
- **Cross-reference:** For international address format handling, see the international-support check below. For API key security of address suggestion services, the Security Headers audit covers environment variable handling.
- **Remediation:** Add autocomplete integration in your address form at `src/components/AddressForm.tsx`. At minimum, add HTML `autocomplete` attributes:

  ```tsx
  // src/components/AddressForm.tsx — minimum: HTML autocomplete attributes
  <input name="street" autoComplete="address-line1" />
  <input name="city" autoComplete="address-level2" />
  <input name="state" autoComplete="address-level1" />
  <input name="zip" autoComplete="postal-code" />
  <select name="country" autoComplete="country" />
  ```

  For a richer experience, integrate Google Places API:

  ```tsx
  // src/components/AddressAutocomplete.tsx
  import usePlacesAutocomplete, { getGeocode } from 'use-places-autocomplete'

  function AddressAutocomplete({ onSelect }) {
    const { suggestions, setValue } = usePlacesAutocomplete()
    // ... render suggestions dropdown
  }
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001103