Component library

Tel component

Last updated 2 November 2026

Defines an input field where user can enter phone number data.

Live demo

<ins-input-tel
    label="Description Example"
    html-description
    description="This is a <strong>Description</strong> <i>Example</i>">
</ins-input-tel>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	""	any	Defines label of input field
areacode-placeholder	string	""	any	Defines the short hint that describes the expected value in the area code input field
areacode-value	string	""	any	Defines the value of an area code input element
phonenum-placeholder	string	""	any	Defines the short hint that describes the expected value in the phone number input field
phonenum-value	string	""	any	Defines phone number value
country-code	string	""	any	Defines countryCode value
area-code	string	""	any	Defines name of area code input field
phone-number	string	""	any	Defines name of phone number input field
error-message	string	""	any	Defines the error message when input element is wrong
required	boolean	false	true, false	Specifies that the input field must be filled out before submitting the form
has-error	boolean	false	true, false	Specifies validation or mandatory input for the input field
disabled	boolean	false	true, false	Disables input field
readonly	boolean	false	true, false	Specifies that the input field is read-only
no-areacode	boolean	false	true, false	Removes the area code field
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content
html-description	boolean	false	true, false	Enables HTML tags in the description
description	string	""	any	Defines the description value

Events

EVENT	OBJECT	DESCRIPTION
insInput	field, value	Returns value when an element gets user areacode or phone number input
insValueChange	value	Emits the value on change

Methods

METHOD	PARAMETERS	DESCRIPTION
getValue	None	Returns the formatted value of the field
getCountryData	None	Returns the data of the selected country
setCountryData	countryCode: String	Programmatically set the country code of the field.

Event	Live example
`insInputTelChange`	Try insInputTelChange

Events - insInputTelChange

<ins-input-tel
  id="insValueChange"
  label="Phone"
  areacode-placeholder="Area Code"
  phonenum-placeholder="Phone Number">

</ins-input-tel>

<p id="demo"></p>
<p id="demo1"></p>

<script>
const insInputTelChange = document.getElementById('insValueChange')
insInputTelChange.addEventListener('insValueChange', event => {
  console.log(event);
  console.log(event.detail.field);
  console.log(event.detail.value);
  if (event.detail.field == "area_code") {
    document.getElementById("demo").innerHTML = event.detail.field + event.detail.value;
  } else {
    document.getElementById("demo1").innerHTML = event.detail.field + event.detail.value;
  }
});
</script>

Examples

Complete Example

<ins-input-tel label="Phone"
  areacode-placeholder="Area Code"
  areacode-value="1300"
  phonenum-placeholder="Phone Number"
  phonenum-value="12345"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input-tel>

No Area Code Example

<ins-input-tel label="Phone"
  no-areacode
  phonenum-placeholder="Phone Number"
  phonenum-value="12345">
</ins-input-tel>

Default Field

<ins-input-tel
  label="Phone"
  areacode-placeholder="Area Code"
  areacode-value="1300"
  phonenum-placeholder="Phone Number"
  phonenum-value="12345">
</ins-input-tel>

Default State

<ins-input-tel></ins-input-tel>

Error State

<ins-input-tel 
  has-error error-message="This is a required field">
</ins-input-tel>

Direct Set Data

<ins-input-tel 
  id="directSetDataInputtel">
</ins-input-tel>

<script>
  var label_inputtel = 'Telephone',
      areaCode = '130',
      phoneNum = '636991';

  var phoneField = document.getElementById('directSetDataInputtel');
  phoneField.addEventListener('didLoad', function(e){
    // Update `label` attribute of the element
    phoneField.setAttribute('label', label);

    // Update `countryCode` attribute of the element
    phoneField.setCountryCode('+1');

    // Update `areacodeValue` attribute of the element
    phoneField.setAttribute('areacode-value', areaCode);

    // Update `phonenumValue` attribute of the element
    phoneField.setAttribute('phonenum-value', phoneNum);
  });
</script>

Static Data Source

<ins-input-tel 
  label="Phone" 
  areacode-value="1300" 
  phonenum-value="12345">
</ins-input-tel>

Label Attribute

<ins-input-tel 
  label="Phone">
</ins-input-tel>

Area Code Attribute

<ins-input-tel 
  areacode-value="1300">
</ins-input-tel>

Phone Number Attribute

<ins-input-tel 
  Phonenum-value="12345">
</ins-input-tel>