DEVELOPER WIDGETS

Country picker

A searchable country field for addresses, billing details and account profiles.

Working controls. Ready to try. Examples on orig.ooo share one IP-country lookup. Language and country decision elements return data and callbacks; their output panels below are demonstration UI. Connecting to the lookup service… CDN URLs & setup instructions →

Where this fits

  • Address and billing forms
  • Country preferences in account profiles
  • Country defaults visitors can correct

Read the full integration reference → · All widgets

TRY IT. READ THE CODE.

Try the widget. Copy its code.

Accent colour
01

Country picker

Help people find their country without scrolling through a long list. Search by name or ISO code and submit a standard country value.

LIVE EXAMPLE

Address forms · Billing · Account profiles

FORM VALUE
No selection yet.

Detects an approximate country on the live service. Visitors can always change it.

HTML
<script type="module" src="https://orig.ooo/cdn/widgets/1.4.7/widgets.js"></script>

<form id="address-form">
  <origooo-country-picker
    name="country"
    label="Country"
    placeholder="Search countries"
    auto-detect
    key="og_pub_2b113c8b0d21011497e7db566da928dd4c23d4404b4bbc5e"
    endpoint="https://orig.ooo/v1/ip/me"
    required>
  </origooo-country-picker>
</form>

Load the module once. The hosted module loads its dependencies automatically. Self-host the complete kit.

AUTOMATIC IP DETECTION

Detected from your actual IP.

Request an approximate country from an active dataset. Existing manual choices stay in place. On orig.ooo this uses one lookup through the site’s origin-restricted publishable widget key.

No IP request made.

Estimated countryNot checked

Country and language suggestions are approximate. Saved visitor preferences take priority.

MAKE IT YOURS

Your form. Your design.

Country and calling-code controls submit values through new FormData(form) or their value property. Decision blocks expose result, data-* fields and onResolve callbacks. See the language preselection and country rules guides for complete examples.

CSS
origooo-country-picker,
origooo-phone-picker {
  --origooo-accent: #0055ef;
  --origooo-font-size: 18px;
  --origooo-border: #7187a6;
  --origooo-radius: 8px;
}

Use ::part(input), ::part(option) and ::part(label) for more precise styling.

Add detection to a country control.

This sample uses the orig.ooo publishable demonstration key. For another website, create your own publishable key and allow its exact origin. Detection requires an active dataset and uses account credits.

<origooo-country-picker
  name="country" auto-detect
  key="og_pub_2b113c8b0d21011497e7db566da928dd4c23d4404b4bbc5e"
  endpoint="https://orig.ooo/v1/ip/me">
</origooo-country-picker>

Keep secret server keys out of browser code. Manual selections take priority when the network response arrives.

YOUR NEXT BUILD STARTS HERE

Get your free API key.

1,000 monthly credits. No credit card required.

Account services are not connected in this preview. Explore the dashboard or download the implementation from your workspace.
Read the integration guide

Production accounts require verified email. Google OAuth and Paddle need deployment credentials.