> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput.md). # Phone number - PhoneInput {% hint style="info" %} Availability of functionality depends on the license and may not be available in all deployments. {% endhint %} The phone number is a text component that allows entering a phone number and country prefix. After filling in the prefix, in some implementations information about the country to which a given number is assigned is displayed. The number of characters allowed in the phone number field is validated depending on the selected prefix.
✅ **When to use:** * The number should include the country prefix. :x: **When not to use:** * The phone number is not to include the prefix, or greater flexibility in entering the number is needed. **Use**: [TextField](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput.md). ## Component properties | Eximee Designer property | Attribute name in the Source | Description | | ---------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | **Inactive field displayed as a label** (section **Basic properties**) | labelIfDisabled | Specifies whether the inactive field should be displayed as a label (default value "false"). | | **Default prefix** (section **Data quality**) | defaultPrefix | Default prefix value for the field. | | **Mask matching error message** (section **Data quality**) | maskValidationError | Error label displayed when a value inconsistent with the defined mask is entered. | | **Mask** (section **Data quality**) | mask | Regular expression (REGEX) mask validating the correctness of the data in the field. | | **Invalid prefix** (section **Data quality**) | invalidPrefixValidatorError | Error label displayed when the value is inconsistent with prefix validation. | | **Prefix label** (section **Data quality**) | prefixLabel | Allows defining a description (label) for the prefix. | | **Prefix editability condition (Source)** | prefixEnabledCondition | It enables or blocks changing the prefix. To block changes, add the attribute `prefixEnabledCondition="js:false"` in the source. | > More information about component properties: [Common component properties](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

Figure 1. Example appearance of the component in the request.

Figure 2. Example appearance of the component without country information

## Retrieving a value from the component The component value is json: ```json {"prefix":"48","phone":"614151000","phoneTouched":true,"prefixTouched":true,"phoneConfirmationState":"NONE"} ``` Example script returning a phone number (without prefix): ```js // example GesPhoneInput value: {"prefix":"48","phone":"614151000","phoneTouched":true,"prefixTouched":true,"phoneConfirmationState":"NONE"} function callService(context) { const rawPhoneData = context.getFirstParameter('GesPhoneInput'); if (!rawPhoneData) { return [{ 'phoneNumber': null }]; } try { const phoneState = JSON.parse(rawPhoneData); //parsing GesPhoneInput (JSON) const phoneNumber = phoneState.phone || null; return [{ 'phoneNumber': phoneNumber }]; } catch (error) { return [{ 'phoneNumber': null }]; } } ``` Individual values can be retrieved on demand using specific attributes available in the component with: `${componentId$attribute}` Available attributes: * GesPhoneInput1$**phone** - phone number * GesPhoneInput1$**prefix** - prefix without plus sign * GesPhoneInput1$**prefixWithPlus** - prefix with plus sign * GesPhoneInput1$**fullPhone** - full number with plus sign In the script, these attributes can be retrieved using getData, e.g. `getData("GesPhoneInput1","fullPhone")` ## Passing a value to the component ### Passing as a data source from another field Example JSON(String) object passed to the component: ```json {"prefix":"48","phone":"614151000","phoneTouched":true,"prefixTouched":true,"phoneConfirmationState":"NONE"} ``` The object can be passed, for example, via a session variable and set in the attribute **Data source from another field**:

Figure 3. Setting the value as a session variable

Figure 4. Passing the session variable to the component

Figure 5. Component with an example phone number and prefix value set

### Feeding from an external data source (EDS) The component can also be fed via an External Data Source. Example EchoService script: ```js function callService(context) { const phoneNumber = "614151000"; const phonePrefix = "36"; return [{ "phoneNumber": phoneNumber, "phonePrefix": phonePrefix }]; } ```

Figure 6. Mapping the script to the component

{% hint style="info" %} Demo request: demoPhoneInput {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.