Import
import { Field } from '@dnb/eufemia/extensions/forms'render(<Field.PhoneNumber />)
Description
Field.PhoneNumber is a wrapper component for the input of strings, 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 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.
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.
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.
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 alphabetically order, with the following prioritized countries on top of the list:
- Norway
- Sweden
- Denmark
- Finland
Validation
By default it has no validation. But you can enable it by giving 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 two-digit code, the pattern will match any 6 digits after the country code.
<Field.PhoneNumber pattern="((?=\+47)^\+47 [49]\d{7}$)|((?!\+47)^\+\d{2} \d{6})" />