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 | ComponentSizeGridLegacy

(ALPHA) (Optional) Sets the breakpoint size props of the error message components grid item, when the gridLegacy or grid layout is used. The Grid component 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. For the Grid component the object must be added to the props using key size. If the value for a breakpoint is false the prop is ignored.

See https://mui.com/material-ui/api/grid/ for more information about MUI Grid props, https://mui.com/material-ui/api/grid-legacy/ for more information about MUI GridLegacy 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 group layout wrapper is used. See https://mui.com/material-ui/api/form-group/ for more information about what props can be passed to the component.

gridContainerProps?

GridContainerProps

(ALPHA) (Optional) Props passed to the MUI Grid container component if the grid layout wrapper is used. See https://mui.com/material-ui/api/grid/ for more information about what props can be passed to the component.

gridErrorProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item component that the error message component is wrapped in, if the grid or gridItems layout wrapper is used. Overwrites the grid2ItemProps. See https://mui.com/material-ui/api/grid/ for more information about what props can be passed to the component.

gridInputProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item component that the phone number input component is wrapped in, if the grid or gridItems layout wrapper is used. Overwrites the grid2ItemProps. See https://mui.com/material-ui/api/grid/ for more information about what props can be passed to the component.

gridItemProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item components if the grid or gridItems layout wrapper is used. Is overwritten by gridSelectorProps and gridInputProps. See https://mui.com/material-ui/api/grid/ for more information about what props can be passed to the component.

gridLegacyContainerProps?

GridLegacyContainerProps

(ALPHA) (Optional) Props passed to the MUI GridLegacy container component if the gridLegacy layout wrapper is used. See https://mui.com/material-ui/api/grid-legacy/ for more information about what props can be passed to the component.

gridLegacyErrorProps?

GridLegacyItemProps

(ALPHA) (Optional) Props passed to the MUI GridLegacy item component that the error message component is wrapped in, if the gridLegacyor gridLegacyItems layout wrapper is used. Overwrites the gridLegacyItemProps. See https://mui.com/material-ui/api/grid-legacy/ for more information about what props can be passed to the component.

gridLegacyInputProps?

GridLegacyItemProps

(ALPHA) (Optional) Props passed to the MUI GridLegacy item component that the phone number input component is wrapped in, if the gridLegacyor gridLegacyItems layout wrapper is used. Overwrites the gridLegacyItemProps. See https://mui.com/material-ui/api/grid-legacy/ for more information about what props can be passed to the component.

gridLegacyItemProps?

GridLegacyItemProps

(ALPHA) (Optional) Props passed to the MUI GridLegacy item components if the gridLegacy or gridLegacyItems layout wrapper is used. Is overwritten by gridLegacySelectorProps and gridLegacyInputProps. See https://mui.com/material-ui/api/grid-legacy/ for more information about what props can be passed to the component.

gridLegacySelectorProps?

GridLegacyItemProps

(ALPHA) (Optional) Props passed to the MUI GridLegacy item component that the selector component is wrapped in, if the gridLegacy or gridLegacyItems layout wrapper is used. Overwrites the gridLegacyItemProps. See https://mui.com/material-ui/api/grid-legacy/ for more information about what props can be passed to the component.

gridSelectorProps?

GridItemProps

(ALPHA) (Optional) Props passed to the MUI Grid item component that the selector component is wrapped in, if grid layout wrapper is used. Overwrites the gridItemProps. See https://mui.com/material-ui/api/grid/ for more information about what props can be passed to the component.

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?

RefObject<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?

RefObject<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 | ComponentSizeGridLegacy

(ALPHA) (Optional) Sets the breakpoint size props of the phone number input components grid item, when the gridLegacy or grid layout is used. The Grid component 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. For the Grid component the object must be added to the props using key size. If the value for a breakpoint is false the prop is ignored.

See https://mui.com/material-ui/api/grid/ for more information about MUI Grid props, https://mui.com/material-ui/api/grid-legacy/ for more information about MUI GridLegacy 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 the composite component are wrapped in. Accepts the following values: gridLegacy, gridLegacyItems, grid, gridItems, stack, and group. Option gridLegacy wraps the components into MUI GridLegacy item components and creates a GridLegacy container around them. Option gridLegacyItems just wraps the components into GridLegacy items and leaves the container out. Options grid and gridItems do the same with MUI Grid 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?

RefObject<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 | ComponentSizeGridLegacy

(ALPHA) (Optional) Sets the breakpoint size props of the selector components grid item, when gridLegacy or grid layout is used. The Grid component 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. For the Grid component the object must be added to the props using key size. If the value for a breakpoint is false the prop is ignored.

See https://mui.com/material-ui/api/grid/ for more information about MUI Grid props, https://mui.com/material-ui/api/grid-legacy/ for more information about MUI GridLegacy 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 stack layout wrapper is used. See https://mui.com/material-ui/api/stack/ for more information about what props can be passed to the component.

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.