# Country Code Selector ✅
{% hint style="success" %}
**RELEASED in v0.1.4**
{% endhint %}
## Features
* Allow drop-in country code selection for accompanying phone number fields
* Show flag, country name and country code
* Ability to set default countries
* First default is selected automatically
* Others are at the top of the list
* Control the field name submitted with the form
* Keyboard support
* Begin typing country name
* Or +country code
## Properties
| 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
Use the Size, Display, and Height properties.
{% hint style="warning" %}
No variable styling options currently.
{% endhint %}
## Future
* Countries list
* Curated countries list
* Possibly CMS-driven
* Auto-detection
* Automatic GeoIP country code selection option
* Combine with phone number field
* Support smart formatting and validation internally
* Styling
* Flag style options ( rectangular, square, circular )
* a11y
* Mobile variations
* ? Device-specific
* Validation
* 3rd party validation service integration for automatic phone validation
* Including type-checking for SMS, etc.
## Technical Notes
### Flag icons
Fonts seem inconsistent and problematic cross-platform.
Using icon lib here- \
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-forms/country-code-selector.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.