Location Selector

A UK location picker: address search plus an optional draggable map pin (Mapbox), returning lon/lat, a formatted address and an OS grid reference — plus the movement-form field → modal flow.

$bunx shadcn@latest add @nx-ui/location-selector
Registry item
Installs withbuttondialoginputlabelmapboxmapbox-overridesos-grid-referencespinnertabsutils

LocationField → LocationPickerModal

The movement-form flow: a slim placeholder field that opens the picker modal, then swaps to a selected-location card (pin square, label, secondary line) whose Change affordance reopens it. Source picks from grouped sites and stockpiles; destination searches a permitted-facility directory, with a Map & address escape hatch on both.

Source

Or drop a pin from the map tab.

Destination

Permit numbers travel with the pick as a badge.

Field states and tones

Placeholder vs selected, and the source (accent) / destination (green) / neutral (navy) pin-square tones. The selected card is the whole trigger — click anywhere on it to change.

Search only

The map-free variant — a debounced address search over the injected geocoder, with a coordinates and OS-grid-reference read-out. Try “Bristol”, “Leeds” or a postcode like “SE1”.

Tip: postcodes work well.

Nothing selected yet.

Search + map pin

The full hybrid: search an address or click/drag the pin on the map. Pin moves reverse-geocode through the same injected function. The demo uses a canned UK geocoder — no live API calls.

Tip: postcodes work well.

Search an address or place a pin on the map. Drag to fine-tune.

Loading map…

Nothing selected yet.