# Phone Input

### Overview

The Phone Input Web Control can be used to capture phone numbers. It is similar to the [Text Input Web Control](text-input-web-control), but it has some validation built in: if a value entered into the Phone Input Web Control is not a valid phone number (as defined by the [ISPHONE](../airscript-expressions/phone-functions/isphone) Airscript function), the phone input value will evaluate to NULL.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-88959605ebf546bda4989d4c720dc5e5e7cd7f2e%2Fphone-input-web-control-v1715-0.png?alt=media)

### Control Properties

#### Placeholder Text

The text that is displayed in the input’s box before the user starts typing. This will only display if the No Immediate Prefix checkbox (see blow) is checked.

### Advanced Control Properties

#### Delimiter

Select the symbol will delimit sections of a phone number as it is entered.

For instance, if the "-" symbol is selected, a phone number entered as "+17167762323" will display as "+1-716-776-2323"

#### Prefix

The prefix that will appear automatically in the displayed input box.

Most commonly, this is used to automate the insertion of the relevant country code, which is necessary in order for Airscript to correctly [parse phone numbers](../airscript-expressions/phone-functions/isphone).

#### No Immediate Prefix

If this checkbox is selected, no prefix will appear in the displayed input box, regardless of what is entered in the Prefix section above.

By default, this checkbox is not selected.

#### Right Icon

Select the icon that will appear on the right of the input box.

The default option, "-", dictates that no icon will be visible.&#x20;

#### AutoComplete

Determines whether the user's device is allowed to autocomplete the field.  Guidance can be provided to the app user's browsing environment by using one of the pre-determined autocomplete options such as **tel-country-code**or **tel-locale**.  For more information, see the [HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

### Data Binding

#### Value

By default, this Data Binding property auto-generates a Variable of type [Phone](../variable-data-types/the-phone-variable-data-type) at the Web Page level to store the data from the input.&#x20;

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-240a730fbde50867c6bfe23a15bd887b29e14422%2Fphone-input-web-control-v1715-1.gif?alt=media)

Users can also edit the Data Binding property and create their own Variables.

### Style

#### Variant

Phone Inputs can be styled with these controls. For more information, see [Common Style Properties of Web Controls](web-controls-overview/common-style-properties-of-web-controls).

Further customization is possible with different Variants, font types, sizing and spacing being editable on the Inspector. Click on the desired Variant and the element on the Stage will change to match. For further information, see [Themes and Variants](https://docs.airkit.ai/?q=working-with-themes-and-control-variants).

### Control Actions

In the Actions Tab of the Inspector section, the Phone Input actions can be defined.

**On Blur**

Triggers when the user leaves the input field. That is, when changing the focus from the field to some other part of the application.

**Value Changed**

Triggers with each typed character. That is, with an phone input, the Value changes every time a key is pressed, unlike a [Checkbox](checkbox-web-control)[,](checkbox-web-control) where its Value changes when the box is selected.

**On Enter**

Triggers upon pressing Enter.

Please check out [Action Builder](../studio/action-builder) to find all the available actions.

### Advanced

In the **Advanced** Tab of the Inspector section, the conditions under which this Web Control is visible can be defined by setting a specific parameter.

**Is Visible**

This property is a conditional field, which allows to show or hide the field depending on whether the set condition is met. The condition will always evaluate to a [Boolean](../variable-data-types/the-boolean-variable-data-type).

**Is Disabled**

This property is a conditional field, which allows to enable or disable the field depending on whether the set condition is met. The condition will always evaluate to a Boolean.
