| Name | Description | Default | Type |
|---|---|---|---|
additionalInfo | Button when clicked will show additional information on a field | | { content: string | Element; heading: string;} |
callingCodesList | Changes lists of countries calling codes | | string[] |
className | Additional CSS classes. | | string |
defaultValue | 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. | | string |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | 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. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
labelHidden | Visually hides the label region. | | boolean |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onBlur | | (value: string) => void | |
onChange | | (value: string) => void | |
onFocus | | (value: string) => void | |
onResolveSuggestion | | (accepted: boolean) => void | |
placeholder | Placeholder text. The browser defaults to an empty string. | | string |
readOnly | Makes the input non editable and non clickable. The browser defaults to false. | | boolean |
ref | Ref for the wrapping element. | | Ref<HTMLInputElement> |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
showCountryCode | Display select with countries calling codes | false | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
value | Creates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team. | | string |
PhoneInput
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
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).
Usage
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. If an onResolveSuggestion callback function is provided, and the status is set to pending, the user will be prompted to accept or deny whatever suggested value populates the PhoneInput.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.