Country Selector Block

The Country block is a specialized dropdown that automatically handles the list of 195+ global countries. It eliminates the need for you to manually build a massive list of options, and provides built-in search, flags, and international dialing codes out of the box.

Business Use Cases

E-commerce Shipping

Determine which country the user wants an item shipped to, restricting access to unsupported regions.

Demographic Surveys

Collect clean, standardized nationality data for your analytics dashboards.

Legal Compliance

Determine if a user resides in the EU to automatically trigger GDPR compliance flows.

Configuration & Usage

Deploy to Canvas

Drag the Country block from the Component Catalog onto the Canvas.

Set a Default

If most of your users are from a specific region, configure the Default Country (e.g., US or GB) so they don’t have to scroll to find themselves.

Enable Search

Scrolling through 195 items is tedious on mobile. Always toggle the Searchable switch on so users can just type “Canada”.

Technical Configuration Schemas

Visuals & UI
Behavioral Features
Geographic Restrictions

string

default:"md"

The visual size of the country dropdown. Available options are sm, md, and lg.

string

default:"primary"

The visual style variant of the field.

boolean

default:"false"

Displays the 2-letter ISO country code (e.g., “US”) next to the country name in the dropdown list.

boolean

default:"false"

Displays the international dialing prefix (e.g., “+1”) next to the country name in the dropdown list.

string

default:"PL"

The ISO 3166-1 alpha-2 country code (e.g., US, GB) selected by default.

array

An array of allowed country codes. When provided, the dropdown will only show these specific countries (whitelist).

array

An array of country codes to hide from the dropdown (blacklist).

Data Payload Architecture

The Country block guarantees that no matter what the user sees on their screen (in their local language), your database receives the exact, pristine ISO 3166-1 alpha-2 code.

{
  "submission_id": "sub_332",
  "data": {
    "shipping_country": "US",
    "nationality": "PL"
  }
}

[
    'shipping_country' => 'US',
    'nationality' => 'PL',
]

Deep Dive: Data Standardization

Why don’t we just use a regular Dropdown and let users type their country? If you let users type, they will write “United States”, “USA”, “U.S.A”, and “America”. When you try to sync this data to HubSpot or another CRM, the integration can fail because those systems expect exactly US.

Integration Ready: By outputting standardized ISO codes, the Country block maps cleanly into CRM and marketing tools that expect US, PL, DE, and similar codes.

Best Practices & FAQs

Restricting Shipping Regions

If you are building an order form but only ship to North America, use the Countries array to whitelist just US, CA, and MX. This physically prevents users from other regions from submitting an order you cannot fulfill.

Why is my flag missing?

Flags are rendered natively by the operating system using standard emoji tables. If a flag appears as letters (like US instead of 🇺🇸), it means the user’s operating system (like some versions of Windows) does not support flag emojis natively.

​Business Use Cases

E-commerce Shipping

Demographic Surveys

Legal Compliance

​Configuration & Usage

​Technical Configuration Schemas

​Data Payload Architecture

​Deep Dive: Data Standardization

​Best Practices & FAQs

Business Use Cases

Configuration & Usage

Technical Configuration Schemas

Data Payload Architecture

Deep Dive: Data Standardization

Best Practices & FAQs