|Changes lists of countries calling codes|
|Additional CSS classes.|
|If you wish to use an uncontrolled input, pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.|
|Disable the control. The browser defaults to false.|
|Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.|
|It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.|
|Pass a string or a fragment with an Icon and string.|
|Visually hides the label region.|
|Sets html name attribute for the underlying control. Useful for mapping to a data field.|
|Callback fired when the component loses focus|
|Callback fired on input value change|
|CCallback fired when the component gets focus|
|Placeholder text. The browser defaults to an empty string.|
|Makes the input non editable and non clickable. The browser defaults to false.|
|Ref for the wrapping element.|
|Indicate if the field is required. The browser defaults to false.|
|Display select with countries calling codes|
|Set visual state based on a validation state.|
|Creates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.|
PhoneInputs allow for users to enter and edit phone numbers, typically in a Form. There is masking support for phone numbers with a +1 country code (USA).
For more information on how to use the features and props for this component, check out the developer documentation.
PhoneInputs will accept numbers only and can also render a Select menu for choosing country codes if the showCountryCode property is passed. The list of country codes that populates the Select menu is configurable via the callingCodesList prop.
The component also allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.