Skip to content
Home

Number

Info
Demos
Properties

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.

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. All snake_case properties are converted to camelCase.

Relevant links

Demos

Label and value

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

Value from path

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

Label only

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

Placeholder

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

Inline

This is before the component This is after the component

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