How do I use a React phone number field (react-phone-number-input) or something similar?

default discord avatar
cadebryant9 months ago

I am trying to use React's


, as follows:

  name: 'phone',
  label: 'Phone',
  type: 'ui',
  admin {
    width: '50%',
    components: {
      Field: PhoneInput

At the top of my file I have:

import PhoneInput from 'react-phone-number-input'
import 'react-phone-number-input/styles.css'

But it gives this error in the browser console:

Warning: failed prop type: the prop 'onChange' is marked as required in 'ForwardRef', but its value is 'undefined'.

My understanding is that I need to pass in my own


handler. But I'm not sure how to do this. Shouldn't this component have its own default


handler? Am I really required to roll my own?

I was hoping this component would be more "plug and play". If this is not the case, can someone please either

provide me a working snippet of


being used within a Payload app? Or perhaps suggest an alternative component that is simpler to plug into Payload?

Star on GitHub


Chat on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.