Skip to content
Home

Number

Info
Demos
Properties

DataValue.Number

DataValue.Number is a base component for displaying values of the type number.

Demos

Empty

<DataValue.Number showEmpty />

Placeholder

The number was not filled in
<DataValue.Number placeholder="The number was not filled in" />

Value

123
<DataValue.Number value={123} />

Label

<DataValue.Number label="Label text" showEmpty />

Label and value

12345678
<DataValue.Number label="Label text" value={12345678} />

Inline

This is before the component123This is after the component
<>

  This is before the component

  <DataValue.Number value={123} inline />

  This is after the component

</>

Inline and label

This is before the component123This is after the component
<>

  This is before the component

  <DataValue.Number label="Label text" value={123} inline />

  This is after the component

</>

With: Thousand separator

12 345 678,9
<DataValue.Number

  label="Label text"

  value={12345678.9}

  thousandSeparator=" "

/>

With: Decimal symbol

123.4567
<DataValue.Number label="Label text" value={123.4567} decimalSymbol="." />

With: Decimals

123,46
<DataValue.Number label="Label text" value={123.4567} decimals={2} />

With: Fixed decimals

123,400
<DataValue.Number label="Label text" value={123.4} fixedDecimals={3} />

With: Prefix

$123,4
<DataValue.Number label="Label text" value={123.4} prefix="$" />

With: Suffix

123,4kr
<DataValue.Number label="Label text" value={123.4} suffix="kr" />

Properties

Standard value component props

PropertyTypeDescription
valuenumber(optional) Source data value for the input
showEmptyboolean(optional) True to show the component even when the value is empty.
labelstring(optional) Field label to show above / before the input feature
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 (when using DataContext)
inlineboolean(optional) True to show the value without any DOM elements surrounding it. I.e for putting it as part of a text.

Component-specific props

PropertyTypeDescription
thousandSeparatorstring(optional) Character to use for separating every three digits.
decimalSymbolstring(optional) What character to use for separating digits and decimals. Defaults to ','.
decimalsnumber(optional) Max number of decimals. Values with more decimals will be rounded.
fixedDecimalsnumber(optional) Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less.
prefixstring(optional) Text added before the value value.
suffixstring(optional) Text added after the value value.