Skip to content
Home

Field.PhoneNumber

Info
Demos
Properties
Events

Import

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

Description

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

There is a corresponding Value.PhoneNumber component.

Relevant links

Value

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

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

It uses the HTML autocomplete attribute (tel-country-code and tel-national) in their respective fields (country code and phone number) to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

Default country code

The default country code is set to +47.

E.164 value format

The component accepts and emits values in E.164 format (e.g. +4712345678). The country code is auto-detected using a longest-prefix-match against all known E.164 codes. The additionalArgs second argument of onChange provides the structured countryCode and phoneNumber separately if needed.

Values with a 00 prefix (e.g. 004712345678) are also accepted — the 00 is interpreted as +. If your backend expects 00 prefix on output, use transformOut to convert back:

<Field.PhoneNumber
  value="004712345678"
  transformOut={(value) =>
    typeof value === 'string' ? value.replace(/^\+/, '00') : value
  }
  onChange={(value) => console.log('onChange', value)}
/>
// onChange "004712345678"

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 are only used when +47 is selected.

Support for locales like sv-SE and da-DK

In addition to the default support for nb-NO and en-GB, you can also use sv-SE and da-DK locales to display country names in Swedish or Danish.

Learn more about importing additional locales.

Filter or prioritize country listing

You can filter countries with the countries property's values Scandinavia, Nordic or Europe.

Countries are sorted in alphabetical order, with the following prioritized countries on top of the list:

  • Norway
  • Sweden
  • Denmark
  • Finland

Validation

By default, it has no validation. However, you can enable it by providing a required, pattern, schema, onChangeValidator, or onBlurValidator property with the needed validation. More about validation in the Getting Started section.

Norwegian mobile numbers

E.g. the following pattern will strictly match Norwegian mobile numbers, which are defined as having a "+47" country code, followed by a number starting with 4 or 9, and exactly 7 more digits. If the country code is set to any other code (1–3 digits), the pattern will match any remaining digits.

<Field.PhoneNumber pattern="((?=\+47)^\+47[49]\d{7}$)|((?!\+47)^\+\d{1,3}\d{5,}$)" />