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
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.
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).
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.
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.
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.
Adam Pavlakovich
