Skip to content

Number

Description

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.
    NOK 12,345,678.90
  • Phone numbers e.g.
    0047 99 99 99 99
  • Bank account number e.g.
    2000 12 34567
  • National identification number e.g.
    180892 12345
  • Organization number e.g.
    123 456 789

Defaults

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.

Sources

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

Details

Screen readers requires numbers to be formatted properly in order to be read as numbers. The Number 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.

Accessibility

To enhance the Copy & Paste experience of copying numbers into other applications, the Number 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-ui-lib/components/Number'
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 Number cleanNumber in the source code to find more examples.

import { cleanNumber } from 'dnb-ui-lib/components/Number'
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-US. 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

Provider

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

import Provider from 'dnb-ui-lib/shared/Provider'
render(
<Provider locale="en-US" currency_display="code">
<MyApp>
text <Number>123</Number> table etc.
</MyApp>
</Provider>
)

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">
...
</html>

Demos

Default numbers

12,345-12,345,678.9prefix -12,345,678.9 suffix-1,234.54321

Currency

NOK 12,345.00-12,345,678.90 NOKNOK -12,345,678NOK -12,345,678.90

Phone number

99 99 99 990047 99 99 99 990047 99 99 99 990047 800 22 2220047 116 0000047 02000

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

Bank Account number (Kontonummer)

2000 12 34567

National Identification number (Fødselsnummer)

180892 12345

Organization number (Organisasjonsnummer)

123 456 789 MVA

Numbers and currencies in different locales

Numbers

-12,345,678.9-12,345,678.9-12,345,678.9-12,345,678.9-12,345,678.9

Currencies

NOK -12,345.60NOK -12,345.60NOK -12,345.60NOK -12,345.60NOK -12,345.60