Widget

Embed a region picker in your form

Autocomplete Indonesian provinces, regencies, districts, villages, and postal codes with a drop-in picker for checkout pages, CRM apps, logistics forms, and internal tools.

Live Demo

Try the picker

Try “banyumudal”, “moga pemalang”, “52354”, or a region code.

Selected JSON

Event detail

{
  "label": "Pilih wilayah dari demo"
}

Install

Add the widget

Paste this into a normal HTML page.

<script src="https://peta.kues.us/embed/region-picker.js"></script>

<div
  data-peta-kuesus-picker
  data-placeholder="Cari wilayah..."
  data-postal-code="true"
></div>

Events

Handle selection

The picker emits peta-kuesus:select with the selected autocomplete item.

document.addEventListener('peta-kuesus:select', (event) => {
  console.log(event.detail);
});

Testing

Local and cross-site usage

Use a local static server

For local HTML testing, serve the page instead of opening it directly with file://. From the folder containing your test HTML, run:

python3 -m http.server 8080

Then open http://localhost:8080/Untitled-6.html.

Public autocomplete

/autocomplete is public by design for embedded forms. It uses no credentials, returns public region data only, and remains rate-limited. Other API endpoints keep stricter cross-origin rules.