Country and Subdivision Selection, Simplified
See how it works
Why Developers Choose CountriesDB?
Framework Libraries
Seamless integration made easy
Integrate easily with React, Angular, Vue, Python, Java, and more.
Flexible API
Built for your needs
Customize and scale with ease using our adaptable API.
Global Translations
Pre-translated for worldwide use
Supports the most popular languages for seamless global integration.
Always Up-to-Date
Accurate and reliable data
Stay current with the latest country details and subdivisions, updated regularly.
Features
<!-- Include the widget script with your public key -->
<script src="https://unpkg.com/@countriesdb/widget@latest/dist/index.js?public_key=YOUR_PUBLIC_KEY"></script>
<!-- Country select with data-name -->
<select class="country-selection" data-name="country1"></select>
<!-- Subdivision select linked to country -->
<select class="subdivision-selection" data-country="country1"></select>Just Plug & Play Into Your Form
Add simple HTML attributes and watch select fields auto-populate with country and subdivision data in user language automatically.
Geolocation Included
Automatically detects and preselects the user's country and subdivision based on their IP address. No configuration needed - it just works out of the box.
Multi-Language Support
Automatically displays country and subdivision names in the user's browser language. Supports 50+ languages with comprehensive translation coverage for seamless global integration.
Mission-Critical Data Consistency
ISO 3166 compliant data that's always up-to-date and reliable. Perfect for mission-critical applications requiring accurate country and subdivision information with guaranteed consistency.
Supports All Web Platforms, Frameworks and Languages
Installation
npm install @countriesdb/widgetUsage
import { useEffect } from 'react'
function App() {
useEffect(() => {
window.CountriesDBConfig = { publicKey: 'YOUR_PUBLIC_KEY' }
// Reload widget on route changes (for client-side routing)
if (window.CountriesWidgetLoad) {
window.CountriesWidgetLoad({ reload: true })
} else {
import('@countriesdb/widget')
}
}, [])
return <select className="country-selection" name="country" />
}