Skip to content
Home

Number

Info
Demos
Properties

Description

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

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Number />)

Demos

Empty

Code Editor
<Value.Number showEmpty />

Placeholder

The number was not filled in
Code Editor
<Value.Number placeholder="The number was not filled in" />

Value

123
Code Editor
<Value.Number value={123} />

Label

Code Editor
<Value.Number label="Label text" showEmpty />

Label and value

12345678
Code Editor
<Value.Number label="Label text" value={12345678} />

Inline

This is before the component123This is after the component

Code Editor
<P>
  This is before the component
  <Value.Number value={123} inline />
  This is after the component
</P>

With: Thousand separator

12 345 678,9
Code Editor
<Value.Number
  label="Label text"
  value={12345678.9}
  thousandSeparator=" "
/>

With: Decimal symbol

123.4567
Code Editor
<Value.Number label="Label text" value={123.4567} decimalSymbol="." />

With: Decimals

123,46
Code Editor
<Value.Number label="Label text" value={123.4567} decimalLimit={2} />

With: Prefix

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

With: Suffix

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