## Address Autocomplete (S—181)

Type an address and pick a suggestion; the street, city, postcode and country fields fill in with a staggered reveal.

- URL: https://sundaeui.dev/components/address-autocomplete
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/address-autocomplete.json`
- Tags: form, autocomplete, address, shipping, places, checkout

Suggestions show the matched part in bold with the locality underneath. Choosing one expands the rest of the form and fills each field one after another, so people can see what changed and fix anything.
“Enter manually” skips the lookup. Bring your own provider through the search prop.

### Usage

```tsx
import { AddressAutocomplete } from '@/components/sundae/address-autocomplete'

<AddressAutocomplete />
```

### Props

- `search` (`(q: string) => Promise<Address[]>`, required): Lookup provider.
- `onChange` (`(a: Address) => void`): Called with the structured address.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Checkout, sign-up, delivery and billing forms.

### When not to use

- Countries your provider does not cover well: default to manual.

### Accessibility

- Combobox with listbox suggestions; filled fields are real labelled inputs.
- A polite message announces that fields were filled.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Move
- Enter: Choose
- Esc: Close