Skip to content
Home

PhoneNumber

Info
Demos
Properties
Events

Description

Field.PhoneNumber is a wrapper component for the input of strings, with user experience tailored for phone number values.

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.PhoneNumber />)

There is a corresponding Value.PhoneNumber component.

Value

This component behaves as "one single component". Therefor it combines the country code and the number to a single string during an event callback.

Also, the value property should be a string with the country code, separated from the main number by a space.

The component returns the emptyValue when no number is set, which defaults to undefined.

Default country code

The default country code is set to +47.

Structure and format of phone numbers

Creating a list of all possible phone numbers would be impractical due to the vast number of combinations, especially considering the various country codes, area codes, and local numbers. Additionally, new numbers are constantly being allocated, and existing numbers may be reassigned over time.

Therefore, the structure and format is only used when +47 is selected.

Demos

Empty

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

Placeholder

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

Label

Code Editor
<Field.PhoneNumber
  label="Label text"
  onChange={(...args) => console.log('onChange', ...args)}
/>

Label and value

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

Show only Scandinavian countries

Code Editor
<Field.PhoneNumber
  label="Label text"
  onChange={(...args) => console.log('onChange', ...args)}
  countries="Scandinavia"
/>

With help

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

Disabled

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

Error

This is what is wrong...
Code Editor
<Field.PhoneNumber
  value="007"
  label="Label text"
  onChange={(...args) => console.log('onChange', ...args)}
  error={new FormError('This is what is wrong...')}
/>

Validation - Required

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