Skip to main content

Phone input

Phone input in Storybook
note

There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Check out the Usage section for details about how and when to use the PhoneNumberInput component.

Basic phone number with single country​

Although you are not required to pass a country code to the PhoneNumberInput, the component will not behave as a phone number input without a country code. You have 3 different options to provide it:

  1. Using the countries prop: you can pass a single ISO country code that will be used as default and the country numeric code will be displayed.
<PhoneNumberInput
  label="Phone input component with US set as default"
  countries={['US']}
/>
  1. Using the initialValue prop: this initializes the input component and it will not show the country numeric code. The phone related features, however, will work normally.
<PhoneNumberInput
  label="Phone input component"
  initialValue={{
    countryCode: 'US',
    phoneNumber: '',
  }}
/>
  1. Using the value prop: this makes the component controlled. The component is initialized and it will not show the country numeric code. The phone related features, however, will work normally.
<PhoneNumberInput
  label="Phone input component"
  initialValue={{
    countryCode: 'US',
    phoneNumber: '',
  }}
/>

Phone input with multiple country codes​

The PhoneNumberInput component displays a dropdown selector for country codes when you specify more than one ISO country code in the countries property. If you do not provide an initialValue, the first country code in the array is the initial value displayed in the dropdown.

<PhoneNumberInput
  label="Phone input component"
  countries={['PL', 'ES', 'US']}
/>

Basic phone number with custom placeholder​

The PhoneNumberInput component manages the placeholder to be displayed depending on the selected country. However, you can override it and set a custom placeholder.

<PhoneNumberInput
  label="Phone input component with a custom placeholder"
  countries={['PL', 'US']}
  placeholder="this is a custom placeholder"
/>

Phone input validation on change​

The PhoneNumberInput component does not provide a specific validation logic but it provides a way to include the developer validation and use the stateMessages property to display any required error messages.

This is an example of handling validation when onChange event is triggered.

export function PhoneNumberInputValidation() {
  const [validationMessages, setValidationMessages] = useState({});

  const onChange = useCallback((e, newValue, errorCode) => {
    const componentPhoneNumber = newValue.phoneNumber;
    const componentCountryCode = newValue.countryCode;
    const componentErrorCode = errorCode?.errorCode;

    setValidationMessages({});

    if (componentErrorCode && componentErrorCode != 0) {
      setValidationMessages({
        error: ['The phone number is not correct'],
      });
    } else {
      if (
        componentPhoneNumber &&
        componentCountryCode &&
        componentCountryCode == 'ES' &&
        componentPhoneNumber.indexOf('6') == 0
      ) {
        setValidationMessages({
          error: ['Only landline numbers are accepted for Spain'],
        });
      }
    }
  }, []);

  return (
    <PhoneNumberInput
      countries={['ES', 'US']}
      label="Accepts any US number but accepts only landline numbers for Spain"
      secondaryLabel="Landline numbers cannot start by 6"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Using ref to set focus (imperative handler)​

PhoneNumberInputand other inputs allow using a ref property to access some native behaviors. However, only certain features are exposed. In this example, when you click the button, the focus will automatically be set in the input below.

export function PhoneNumberRef() {
  const inputRef = useRef(null);

  const setFocus = (e) => {
    inputRef?.current?.focus();
  };

  return (
    <div>
      <Button
        label="Set the focus on input"
        onClick={setFocus}></Button>
      <PhoneNumberInput
        label="Get the focus from the button"
        countries={['ES', 'US']}
        ref={inputRef}
      />
    </div>
  );
}
Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.