Phone Input

Conforms user input to a pre-defined phone number pattern.

Examples

NATP Phone Input

Accepts phone numbers formated for NATP (North American Telephone Plan). This is the default.

import { PhoneInput } from '@curology/ui-components-web/react/PhoneInput';

<PhoneInput />

International Phone Input

Accepts phone numbers formated for international numbers with country codes.

import { PhoneInput } from '@curology/ui-components-web/react/PhoneInput';

<PhoneInput format="intl" />

Controlled Phone Input

Like all form inputs, a PhoneInput can either be uncontrolled, or controlled (by providing a value and onChange listener).

Cool Phone!

import { PhoneInput } from '@curology/ui-components-web/react/PhoneInput';

<PhoneInput
  ...
  value={someValue}
  onChange={(evt, value) => ...}
/>

Props

PhoneInputProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
format	"nanp" | "intl"	PhoneInputFormat.NANP (North American Numbering Plan)	No	The format to use for the phone number.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
highlight	ReactNode		No	Highlighted helper text to display at the bottom of the multiline text input
highlightClassName	string		No	A className to apply to the highlight.
iconEnd	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the end of the input.
iconStart	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the front of the input.
label	ReactNode		No	A string or component to display as a label above the input
multiline	false | true	false	No	Should a textarea be used instead of an input?
onChange	FormControlChangeEventHandler		No	Emit a new value when the input's selected value changes.
resize	false | true	false	No	Can the textarea be resized?
rows	string | number		No	How many rows call should the multiline input be?
state	"" | "critical" | "warning" | "success"	''	No	The state of the field