Autocomplete Search
Inputs
Source and install need .
pnpm dlx shadcn@latest add @assembli/address-autocompleteAddress Autocomplete
A Places-style address field. Typing the street loads suggestions from your own async search (debounced, stale requests aborted) with matched words in bold and a Powered by slot. Picking one opens an editable breakdown with labels that follow the country, a drawn location pin and focus on the apartment line. Manual entry is one arrow away, and every input has the right autocomplete token.
Props
Other props pass through to the root element.
search*
(query: string, signal: AbortSignal) => Promise<AddressSuggestion[]>
Looks addresses up as the visitor types (debounced, and aborted when a newer query starts).
resolve
(suggestion: AddressSuggestion, signal: AbortSignal) => Promise<Address>
Turns a picked suggestion into a full address when suggestions don't carry one.
onChange
(address: Address | null, source: AddressSource | null) => void
Fires with the structured address whenever it changes, or
nullonce cleared.defaultValue
Address
Starts filled in and expanded, as if picked from a suggestion.
label
React.ReactNode
Default
"Address"hint
React.ReactNode
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the street field
aria-invalid.placeholder
string
Default
"Start typing your street address"attribution
React.ReactNode
Shown at the foot of the suggestions, such as "Powered by …". Most address APIs require it.
countries
AddressCountry[]
Default
COUNTRIESCountries in the country select.
defaultCountry
string
Default
"US"Country for a manual address before one is chosen.
section
"shipping" | "billing"
Prefixes every autocomplete token, so a page can hold a shipping and a billing address.
minLength
number
Default
3Characters typed before suggestions load. Defaults to 3.
debounce
number
Default
200Delay before
searchruns, in ms. Defaults to 200.name
string
Names every input
name.line1,name.city… so the address posts with a surrounding form.required
boolean
disabled
boolean
| Description | |||
|---|---|---|---|
| search* | (query: string, signal: AbortSignal) => Promise<AddressSuggestion[]> | – | Looks addresses up as the visitor types (debounced, and aborted when a newer query starts). |
| resolve | (suggestion: AddressSuggestion, signal: AbortSignal) => Promise<Address> | – | Turns a picked suggestion into a full address when suggestions don't carry one. |
| onChange | (address: Address | null, source: AddressSource | null) => void | – | Fires with the structured address whenever it changes, or |
| defaultValue | Address | – | Starts filled in and expanded, as if picked from a suggestion. |
| label | React.ReactNode | "Address" | |
| hint | React.ReactNode | – | |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the street field |
| placeholder | string | "Start typing your street address" | |
| attribution | React.ReactNode | – | Shown at the foot of the suggestions, such as "Powered by …". Most address APIs require it. |
| countries | AddressCountry[] | COUNTRIES | Countries in the country select. |
| defaultCountry | string | "US" | Country for a manual address before one is chosen. |
| section | "shipping" | "billing" | – | Prefixes every autocomplete token, so a page can hold a shipping and a billing address. |
| minLength | number | 3 | Characters typed before suggestions load. Defaults to 3. |
| debounce | number | 200 | Delay before |
| name | string | – | Names every input |
| required | boolean | – | |
| disabled | boolean | – |
