---
title: "PhoneAndAreaCode"
manual: "LIA Form"
version: "2.2"
permalink: "https://docs.typo3.org/permalink/lia/lia_form:phoneandareacode@2.2"
source: "FormElements/PhoneAndAreaCode.rst"
rendered: "2026-09-29T13:27:41+00:00"
---

# PhoneAndAreaCode {#phoneandareacode}

A phone number field with a selectable international area code. The field renders
a select box containing all international dial codes (e.g. `+49`) next to a
text field for the phone number itself.

The list of area codes is loaded from
`EXT:lia_form/Configuration/Data/PhoneAreaCodeList.json`. Each entry consists
of a country name, the dial code and the ISO country code:

```json
{
  "name": "Germany",
  "dial_code": "+49",
  "code": "DE"
}
```

To use a custom data source, subscribe to the
[BeforePhoneAreaCodeInitializeEvent](https://docs.typo3.org/permalink/lia/lia_form:beforephoneareacodeinitializeevent@2.2)
and set your own path to a JSON file with the same structure.

-   **label**

    -   *Type:* string
    -   *propertyPath:* label

    The field label

-   **elementDescription**

    -   *Type:* string
    -   *propertyPath:* properties.elementDescription

    The field description.

-   **areaCodeClass**

    -   *Type:* string
    -   *propertyPath:* properties.areaCodeClass

    CSS class added to the area code select box.

-   **class**

    -   *Type:* string
    -   *propertyPath:* properties.class

    CSS class added to the phone number text field.

-   **gridColumnViewPortConfiguration**

    -   *Type:* GridColumnViewPortConfigurationEditor

    Grid settings.

-   **requiredValidator**

    -   *Type:* RequiredValidatorEditor
    -   *propertyPath:* properties.fluidAdditionalAttributes.required

    Field validation settings.