Skip to content
Home

PhoneNumber

Info
Demos
Properties
Events

Events

Field-specific events

PropertyTypeDescription
onChange(value?: string, additionalArgs?: { countryCode?: string, phoneNumber?: string, iso?: string }) => void(optional) Callback on phone number and country code change.
onCountryCodeChange(value?: string) => void(optional) Callback on country code change.
onNumberChange(value?: string) => void(optional) Callback on phone number change.

General events

PropertyTypeDescription
onChange(value?: string, additionalArgs: object) => void(optional) Will be called on value changes made by the user, with the new value as argument. When an async function is used, the corresponding FieldBlock will show an indicator on the field label. You can return { success: 'saved' } as const to show a success symbol, or an error or an object with these keys { info: 'Info message', warning: 'Warning message', error: Error('My error') } as const. The second parameter is an object that e.g. contains props (all given Field.* properties).
onFocus(value?: string, additionalArgs: object) => void(optional) Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains props (all given Field.* properties).
onBlur(value?: string, additionalArgs: object) => void(optional) Will be called when the component stop being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains props (all given Field.* properties).

Details about general events arguments

The first argument value returned by the event handlers is a string where the country code and phone-number is separated by a space, e.g. +47 9123457. If the omitCountryCodeField is set to true, then only the phone-number will be used, so the argument would be 9123457 without the leading country code.

The PhoneNumber field also has an extra second parameter that includes additional information about the country code and phone number. This is an object with the following properties:

render(
  <Field.PhoneNumber
    onChange={(
      value: string | undefined, // e.g. "+47 12345678"
      additionalArgs?: {
        phoneNumber: string | undefined // e.g. "12345678"
        countryCode: string // e.g. "+47"
        iso: string // e.g. "NO"
      },
    ) => {}}
  />,
)