Skip to content
Home

NumberFormat

Info
Demos
Properties
Provider

Demos

Default numbers

<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>

</P>

Currency

<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} />

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

<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

<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

<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)

<P>

  <NumberFormat value="20001234567" ban />

</P>

National Identification number (Fødselsnummer)

<P>

  <NumberFormat value="18089212345" nin />

</P>

Organization number (Organisasjonsnummer)

<P>

  <NumberFormat value="123456789" org suffix="MVA" />

</P>

Numbers and currencies in different locales

Numbers

Currencies

<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
<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.

<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>