Skip to content

Value-specific properties

PropertyTypeDescription
valuenumber(required) A number.
currencystring
boolean
(optional) Currency code (ISO 4217) or true to use the default NOK. Uses two decimals by default.
currencyDisplaystring(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.
currencyPositionstring(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).
minimumnumber(optional) Defines the minimum value of the rendered number. Defaults to Number.MIN_SAFE_INTEGER.
maximumnumber(optional) Defines the maximum value of the rendered number. Defaults to Number.MAX_SAFE_INTEGER.
localestring(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.
compactboolean
string
(optional) Shortens any number or currency including an abbreviation. You can combine compact with currency. It gives you zero decimal by default decimals={0}. Use either short or long. Defaults to short if true is given.
decimalsnumber(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).
roundingomit
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.
prefixReact.Node(optional) Add a string or React component before the number, including white space.
suffixReact.Node(optional) Appends a string or React component after the number, including white space.
srLabelstring(optional) Will add a visually hidden label, to give screen reader users the missing context to easier understand what the number represents.
selectallboolean(optional) Use false to disable the auto select all on the first click. Defaults to true.
alwaysSelectallboolean(optional) Use true to always auto select all on the first click. Defaults to false.
copySelectionboolean(optional) Use false to disable the auto copy feature. Defaults to true.
cleanCopyValueboolean(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.
cleanboolean(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).
monospaceboolean(optional) Sets the font to DNB Mono Regular.
elementstring(optional) Define what HTML element should be used. Defaults to <span>.
optionsobject(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 }}.
skeletonboolean(optional) If set to true, an overlaying skeleton with animation will be shown.
tooltipReact.Node(optional) Provide a string or a React Element to be shown as the tooltip content.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

General properties

PropertyTypeDescription
defaultValuenumber(optional) Default value for the value component. Will not take precedence over the path value given in the data context.
labelstring(optional) Field label to show above the displayed value.
labelSrOnlyboolean(optional) Use true to make the label only readable by screen readers.
helpobject(optional) Provide help content for the field using title and content as a string or React.Node. Additionally, you can set open to true to display the inline help, set the breakout property to false to disable the breakout of the inline help content, or use renderAs set to dialog to render the content in a Dialog (recommended for larger amounts of content).
transformLabelfunction(optional) Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the convertJsxToString function.
inheritLabelboolean(optional) Use true to inherit the label from a visible (rendered) field with the same path.
inheritVisibilityboolean(optional) Use true to inherit the visibility from a field with the same path. You can find more info in the Value section.
showEmptyboolean(optional) Shows the value even if it is empty.
placeholderstring(optional) Text showing in place of the value if no value is given.
pathstring(optional) JSON Pointer for where the data for this input is located in the source dataset.
inlineboolean(optional) For showing the value inline (not as a block element).
maxWidthstring(optional) Use auto for no max-width (use browser default), small, medium or large for predefined standard max widths. Defaults to large.
transformInfunction(optional) Transforms the value before its displayed in the value component.