Quick start

Add StreetKit to an address input

Add the hosted widget script, attach it to an existing input, and handle the selected address object in JavaScript.

Basic install

<script src="https://streetkit.smp.kiwi/widget/streetkit.js"></script>
<input id="address" autocomplete="off">

<script>
  StreetKit.init({
    input: "#address",
    indexBaseUrl: "https://index.streetkit.smp.kiwi/v1",
    onSelect(address) {
      console.log(address);
    }
  });
</script>

Integration notes

input can be a CSS selector or an HTMLInputElement.
indexBaseUrl points to the hosted or self-hosted static index.
onSelect receives the structured address object after the user chooses a result.
The widget only needs the typed address query to fetch static index shards.

Local fixture index

The local demo uses /index/v1, a small fixture index included with the site. It is useful for development, but it is not the full LINZ-backed production index.

StreetKit.init({
  input: "#address",
  indexBaseUrl: "/index/v1",
  onSelect(address) {
    console.log(address.display.label);
  }
});