Component library

Phone component

Last updated 2 November 2026

Live demo

<ins-input-phone 
    label="Phone" required validate
    error-message="Please enter a phone number" 
    invalid-message="Please enter a valid phone number"
    html-description
    description="This is a <strong>Description</strong> <i>Example</i>">
</ins-input-phone>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	""	any	Defines label of input field
name	string	""	any	Defines name of input field
placeholder	string	""	any	Defines the short hint that describes the expected value in the input field
value	string	""	any	Defines phone number value
error-message	string	""	any	Defines the error message when the input has-error
invalid-message	string	""	any	Defines the error message when the phone number have invalid format
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
validate	boolean	false	true, false	Toggle auto validate
disabled	boolean	false	true, false	Disables input field
readonly	boolean	false	true, false	Specifies that the input field is read-only
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
insValueChange	value	Emits the value on blur
insValidation	hasError, errorMessage	Will return the error state when validate attribute is present

Methods

METHOD	PARAMETERS	DESCRIPTION
getValue	None	Returns the formatted value of the input
setValue	countryCode: String	Programmatically set the value of the input.