countryCodeLabel?

string

(ALPHA) (Optional) Label for the country code selector input element.

defaultValue?

string

(ALPHA) (Optional) A default phone number value. Provide this if you wish to set the default value when using the component as an uncontrolled component.

errorMessageDelay?

number

(ALPHA) (Optional) Defines how long the error message is displayed in seconds.

errorMessageDisplay?

‘none’ | ‘message’ | ‘status’ | ‘both’

(ALPHA) (Optional) Determines how the error message is displayed. When set to both, error is displayed both as an error status of the component and by displaying an error message. When set to none neither is displayed. Prop can also be set as message or status in which case the corresponding method is used to indicate the error.

errorProps?

Partial<FormHelperTextProps> | Record<string, never>

(ALPHA) (Optional) Props applied to the FormHelperText component of the composite country code selector component (a possible error message). See https://mui.com/material-ui/api/form-helper-text/ for more information about the MUI’s FormHelperText’s API.

errorSize?

ComponentSize

(ALPHA) (Optional) Sets the breakpoint size props of the error message components grid item, when the country code components are wrapped in a MUI Grid or MUI Grid2. Accepts an object with keys for MUI’s responsive breakpoints (xs, sm, md, lg, and xl), and the values can be either a number, a string ‘auto’ or a boolean. If the value for a breakpoint is false the prop is ignored.

See https://mui.com/material-ui/api/grid/#props (e.g., https://mui.com/material-ui/api/grid/#grid-prop-xs) for more information about the MUI Grid props, and https://mui.com/material-ui/customization/breakpoints/ for more information about MUI’s responsive breakpoints.

filterOptions?

(options: CountryType[], state: FilterOptionsState<CountryType>) => CountryType[]

(ALPHA) (Optional) Custom options for setting how the select options are filtered based on the input. See https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-filterOptions and https://mui.com/material-ui/react-autocomplete/#custom-filter for more information about custom filtering.

formGroupProps?

Partial<FormGroupProps>

(ALPHA) (Optional) Props passed to the MUI FormGroup component if the country code components are wrapped in one.

grid2ContainerProps?

Grid2ContainerProps

(ALPHA) (Optional) Props passed to the MUI Grid2 container component if the country code components are wrapped in one.

grid2ErrorProps?

Grid2ItemProps

(ALPHA) (Optional) Props passed to the MUI Grid2 item component that the error message component is wrapped in, if the country code components are wrapped in a Grid2. Overwrites the grid2ItemProps.

grid2InputProps?

Grid2ItemProps

(ALPHA) (Optional) Props passed to the MUI Grid2 item component that the phone number input component is wrapped in, if the country code components are wrapped in a Grid2. Overwrites the grid2ItemProps.

grid2ItemProps?

Grid2ItemProps

(ALPHA) (Optional) Props passed to the MUI Grid2 item components if the country code components are wrapped in such. Is overwritten by grid2SelectorProps and grid2InputProps.

grid2SelectorProps?

Grid2ItemProps

(ALPHA) (Optional) Props passed to the MUI Grid2 item component that the selector component is wrapped in, if the country code components are wrapped in a Grid2. Overwrites the grid2ItemProps.

gridContainerProps?

GridContainerProps

(ALPHA) (Optional) Props passed to the MUI Grid container component if the country code components are wrapped in one.

gridErrorProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item component that the error message component is wrapped in, if the country code components are wrapped in a Grid. Overwrites the gridItemProps.

gridInputProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item component that the phone number input component is wrapped in, if the country code components are wrapped in a Grid. Overwrites the gridItemProps.

gridItemProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item components if the country code components are wrapped in such. Is overwritten by gridSelectorProps and gridInputProps.

gridSelectorProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item component that the selector component is wrapped in, if the country code components are wrapped in a Grid. Overwrites the gridItemProps.

id?

string

(ALPHA) (Optional) The global HTML id attribute passed to the input subcomponent of the composite component. Defines an identifier which must be unique in the whole document. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id for more information.

inputProps?

Partial<Omit<TextFieldProps, ‘onChange’ | ‘select’ | ‘SelectProps’ | ‘value’>> | Record<string, never>

