> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-forms/country-code-selector.md).

# Country Code Selector ✅

Deliver nicely styled country code selection in your forms.

{% hint style="success" %}
**RELEASED in v0.1.4** 
{% endhint %}

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2F9VabkusMgirvUnamMWKG%2F2025-10-08_15-00-24.gif?alt=media&amp;token=1704c39a-b0bf-4861-b241-4289197a6aeb" alt=""><figcaption></figcaption></figure>

## Features

* Allow drop-in country code selection for accompanying phone number fields&#x20;
* Show flag, country name and country code&#x20;
* Ability to set default countries&#x20;
  * First default is selected automatically&#x20;
  * Others are at the top of the list&#x20;
* Control the field name submitted with the form&#x20;
* Keyboard support&#x20;
  * Begin typing country name&#x20;
  * Or +country code&#x20;

## Properties&#x20;

| Property          | Type             | Description                                                                                                                    |
| ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Name              | Test             | The field name the country code is submitted under.                                                                            |
| Default Countries | Text ( CSV )     | Default country codes to show at the top of the list.  The first one is automatically selected. Defaults to US if unspecified. |
| Searchable        | Boolean          |                                                                                                                                |
| Size              | Variant          | Small, Medium, Large                                                                                                           |
| Display           | Variant          | Inline Block Block                                                                                                             |
| Height            | Text ( Measure ) | Defines the height of the closed control, for precise alignment next to a phone number field.                                  |
| Show Flag         | Boolean          | Choose whether to show the flag                                                                                                |
| Show Dial Code    | Boolean          | Choose whether to show the dial code                                                                                           |
| Debug             | Boolean          | For advanced console logging                                                                                                   |

## Styling&#x20;

Use the Size, Display, and Height properties.&#x20;

{% hint style="warning" %}
No variable styling options currently.&#x20;
{% endhint %}

## Future

* Countries list&#x20;
  * Curated countries list&#x20;
    * Possibly CMS-driven&#x20;
* Auto-detection&#x20;
  * Automatic GeoIP country code selection option&#x20;
* Combine with phone number field&#x20;
  * Support smart formatting and validation internally&#x20;
* Styling&#x20;
  * Flag style options ( rectangular, square, circular )&#x20;
* a11y&#x20;
* Mobile variations&#x20;
  * ? Device-specific &#x20;
* Validation
  * 3rd party validation service integration for automatic phone validation&#x20;
  * Including type-checking for SMS, etc. &#x20;

## Technical Notes&#x20;

### Flag icons

Fonts seem inconsistent and problematic cross-platform.&#x20;

Using icon lib here- \
<https://github.com/lipis/flag-icons>