Address Autocomplete
Type an address and pick a suggestion; the street, city, postcode and country fields fill in with a staggered reveal.
address-autocomplete.tsxaddress-autocomplete.css
Checking access…
Overview
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.
When to use
- Checkout, sign-up, delivery and billing forms.
When not to use
- Countries your provider does not cover well: default to manual.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/address-autocomplete.json$
npx shadcn@latest add https://sundaeui.dev/r/address-autocomplete.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/address-autocomplete.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/address-autocomplete.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy address-autocomplete.tsx and address-autocomplete.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { AddressAutocomplete } from '@/components/sundae/address-autocomplete'
<AddressAutocomplete />Props
| Prop | Type | Default |
|---|---|---|
search*Lookup provider. | (q: string) => Promise<Address[]> | — |
onChangeCalled with the structured address. | (a: Address) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-adr; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ↑ / ↓
- Move
- Enter
- Choose
- Esc
- Close
FAQ
- Is Address Autocomplete free?
- Address Autocomplete is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Address Autocomplete?
- Run npx shadcn@latest add https://sundaeui.dev/r/address-autocomplete.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Address Autocomplete support keyboard and screen readers?
- Combobox with listbox suggestions; filled fields are real labelled inputs. A polite message announces that fields were filled.
- Does Address Autocomplete respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →Radio Cards
Forms · RefinedOTP Field
Forms · Refined- Pro
Drop Zone
Forms · Refined Combobox
Forms · Understated- Pro
Onboarding Flow
Forms · Refined - Pro
Wheel Picker
Forms · Refined