--- title: 'Best Practices for number formatting' description: 'Compare the canonical number, currency and date layouts that the components produce for each locale.' version: 10.104.0 generatedAt: 2026-04-17T18:46:12.795Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Number formatting reference This page shows the canonical number, currency and date layouts that the components produce for each locale. For detailed prop lists, see the [NumberFormat](/uilib/components/number-format) component and the [DateFormat](/uilib/components/date-format) component. --- ## Phone number ```tsx render(

) ``` ## Bank account number ```tsx render(

) ``` ## National identification number ```tsx render(

) ``` ## Organization number ```tsx render(

) ``` ## Numbers ```tsx render(

Variation	nb-NO	en-NO	en-GB	sv-SE	da-DK
Default
0 decimals
3 decimals
Negative value
Sign display (except zero)
Invalid input	invalid	invalid	invalid	invalid	invalid

) ``` ### Compact ```tsx render(

Style	nb-NO	en-NO	en-GB	sv-SE	da-DK
Short
Long

) ``` ## Percentage ```tsx render(

Style	nb-NO	en-NO	en-GB	sv-SE	da-DK
Default
3 decimals

) ``` ## Amount and Currency ```tsx render(

Variation	nb-NO	en-NO	en-GB	sv-SE	da-DK
Default
Symbol display
Narrow symbol display
Name display
Code display
0 decimals
3 decimals

) ``` ## Date ```tsx render(

Style	nb-NO	en-NO	en-GB	sv-SE	da-DK
Full
Long
Medium
Short

) ``` ## Date + time ```tsx render(

Style	nb-NO	en-NO	en-GB	sv-SE	da-DK
Full
Long
Medium
Short

) ``` ## Date without year The component always includes the year unless `hideYear` or `hideCurrentYear` is set. ```tsx render(

Style	nb-NO	en-NO	en-GB	sv-SE	da-DK
Full
Long
Medium
Short

) ``` ## Date without year + time ```tsx render(

Style	nb-NO	en-NO	en-GB	sv-SE	da-DK
Full
Long
Medium
Short

) ``` ## Relative time All examples below use the same reference point (`2026-02-06T12:00:00Z`) so the labels stay stable. ```tsx render(

Description	nb-NO	en-NO	en-GB	sv-SE	da-DK
Just now	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:59:30Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:59:30Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:59:30Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:59:30Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:59:30Z" />
In the past	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T11:00:00Z" />
In the future	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T15:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T15:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T15:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T15:00:00Z" />	new Date('2026-02-06T12:00:00Z') } value="2026-02-06T15:00:00Z" />

) ``` ## Duration strings ```tsx render(

Duration	nb-NO	en-NO	en-GB	sv-SE	da-DK
PT2H30M
P1DT2H30M

) ```