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.

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)}
/>

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
/>