Location Picker
Address search input with an open suggestion list and a static map preview blueprint showing the resolved pin and coordinates.
Address search input with an open suggestion list and a static map preview blueprint showing the resolved pin and coordinates.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Location Picker is the address-to-coordinates entry card, a search input pre-filled with 340 Pine Street and a static suggestion list open below it showing three results: 340 Pine Street Suite 800 in San Francisco, 340 Pine Avenue in Long Beach, and 340 Pine Street in Philadelphia, each with its full secondary line and the first row highlighted as selected. A small map preview blueprint sits beside the list, a bg-muted/40 grid with a center MapPin and a dashed crosshair ring, resolved to 37.7914 N, 122.4027 W.
Suggestions are one array. The preview panel is static markup showing the first result pinned; the coordinates chip below it is what confirms the resolve to the user before they save.
Reach for this block inside forms and onboarding flows wherever a user must specify a physical location. Wire the input to your geocoding endpoint and swap the static preview for a live pin once a suggestion is chosen.
A natural flow around it on an Application Pro page:
Before
After
One strong use is workspace location setup during onboarding. Other picker surfaces:
Tip: show the resolved coordinates under the preview map before saving; it is the fastest way for users to catch an autocomplete mismatch.