Value.Number#

Import#

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

Description#

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

Before using this component, ensure there is not a more specific value component available that better suits your needs.

There is a corresponding Field.Number component.

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

It inherits all the properties from the NumberFormat component.

For a locale-by-locale reference that pairs these components with their rendered output, see Best Practices for number formatting.

Relevant links#

Demos#

Label and value#

Label text

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

Value from path#

<Form.Handler
  data={{
    myNumber: 12345678,
  }}
>
  <Value.Number
    label="Label text"
    currency
    currencyDisplay="code"
    currencyPosition="before"
    path="/myNumber"
  />
</Form.Handler>

Label only#

Label text

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

Placeholder#

The number was not filled in

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

Inline#

This is before the component This is after the component

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

Suggest an edit