Skip to content
Home

PhoneNumber

Info
Demos
Properties
Events

Demos

Empty

Code Editor
<Field.PhoneNumber
  onFocus={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onFocus', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  onBlur={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onBlur', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  onCountryCodeChange={(countryCode) =>
    console.log('onCountryCodeChange', countryCode)
  }
  onNumberChange={(phoneNumber) =>
    console.log('onNumberChange', phoneNumber)
  }
/>

Placeholder

Code Editor
<Field.PhoneNumber
  placeholder="Call this number"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
/>

Label

Code Editor
<Field.PhoneNumber
  numberLabel="Label text"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
/>

Label and value

Code Editor
<Field.PhoneNumber
  numberLabel="Label text"
  value="+47 98765432"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
/>

Show only Scandinavian countries

Code Editor
<Field.PhoneNumber
  numberLabel="Label text"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  countries="Scandinavia"
/>

With help

Code Editor
<Field.PhoneNumber
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  help={{
    title: 'Help is available',
    content:
      'Helping others, encouraging others, are often acts of being kind that have more meaning that you may realize.',
  }}
/>

Used in Card

Code Editor
<Form.Card>
  <Field.PhoneNumber />
</Form.Card>

Disabled

Code Editor
<Field.PhoneNumber
  value="+47 12345678"
  numberLabel="Label text"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  disabled
/>

Error

This is what is wrong...
Code Editor
<Field.PhoneNumber
  value="007"
  numberLabel="Label text"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  error={new Error('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.PhoneNumber
  value="+47 888"
  numberLabel="Label text"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  required
/>

Validation - Pattern

Code Editor
<Field.PhoneNumber
  value="+41 123"
  numberLabel="Label text"
  onChange={(value, { countryCode, phoneNumber, iso }) =>
    console.log('onChange', value, {
      countryCode,
      phoneNumber,
      iso,
    })
  }
  pattern="^\+41 [1]\d{2}$"
/>

Filter countries

This example demonstrates how to filter specific countries. Use the countries property to define a set of countries and/or the filterCountries property to apply custom filtering logic.

Code Editor
<Field.PhoneNumber
  countries="Scandinavia"
  filterCountries={({ iso }) => iso !== 'DK'}
/>

With FieldBlock label

This example demonstrates how to use the label and labelDescription props on the FieldBlock wrapper.

Additional Label that will stretch all the way down here
And a label description that will stretch all the way down here
Code Editor
<Field.PhoneNumber
  label="Additional Label that will stretch all the way down here"
  labelDescription="And a label description that will stretch all the way down here"
/>

Transform in and out

This example demonstrates how to transform data when it enters and leaves the form field.

You can use the transformIn property to modify the incoming data before it is displayed in the field, and the transformOut property to adjust the data before it is submitted or processed. When transformIn one can either return a simple value "+47 98765432" or an object { countryCode:"+47", phoneNumber:"98765432" }.

{
  "myField": {
    "countryCode": "GB",
    "phoneNumber": "9123457",
    "countryCodePrefix": "+44"
  }
} 
Code Editor
const transformOut = (internal, additionalArgs) => {
  return {
    countryCode: additionalArgs?.iso,
    phoneNumber: additionalArgs?.phoneNumber,
    countryCodePrefix: additionalArgs?.countryCode,
  }
}
const transformIn = (external) => {
  return {
    countryCode: external?.countryCodePrefix,
    phoneNumber: external?.phoneNumber,
  }
}
render(
  <Form.Handler
    defaultData={{
      myField: {
        countryCode: 'GB',
        phoneNumber: '9123457',
        countryCodePrefix: '+44',
      },
    }}
  >
    <Form.Card>
      <Field.PhoneNumber
        path="/myField"
        transformOut={transformOut}
        transformIn={transformIn}
        numberLabel="Transform in and out"
      />
      <Tools.Log />
    </Form.Card>
  </Form.Handler>,
)

Here is how you can deal with TypeScript types for the transform functions:

import { AdditionalArgs } from '@dnb/eufemia/src/extensions/forms/Field/PhoneNumber'


type MyFieldShape = {
  countryCode: string
  phoneNumber: string
  countryCodePrefix: string
}


const transformOut = (internal, additionalArgs = {}) => {
  const {
    countryCode: countryCodePrefix,
    phoneNumber,
    iso: countryCode,
  } = additionalArgs as AdditionalArgs


  return {
    countryCode,
    phoneNumber,
    countryCodePrefix,
  } satisfies MyFieldShape
}


const transformIn = (
  {
    countryCode: iso,
    phoneNumber,
    countryCodePrefix: countryCode,
  }: MyFieldShape = {} as MyFieldShape | undefined,
) => {
  return {
    countryCode,
    phoneNumber,
    iso,
  } satisfies AdditionalArgs
}