Geo Country Selector

A production-ready country selector that feels like it belongs in your product — not bolted on.

Drop it into any form, checkout flow, or onboarding screen. It silently detects the visitor's country via IP on page load and pre-selects it, so most users never have to touch it.

─────────────────────────────

FEATURES

─────────────────────────────

📍 IP Geo-Detection

Automatically detects and pre-selects the visitor's country using their IP address. Shows an animated "Auto-detected" badge next to the label. Disappears the moment the user picks manually. Toggle it off entirely if you don't need it.

🔍 Live Search with Keyboard Navigation

Built-in search filters the list as you type. Full keyboard support: Arrow keys to navigate, Enter to select, Escape to close. Animated clear button appears when there's a query. Result count shown at the footer.

🏳️ Flag Emojis

Generated programmatically from ISO codes — no image assets, no CDN, zero extra weight.

🌍 90+ Countries Built-In

Comprehensive global list, alphabetically sorted, including a "Global / Other" fallback option.

✏️ Editable Country List — 3 Modes

• Default: all 90+ countries

• Restrict: enter comma-separated ISO codes (e.g. US, GB, AU) to show only those, in that order

• Custom: replace the list entirely via the panel with your own name + code pairs

🎯 Smart Dropdown Positioning

The dropdown uses fixed positioning so it always escapes parent overflow:hidden frames — no clipping, no matter how the component is nested. Automatically flips upward if there's not enough space below.

📐 Width Control

Toggle between full-width (fills the container) or set a fixed pixel width via slider.

🎨 Fully Customisable

Every visual detail is exposed as a Framer property control:

• Accent colour, label, helper text, placeholder

• Field background, text, border colour, radius, width, padding

• Dropdown background, border, corner radius, shadow (BoxShadow control)

• Dropdown max height, row hover colour

• Font family + font size

• Element gap

• Required field marker

♿ Accessible

Correct ARIA roles: listbox, option, aria-expanded, aria-selected. Focus management on open/close. Shimmer skeleton while geo-detecting so the UI never looks broken.

─────────────────────────────

HOW TO USE

─────────────────────────────

1. Insert the component onto your canvas

2. Resize it or enable Full Width in the panel

3. Turn on IP Geo-Detection if you want automatic pre-selection

4. Optionally restrict or replace the country list

5. Style everything from the right panel — no code required

─────────────────────────────

REQUIREMENTS

─────────────────────────────

• Framer with code component support

• No external dependencies beyond Framer Motion (already included in Framer)

• Geo-detection uses the free GeoJS API (no API key required)

─────────────────────────────

PERFECT FOR

─────────────────────────────

Contact forms · Checkout flows · Onboarding screens · Lead capture · SaaS sign-up · Any project with a global audience

✅ Eligible for a Refund

Refunds are considered on a case-by-case basis in the following situations:

• Duplicate purchase — You were charged more than once for the same component.

• Non-delivery — You completed payment but never received access to the component.

• Critical, unrepairable defect — The component does not function as described in the listing, and the issue cannot be resolved within 7 days of you reporting it.

To request a refund under any of the above, contact me within 14 days of your purchase date with your order details and a description of the issue.

❌ Not Eligible for a Refund

Refunds will not be issued for:

• Change of mind or no longer needing the component.

• Purchasing the wrong product — please read the listing and review all features before buying.

• Inability to use the component due to an incompatible Framer plan or setup that does not meet the stated requirements.

• Dissatisfaction with visual style or aesthetic preferences — all customisation options are clearly documented in the listing.

• Issues caused by modifications you made to the component's code.

• The free GeoJS API used for geo-detection experiencing downtime or changes on their end (this is a third-party service outside my control).

🛠️ Before Requesting a Refund — Try Support First

Most issues can be resolved quickly. If something isn't working as expected, reach out before opening a dispute:

• Describe the issue in a message on Contra.

• Include your Framer version, a screenshot or screen recording, and steps to reproduce.

I'm committed to making sure the component works exactly as described and will prioritise fixing legitimate bugs promptly.

🔄 Updates & Ongoing Support

• Bug fixes and compatibility updates are provided free of charge to existing buyers.

• Feature additions may or may not be included depending on scope.

• Purchasing this component does not entitle you to a full support contract or custom development work.

📬 Contact

To raise a refund request or report a technical issue, message me directly through your Contra dashboard. Please include your order reference and a clear description of the problem.

This policy applies to purchases made through the Contra marketplace. Contra's own platform terms may also apply.