Skip to content
Home

Number

Info
Demos
Properties

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