Skip to content
Home

NumberFormat

Info
Demos
Properties
Provider

Demos

Default numbers

Code Editor
<P>
  <NumberFormat value="12345" srLabel="Total:" />
  <NumberFormat>-12345678.9</NumberFormat>
  <NumberFormat prefix={<b>prefix</b>} suffix="suffix">
    -12345678.9
  </NumberFormat>
  <NumberFormat decimals={1}>-1234.54321</NumberFormat>
  <NumberFormat decimals={2} copy_selection={false}>
    -1234
  </NumberFormat>
  <NumberFormat decimals={2}>invalid</NumberFormat>
</P>

Currency

Code Editor
<P>
  <NumberFormat currency>12345</NumberFormat>
  <NumberFormat currency currency_position="before" value={-12345678.9} />
  <NumberFormat currency value={-12345678.95} decimals={0} />
  <NumberFormat currency value={-12345678.9} currency_display="code" />
  <NumberFormat currency value={-12345678.9} currency_display={false} />
  <NumberFormat currency decimals={2}>
    invalid
  </NumberFormat>
</P>

Compact (shorten) numbers

Shorten numbers should only be used for numbers above 100 000. A small k for thousand is not a Norwegian standard, and should not be used in formal contexts.

Code Editor
<P>
  <NumberFormat compact decimals={1}>
    1234
  </NumberFormat>
  <NumberFormat compact decimals={1} value={123456} />
  <NumberFormat compact="short" decimals={2} value={-1723967.38} />
  <NumberFormat compact="long" decimals={3} value={-1234567.9876} />
  <NumberFormat
    compact="long"
    currency
    value={12345}
    decimals={1}
    currency_display="name"
  />
  <NumberFormat compact value={123455678912} decimals={3} />
</P>

Percentage

Code Editor
<P>
  <NumberFormat percent value="12.34" />
  <NumberFormat percent>-12.34</NumberFormat>
  <NumberFormat percent decimals={1}>
    -12.34
  </NumberFormat>
</P>

Phone

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

0047 800 22 222

Code Editor
<P>
  <NumberFormat value="99999999" phone />
  <NumberFormat value="4799999999" phone />
  <NumberFormat value="++4799999999" phone />
  <NumberFormat value="+4780022222" phone link="sms" />
  <NumberFormat value="+47116000" phone selectall={false} />
  <NumberFormat value="+4702000" phone />
</P>

Bank Account number (Kontonummer)

Code Editor
<P>
  <NumberFormat value="20001234567" ban />
</P>

National Identification number (Fødselsnummer)

Code Editor
<P>
  <NumberFormat value="18089212345" nin />
</P>

Organization number (Organisasjonsnummer)

Code Editor
<P>
  <NumberFormat value="123456789" org suffix="MVA" />
</P>

Numbers and currencies in different locales

Numbers

Currencies

Code Editor
<H3>Numbers</H3>
<P>
  <NumberFormat locale="nb-NO" value="-12345678.9" />
  <NumberFormat locale="en-GB" value="-12345678.9" />
  <NumberFormat locale="de-DE" value="-12345678.9" />
  <NumberFormat locale="de-CH" value="-12345678.9" />
  <NumberFormat locale="fr-CH" value="-12345678.9" />
</P>
<H3>Currencies</H3>
<P>
  <NumberFormat locale="nb-NO" value="-12345.6" currency />
  <NumberFormat locale="en-GB" value="-12345.6" currency />
  <NumberFormat locale="de-DE" value="-12345.6" currency />
  <NumberFormat locale="de-CH" value="-12345.6" currency />
  <NumberFormat locale="fr-CH" value="-12345.6" currency />
</P>

NumberFormat and spacing

The NumberFormat uses display: inline-block; in order to make the spacing system to work.

texttexttext
Code Editor
<span>text</span>
<NumberFormat value="1234" currency left right />
<span>text</span>
<NumberFormat value="5678" currency left right />
<span>text</span>

Using the Provider with NumberFormat

In this example every NumberFormat will receive the Provider defined properties, including clean_copy_value.

Code Editor
<Provider
  value={{
    NumberFormat: {
      currency: true,
      omit_rounding: true,
      clean_copy_value: true,
    },
  }}
>
  <P>
    <NumberFormat>12345</NumberFormat>
    <NumberFormat value={-12345.123} decimals={0} />
    <NumberFormat value={-12345678.955} currency_position="before" />
  </P>
</Provider>

Monospace

By using the monospace prop you can set the font to DNB Mono Regular

Code Editor
<NumberFormat value="123456" locale="en-GB" currency="NOK" monospace />