> For the complete documentation index, see [llms.txt](https://appmaster.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appmaster.gitbook.io/docs/web-apps/components-list/input-phone.md).

# Input (phone)

Allows to enter and validate phone number.

## Look\&Feel Settings

**Label** (not mandatory) to be used to show the component's label.

**Placeholder** (not mandatory) to be used to show the component's placeholder.

**Name** (mandatory) - name of the component.

**Tooltip** (not mandatory) - tooltip string.

**Mask** (not mandatory) - phone mask to be used. 

**Required** (mandatory) - marks if the value is required or not. Is set to false by default.

**Allow clear** (mandatory) - allows clear on selection. Is set to false by default. 

**Validate Icon** (mandatory) - shows validation icon if enabled. Is set to false by default.

**Disabled** (mandatory) - makes the component disabled if turned on. Is turned off by default.

**Visible** (mandatory) - makes the component visible if turned on. Enabled by default.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FkXoU6ewyXu7FZ6tZh6iY%2Flook_n_feel.jpg?alt=media\&token=bfc48a2f-e022-4ef8-9c32-503304bd5542)

## Workflow triggers

* **onChange** - fires when the dropdown option is changed.
* **onFocus** - fires when the component is being focused on.
* **onBlur** - fires when the component is blurred.
* **onCreate -** fires when the component is created.
* **onShow** - fires when the component is shown.
* **onHide** - fires when the component is hidden.
* **onDestroy** - fires when the component is shown.
* **onEnterKey** - fires when the Enter key is pressed.

## Component Actions

### InputPhone Get Properties

Gets the component's properties.

**Input** parameters:

* **Component Id** \[*string*] *-* component's identifier;

**Output** parameters:

* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Value** \[*phone number*] - phone-formatted input value;
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FT8intT6wphXv5QF1QvaZ%2FinputPhone_get_properties.jpg?alt=media\&token=c8820aca-5412-4008-befb-d6b660657211)

### InputPhone Set Properties

Sets the component's properties.

**Input** parameters:

* **Component Id** \[*string*] *-* component's identifier;
* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Value** \[*phone number*] - phone-formatted input value;
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F0g30AMBG3X0U8s0XQBO3%2FinputPhone_set_properties.jpg?alt=media\&token=0b12d105-8f00-4fc0-9e8a-071476e6ecf9)

### InputPhone Update Properties

Updates component's properties.

**Input** parameters:

* **Component Id** \[*string*] *-* component's identifier;
* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Value** \[*phone number*] - phone-formatted input value;
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FkbE0zHjsIMBRzifIKw1B%2FinputPhone_update_properties.jpg?alt=media\&token=62293d9a-8bdc-4611-8026-4540afe5fc82)

## Usage example

There is a way to check if the entered value is empty or not. First of all the entered value has to be checked if it is null or not. **Component ID** needs to be specified in order to get this value from the component:

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FMkM4DTRZzLT93LiifDVP%2Fexample_1.jpg?alt=media\&token=0312973c-a9dd-4fab-a0cc-f9c200170b97)

If it is empty, the component's status has to show this error saying that the phone number field cannot be empty. This can be done with the use of **Update Properties** block by setting **Validate Status** equal to **Error** and putting **Validate Message** to reflect this error.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2Fk6lPtpQoGKcoxNZ0yZOf%2Fexample_2.jpg?alt=media\&token=6996c84c-9f57-4ca3-bad9-174836dcb7c8)