(ALPHA) (Optional) Props applied to the underlying TextField component (the phone number input). See https://mui.com/material-ui/api/text-field/ for more information about the MUI’s TextField’s API.

inputRef?

MutableRefObject<HTMLInputElement | null> | RefCallback<HTMLInputElement | null>

(ALPHA) (Optional) A React ref that will be set to point to the phone number input element. Provide this to access the component’s value when using the component as an uncontrolled component.

inputRenderCountRef?

MutableRefObject<number>

(ALPHA) (Optional) Passes a numeric React ref object to the phone number input component, which is then increased by one every time the component is rendered.

inputSize?

ComponentSize

(ALPHA) (Optional) Sets the breakpoint size props of the phone number input components grid item, when the country code components are wrapped in a MUI Grid or MUI Grid2. Accepts an object with keys for MUI’s responsive breakpoints (xs, sm, md, lg, and xl), and the values can be either a number, a string ‘auto’ or a boolean. If the value for a breakpoint is false the prop is ignored.

See https://mui.com/material-ui/api/grid/#props (e.g., https://mui.com/material-ui/api/grid/#grid-prop-xs) for more information about the MUI Grid props, and https://mui.com/material-ui/customization/breakpoints/ for more information about MUI’s responsive breakpoints.

layout?

LayoutProp

(ALPHA) (Optional) Defines what kind of layout components the subcomponents of a composite component are wrapped in. Accepts the following values: grid, gridItems, grid2, grid2Items, stack, and group. Option grid wraps the components into MUI Grid item components and creates a Grid container around them. Option gridItems just wraps the components into Grid items and leaves the container out. Options grid2 and grid2Items do the same with MUI Grid2 components. Option stack wraps the components in a MUI Stack component, and with the group option the components are wrapped in a MUI FormGroup component.

name?

string

(ALPHA) (Optional) An HTML name attribute passed to the input subcomponent of the composite component. Name attribute is a string specifying a name for the input. This name is submitted along with the control’s value when the form data is submitted. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name for more information.

onChange?

(e: { target: { value: string; }; }) => void

(ALPHA) (Optional) Phone number input’s change event handler. Sets the value prop. Provide this when you wish to use the component as a controlled component.

onError?

(error: string) => void

(ALPHA) (Optional) Passes a custom function for handling errors. The function receives the error message as a parameter.

phoneNumberLabel?

string

(ALPHA) (Optional) Label for the phone number input element.

selectorProps?

Partial<CCSelectorProps> | Record<string, never>

(ALPHA) (Optional) Props applied to the underlying CountryCodeSelector element. See https://mui.com/material-ui/api/autocomplete/ for more information about MUI’s Autocomplete’s API.

selectorRenderCountRef?

MutableRefObject<number>

(ALPHA) (Optional) Passes a numeric React ref object to the selector component, which is then increased by one every time the component is rendered.

selectorSize?

ComponentSize

(ALPHA) (Optional) Sets the breakpoint size props of the selector components grid item, when the grid or grid2 layout is used. Accepts an object with keys for MUI’s responsive breakpoints (xs, sm, md, lg, and xl), and the values can be either a number, string auto or a boolean. If the value for a breakpoint is false the prop is ignored.

See https://mui.com/material-ui/api/grid/#props (e.g., https://mui.com/material-ui/api/grid/#grid-prop-xs) for more information about the MUI Grid props, and https://mui.com/material-ui/customization/breakpoints/ for more information about MUI’s responsive breakpoints.

shrink?

boolean

(ALPHA) (Optional) A boolean value that specifies whether or not to shrink the selector and phone number input components’ labels. See https://mui.com/material-ui/react-text-field/#shrink for more information.

stackProps?

Partial<StackProps>

(ALPHA) (Optional) Props passed to the MUI Stack component if the country code components are wrapped in one.

value?

string

(ALPHA) (Optional) Variable holding the value of the phone number input field. Provide this when you wish to use the component as a controlled component.

variant?

TextFieldVariants

(ALPHA) (Optional) Defines which variant of the MUI TextField is used in the country code selector and phone number input components. See https://mui.com/material-ui/react-text-field/#basic-textfield about the TextField variants.