PhoneInput

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.

NameTypeDefaultDescription
callingCodesListstring[]Changes lists of countries calling codes
classNamestringAdditional CSS classes.
defaultValuestringIf 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.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets 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.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanVisually hides the label region.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
onBlur(value: string) => voidCallback fired when the component loses focus
onChange(value: string) => voidCallback fired on input value change
onFocus(value: string) => voidCCallback fired when the component gets focus
placeholderstringPlaceholder text. The browser defaults to an empty string.
readOnlybooleanMakes the input non editable and non clickable. The browser defaults to false.
refRef<HTMLDivElement>Ref for the wrapping element.
requiredbooleanIndicate if the field is required. The browser defaults to false.
showCountryCodebooleanfalse Display select with countries calling codes
status
'success' |'warning' |'error' 
Set visual state based on a validation state.
valuestringCreates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.