shadcn.io is not affiliated with official shadcn/ui
Address Autocomplete Dialog Block for Radix UI
A meal-kit delivery page with its address dialog shown open: typing filters eight addresses of an invented town into an inline list you can arrow through, a choice fills four editable fields, and Enter it manually offers the same four, empty.
Installation
Overview
Help people find their address instead of typing all of it, with this address dialog for React with Radix UI. It opens from the Delivery page of Hampertide, a meal-kit service: the page's header holds an outline Change address Button, and the page, a Deliver to row with the address in force and a week of delivery slots, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The dialog starts with one search Input. As you type, the addresses that hold every word you typed, from eight on invented streets in the invented town of Harrowmere, list under it in a Listbox that is part of the dialog, not a popup, with a count under the field that is spoken once you stop typing. Down arrow takes you into the list and Enter chooses; Enter in the field takes the top match. A choice swaps the space for four fields, street, flat, town and postcode, filled and still editable, and Enter it manually offers the same four empty. Use this address, the only Shine Button, checks them and reprints the Deliver to row. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog, with the same search and the same state. For deliveries, checkouts, profiles and any form that takes an address.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Change address button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same AddressSearch component and share the block's state, so a search typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Why is the list inline and not a popup?
A popup that opens from inside a modal fights the modal's focus trap, and on some libraries it can't be reached at all, so the suggestions are part of the dialog's own content: a fixed-height area under the field, the same on every base and port. It shows the matches, a dashed empty state that names what you typed, or a hint before you start, so nothing moves when the results change, and the dialog is as tall when you have typed as when you haven't.
How does the search work, and how do I wire a real one?
matchesOf keeps the addresses whose whole line contains every word you typed, in any case and any order, from ADDRESSES, a typed list of eight in the file; nothing is looked up. In your app call your address service as the query changes (with a short delay), put the results in the list in the same shape (a value, a label and its parts) and keep the empty state for a search that finds nothing. Keep the fields: a service never knows every flat, so a person must be able to edit what it gave back.
What does Use this address check?
In the search panel, that you chose a match or opted to type, with a sentence that says which. In the fields panel, a street, a town and a postcode that has the shape of one, each with its own sentence under its field; focus goes to the first problem and the dialog stays open. The flat is optional. Once a message shows, it follows your typing and clears when the field is right. The Deliver to row behind the dialog then prints the new address, and the polite status message says nothing was saved.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts in the search field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Change address. The trigger is the button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The list is a labelled listbox that Down arrow reaches from the field, with Up and Down to move and Enter to choose; the count is spoken after a pause, never on every key, through one polite status message. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Use this address on top, and the search, the list and the fields scroll above them. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.