A ready to use DNB number formatter. Use it where over you have to display a number, a currency value, phone number etc.

Good reasons for why we have this is to:

  • uniform the formation of numbers for all DNB applications.
  • and make numbers accessible to screen readers.

Supported formats

  • Numbers in general e.g.
    12 345 678,9
  • Currency e.g.
    12 345 678,90 norske kroner
  • Phone numbers e.g.
    0047 99 99 99 99
  • Bank account number e.g.
    20 00 12 34 56 7
  • National identification number e.g.
    18 08 92 1 2 3 4 5
  • Organization number e.g.
    1 2 3 4 5 6 7 8 9


It uses the browser APIs number.toLocaleString or Intl.NumberFormat.format under the hood. As well as some custom formatter. The locale defaults to:

  • Locale: nb-NO
  • Currency: NOK

Element and style

The number component is style independent, so it has no visual styles. By default a <span> is used (with speak-as: numbers, even the support is very low). But you can easily change the element type by providing something else to element="div" property.


Eufemia is basing their number formats on both the Norwegian authority and Språkradet. Wikipedia has more info on world wide decimal separator usage.


Screen readers requires numbers to be formatted properly in order to be read as numbers. The NumberFormat component will help to achieve this requirement.

So, numbers are formatted differently for screen readers than the visual number. And numbers also gets assigned a lang attribute, so the screen reader knows what language (locale) should be used on the particular number, even if the text around not corresponds to the same language.


To enhance the Copy & Paste experience of copying numbers into other applications, the NumberFormat component automatically changes the number formatting to be without thousand separator and to have a dot, instead of a coma for the decimal separator.

NVDA has also issues on reconciling the lang attribute, this makes it hard to have a solid and good working solution for reading numbers. VoiceOver on desktop makes a perfect job there.

VoiceOver on mobile devices (iOS) only supports numbers read out properly to a maximum of 99,999.00. On amounts above this value, VO reads numbers digit by digit.

Formatting only

You can use the formatting without using the Component. Have a look at the available properties.

import { format } from '@dnb/eufemia/components/number-format/NumberUtils'
const value = 12345678.9
// basic formatting
const number = format(value)
// by using returnAria you get an object
const { number, aria } = format(value, {
locale: 'nb-NO', // also inherited from the Provider
currency: true,
returnAria: true

Using number helpers, like cleanNumber

You can use the clean helpers without using the Component. Have a look at the available properties. Also, you may check out the related tests NumberFormat > cleanNumber in the source code to find more examples.

import { cleanNumber } from '@dnb/eufemia/components/number-format/NumberUtils'
const string = cleanNumber('prefix -12 345,678 suffix') // returns -12345.678
const string = cleanNumber('prefix -12.345,678 suffix') // returns -12345.678

Node.js and SSR usage

If you run the component or format function in Node.js you have to include ICU data in order to display other locales than en-GB. You can do this by:

  • installing npm i full-icu
  • and call node (or jest) with an environment variable pointing to the package: NODE_ICU_DATA=./node_modules/full-icu node ...
  • after a Node.js version upgrade you may have to run npm rebuild


You can send down the locale as an application wide property (Context). More info about the provider and locale usage.

import Provider from '@dnb/eufemia/shared/Provider'
<Provider locale="en-GB" currency_display="code">
text <NumberFormat>123</NumberFormat> table etc.

Known issues

Edge Browser on Windows 10 is converting numbers automatically to followable links. This makes the experience on NVDA bad, as it reads also the new, unformatted link number.

You can disable this behavior:

<html x-ms-format-detection="none">


Default numbers

12 345,0-12 345 678,9prefix -12 345 678,9 suffix-1 234,54321


12 345,00 norske kroner-12 345 678,90 norske kroner-12 345 679 norske kroner-12 345 678,90 norske kroner


By using selectall={false} you disable the auto select all feature.

99 99 99 990047 99 99 99 990047 99 99 99 990047 800 22 2220047 11 60 000047 02 00 0

Bank Account number (Kontonummer)

20 00 12 34 56 7

National Identification number (Fødselsnummer)

18 08 92 1 2 3 4 5

Organization number (Organisasjonsnummer)

1 2 3 4 5 6 7 8 9 MVA

Numbers and currencies in different locales


-12 345 678,9-12,345,678.9-12.345.678,9-12’345’678.9-12 345 678,9


-12 345,60 norske kroner-12,345.60 Norwegian kroner-12.345,60 Norwegische Kronen-12’345.60 Norwegische Kronen-12 345.60 couronnes norvégiennes