arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
InputPhone
Input Phone

Input for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

Features include:
  • Automatically select the user's current country using an IP lookup
  • Automatically set the input placeholder to an example number for the selected country
  • Navigate the country dropdown by typing a country's name, or using up/down keys
  • Handle phone number extensions
  • The user types their national number and the plugin gives you the full standardized international number
  • Full validation, including specific error types
  • Retina flag icons
  • Lots of initialisation options for customisation, as well as public methods for interaction

Based on International Telephone Input by Jack O'Connor.

Components and more
Documentation pe:inputPhone
Attributes (move mouse over the names to see data types)
Name Description
accesskeyAccess key to transfer focus to the input element.
allowDropdownWhen true, country dropdown is shown.Default is true.
altAlternate textual description of the input field.
ariaDescribedByIdentifies the element(s) that describe the object, enhancing accessibility.
autoHideDialCodeWhen true, dial code is hidden when not focused.Default is true.
autoPlaceholderAuto placeholder mode: polite, aggressive, or off.Default is polite.
autocompleteControls browser autocomplete behavior. Possible values are 'on', 'off', and 'new-password'.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
converterEL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessageCustom message to display when conversion fails.
dirDirection indication for text that does not inherit directionality.Default is ltr.
disabledSpecifies that an element should be disabled.Default is false.
excludeCountriesCountries to exclude (list or comma-separated string).
fixDropdownWidthWhen true, dropdown has fixed width.Default is true.
formatAsYouTypeWhen true, value is formatted as user types.Default is true.
formatOnDisplayWhen true, value is formatted on display.Default is true.
geoIpLookupJavaScript callback for geo IP lookup (required when initialCountry is 'auto').
idUnique identifier of the component in a namingContainer.Default is generated.
immediateWhen set true, process validations logic is executed at apply request values phase for this component.Default is false.
initialCountryInitial country (ISO2 code or 'auto').Default is us.
inputStyleInline style for the input.
inputStyleClassStyle class for the input.
inputmodeSpecifies the type of data expected in the input, aiding virtual keyboards.
labelA localized user presentable name.
langSpecifies the language of the element's content.
localizedCountriesLocalized country names (map or JSON string).
maxlengthDefines the maximum number of characters allowed in the input.Default is Integer.MIN_VALUE.
nationalModeWhen true, store national number without dial code.Default is true.
onblurFires when an element loses focus.
onchangeFires when the value of an element has been changed.
onclickFires when a mouse click on the element.
oncontextmenuScript to execute when the context menu is triggered.
oncopyScript to execute when content is copied from the element.
oncutScript to execute when content is cut from the element.
ondblclickFires when a mouse double-click on the element.
ondragScript to execute when an element is dragged.
ondragendScript to execute at the end of a drag operation.
ondragenterScript to execute when a dragged element enters a valid drop target.
ondragleaveScript to execute when a dragged element leaves a valid drop target.
ondragoverScript to execute when a dragged element is over a valid drop target.
ondragstartScript to execute at the start of a drag operation.
ondropScript to execute when a dragged element is dropped.
onfocusFires when an element gets focus.
oninputScript to execute when the element receives user input.
oninvalidScript to execute when the element's value is invalid.
onkeydownFires when a user is pressing a key.
onkeypressFires when a user presses a key.
onkeyupFires when a user releases a key.
onlyCountriesCountries to show only (list or comma-separated string).
onmousedownFires when a mouse button is pressed down on an element.
onmousemoveFires when the mouse pointer is moving while it is over an element.
onmouseoutFires when the mouse pointer moves out of an element.
onmouseoverFires when the mouse pointer moves onto an element.
onmouseupFires when a mouse button is released over an element.
onpasteScript to execute when content is pasted into the element.
onresetScript to execute when the form is reset.
onscrollScript to execute when the element is scrolled.
onsearchScript to execute when a search is performed.
onselectScript to execute when text is selected.
onwheelScript to execute when the mouse wheel is used.
placeholderSpecifies a short hint describing the expected value of the input.
placeholderNumberTypePlaceholder number type for libphonenumber.Default is mobile.
preferredCountriesPreferred countries shown at top (list or comma-separated string).
readonlySpecifies that an input field is read-only.Default is false.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
requiredMarks component as required.Default is false.
requiredMessageCustom message to display when the required validation fails.
roleDefines the role of the element for accessibility purposes.
separateDialCodeWhen true, dial code is shown separately.Default is false.
sizeNumber of characters used to determine the width of the input element.Default is Integer.MIN_VALUE.
styleSpecifies an inline CSS style for an element.
styleClassSpecifies one or more CSS class names for an element.
tabindexSpecifies the tab order of an element.
titleSpecifies extra information about an element (displayed as a tooltip).
typeHTML input type.Default is tel.
validatorA method expression referring to a method validating the input.
validatorMessageCustom message to display when validation fails.
valueValue of the component.
valueChangeListenerA method binding expression referring to a method for handling a valuchangeevent.
widgetVarName of the client side widget.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-03-13 11:37