Module: Phone

A phone input component with country code selection.

Parameters:

Name Type Description

props

object

Component props

Properties

Name	Type	Description
`countries`	Array	Array of country codes.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`disabled`	boolean	Whether the input is disabled.
`dropdownAttributes`	object	Custom attributes for the dropdown.
`dropdownClasses`	string \| Array \| object	Custom classes for the dropdown.
`helpTextAttributes`	object	Custom attributes for the help text.
`helpTextClasses`	string \| Array \| object	Custom classes for the help text.
`i18n`	object	i18n object for the country dropdown component.
`id`	string	Optional id (auto-generated if not provided).
`inputAttributes`	string	Custom attributes for the input.
`inputClasses`	string \| Array \| object	Custom classes for the input.
`international`	boolean	Whether the phone number is international format.
`label`	object	Label text.
`labelAttributes`	object	Custom attributes for the label.
`labelClasses`	string \| Array \| object	Custom classes for the label.
`language`	string	Language code for the country dropdown component.
`onChange`	function	Change handler function, fires both on input and dropdown change. Receives { country, number, isValid }.
`preferredCountries`	Array	Array of preferred country codes.
`required`	boolean	Whether the field is required.
`requiredLabelAttributes`	object	Custom attributes for the required label.
`requiredLabelClasses`	string \| Array \| object	Custom classes for the required label.
`size`	string	Component size: 'r', 'l', or 'xl'.
`spacing`	string \| number \| Array \| object	Component spacing.
`usePlaceholder`	boolean	Whether to use a placeholder.
`useValidation`	boolean	Whether to use validation for the phone input.
`width`	number	Width of the component in pixels.

ref

object

Forwarded ref.

Since: 5.5.0
Source: modules/Phone/index.js, line 114

Returns:

Phone component

Type:: JSX.Element

Example

import Phone from '@gravityforms/components/react/admin/modules/Phone';

return <Phone
    countries={ [ 'US', 'CA', 'GB', 'MX', 'DE', 'JP' ] }
    helpTextAttributes={ { content: 'The phone number you entered is not valid.' } }
    i18n={ { allCountries: 'All countries' } }
    id="contact-phone"
    international={ true }
    label="Phone Number"
    onChange={ ( value, event ) => {
        console.log( 'country: ', value.country );
        console.log( 'number: ', value.number );
        console.log( 'isValid: ', value.isValid );
        console.log( 'event: ', event );
    } }
    preferredCountries={ [ 'US', 'CA', 'GB' ] }
    required={ true }
    requiredLabelAttributes={ { content: '(Required)' } }
    size="xl"
    usePlaceholder={ true }
    useValidation={ true }
    width={ 500 }
/>;