Properties
NumberFormat is only exposed as a namespace. Pick the variant you need – this keeps the bundle small because only the variants you import are included.
NumberFormat.Number
| Property | Type | Description |
|---|---|---|
value | number string | (optional) A number or a string containing a number. |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | "omit" "half-even" "half-up" | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | "auto" "always" "exceptZero" "negative" "never" | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
clean | boolean | (optional) If set to true a dirty string will be parsed to extract the number (prefix -123.45 suffix would result in e.g. kr -123,45). |
prefix | React.ReactNode | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
selectAll | boolean | (optional) Use false to disable the auto select all on the first click. Defaults to true. |
alwaysSelectAll | boolean | (optional) Use true to always auto select all on the first click. Defaults to false. |
copySelection | boolean | (optional) Use false to disable the auto copy feature. Defaults to true. |
cleanCopyValue | boolean | (optional) If set to true the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to false. |
srLabel | React.ReactNode | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
monospace | boolean | (optional) Sets the font to DNB Mono Regular. |
element | string | (optional) Define what HTML element should be used. Defaults to <span>. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
compact | boolean string | (optional) Shortens any number or currency including an abbreviation. Available on both NumberFormat.Number and NumberFormat.Currency. It gives you zero decimal by default decimals={0}. Use either short or long. Defaults to short if true is given. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
NumberFormat.Currency
| Property | Type | Description |
|---|---|---|
value | number string | (optional) A number or a string containing a number. |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
currency | string boolean | (optional) Currency code (ISO 4217) or true to use the default NOK. Defaults to true when using NumberFormat.Currency. Uses two decimals by default. |
currencyDisplay | string | (optional) Use either empty/false to hide the sign/name or use code (NOK), name (kroner), symbol (kr) or narrowSymbol (for a shorter symbol variant). Defaults to narrowSymbol when the locale is no else we default to code. |
currencyPosition | string | (optional) Use either before or after to change/define the position of the currency. Defaults to auto (Browser API defaults, but with an exception, if the locale is nb-NO or no, use after as the default position). |
compact | boolean string | (optional) Shortens any number or currency including an abbreviation. Available on both NumberFormat.Number and NumberFormat.Currency. It gives you zero decimal by default decimals={0}. Use either short or long. Defaults to short if true is given. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | "omit" "half-even" "half-up" | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | "auto" "always" "exceptZero" "negative" "never" | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
clean | boolean | (optional) If set to true a dirty string will be parsed to extract the number (prefix -123.45 suffix would result in e.g. kr -123,45). |
prefix | React.ReactNode | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
selectAll | boolean | (optional) Use false to disable the auto select all on the first click. Defaults to true. |
alwaysSelectAll | boolean | (optional) Use true to always auto select all on the first click. Defaults to false. |
copySelection | boolean | (optional) Use false to disable the auto copy feature. Defaults to true. |
cleanCopyValue | boolean | (optional) If set to true the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to false. |
srLabel | React.ReactNode | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
monospace | boolean | (optional) Sets the font to DNB Mono Regular. |
element | string | (optional) Define what HTML element should be used. Defaults to <span>. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
NumberFormat.Percent
| Property | Type | Description |
|---|---|---|
value | number string | (optional) A number or a string containing a number. |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | "omit" "half-even" "half-up" | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | "auto" "always" "exceptZero" "negative" "never" | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
clean | boolean | (optional) If set to true a dirty string will be parsed to extract the number (prefix -123.45 suffix would result in e.g. kr -123,45). |
prefix | React.ReactNode | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
selectAll | boolean | (optional) Use false to disable the auto select all on the first click. Defaults to true. |
alwaysSelectAll | boolean | (optional) Use true to always auto select all on the first click. Defaults to false. |
copySelection | boolean | (optional) Use false to disable the auto copy feature. Defaults to true. |
cleanCopyValue | boolean | (optional) If set to true the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to false. |
srLabel | React.ReactNode | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
monospace | boolean | (optional) Sets the font to DNB Mono Regular. |
element | string | (optional) Define what HTML element should be used. Defaults to <span>. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
NumberFormat.PhoneNumber
| Property | Type | Description |
|---|---|---|
value | number string | (optional) A number or a string containing a number. |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | "omit" "half-even" "half-up" | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | "auto" "always" "exceptZero" "negative" "never" | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
clean | boolean | (optional) If set to true a dirty string will be parsed to extract the number (prefix -123.45 suffix would result in e.g. kr -123,45). |
prefix | React.ReactNode | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
selectAll | boolean | (optional) Use false to disable the auto select all on the first click. Defaults to true. |
alwaysSelectAll | boolean | (optional) Use true to always auto select all on the first click. Defaults to false. |
copySelection | boolean | (optional) Use false to disable the auto copy feature. Defaults to true. |
cleanCopyValue | boolean | (optional) If set to true the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to false. |
srLabel | React.ReactNode | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
monospace | boolean | (optional) Sets the font to DNB Mono Regular. |
element | string | (optional) Define what HTML element should be used. Defaults to <span>. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
link | string | (optional) Use tel (default) or sms to enable a clickable / touchable anchor link. Only available on NumberFormat.PhoneNumber. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
NumberFormat.BankAccountNumber
Norwegian bank account number (e.g. 2000 12 34567).
| Property | Type | Description |
|---|---|---|
value | number string | (optional) A number or a string containing a number. |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | "omit" "half-even" "half-up" | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | "auto" "always" "exceptZero" "negative" "never" | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
clean | boolean | (optional) If set to true a dirty string will be parsed to extract the number (prefix -123.45 suffix would result in e.g. kr -123,45). |
prefix | React.ReactNode | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
selectAll | boolean | (optional) Use false to disable the auto select all on the first click. Defaults to true. |
alwaysSelectAll | boolean | (optional) Use true to always auto select all on the first click. Defaults to false. |
copySelection | boolean | (optional) Use false to disable the auto copy feature. Defaults to true. |
cleanCopyValue | boolean | (optional) If set to true the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to false. |
srLabel | React.ReactNode | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
monospace | boolean | (optional) Sets the font to DNB Mono Regular. |
element | string | (optional) Define what HTML element should be used. Defaults to <span>. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
NumberFormat.NationalIdentityNumber
Norwegian national identification number (e.g. 180892 12345).
| Property | Type | Description |
|---|---|---|
value | number string | (optional) A number or a string containing a number. |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | "omit" "half-even" "half-up" | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | "auto" "always" "exceptZero" "negative" "never" | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
clean | boolean | (optional) If set to true a dirty string will be parsed to extract the number (prefix -123.45 suffix would result in e.g. kr -123,45). |
prefix | React.ReactNode | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
selectAll | boolean | (optional) Use false to disable the auto select all on the first click. Defaults to true. |
alwaysSelectAll | boolean | (optional) Use true to always auto select all on the first click. Defaults to false. |
copySelection | boolean | (optional) Use false to disable the auto copy feature. Defaults to true. |
cleanCopyValue | boolean | (optional) If set to true the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to false. |
srLabel | React.ReactNode | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
monospace | boolean | (optional) Sets the font to DNB Mono Regular. |
element | string | (optional) Define what HTML element should be used. Defaults to <span>. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
NumberFormat.OrganizationNumber
Norwegian organization number (e.g. 123 456 789). Screen readers read digit by digit.
| Property | Type | Description |
|---|---|---|
value | number string | (optional) A number or a string containing a number. |
locale | string | (optional) Use a 2 Letter Language Code or an extended code such as nb-NO. Use auto to detect the locale from the browser (navigator.language). Defaults to the Norwegian locale: nb-NO. |
decimals | number | (optional) Set a number to define the number of decimals. Like decimals="0" will ensure that decimals are simply not shown. The default decimals for currency usage are 2 (Browser API default). |
rounding | "omit" "half-even" "half-up" | (optional) If omit is given, the decimal will NOT be rounded. If set to half-even, the value will be rounded to the nearest even number. If set to half-up, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down. Defaults to half-up. |
signDisplay | "auto" "always" "exceptZero" "negative" "never" | (optional) When to display the sign for the number. Use auto (default) for negative numbers only, always to always display sign, exceptZero for positive and negative numbers but not zero, negative for negative numbers only including negative zero, or never to never display sign. |
clean | boolean | (optional) If set to true a dirty string will be parsed to extract the number (prefix -123.45 suffix would result in e.g. kr -123,45). |
prefix | React.ReactNode | (optional) Add a string or React component before the number, including white space. |
suffix | React.ReactNode | (optional) Appends a string or React component after the number, including white space. When the suffix is a string starting with /, no space is added (e.g. suffix="/mnd" renders "123/mnd"). |
selectAll | boolean | (optional) Use false to disable the auto select all on the first click. Defaults to true. |
alwaysSelectAll | boolean | (optional) Use true to always auto select all on the first click. Defaults to false. |
copySelection | boolean | (optional) Use false to disable the auto copy feature. Defaults to true. |
cleanCopyValue | boolean | (optional) If set to true the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to false. |
srLabel | React.ReactNode | (optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents. |
monospace | boolean | (optional) Sets the font to DNB Mono Regular. |
element | string | (optional) Define what HTML element should be used. Defaults to <span>. |
options | object | (optional) Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. options={{ 'minimumFractionDigits': 2 }}. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Translations
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
NumberFormat.clipboardCopy | Kopiert | Copied | Kopierad | Kopieret |
NumberFormat.notAvailable | Ikke tilgjengelig | Not available | Inte tillgänglig | Ikke tilgængelig |