Skip to content
Home

Currency

Info
Demos
Properties
Events

Description

Field.Currency is a wrapper component for the input of numbers, with user experience tailored for currency values.

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

There is a corresponding Value.Currency component.

Demos

Empty

Code Editor
<Field.Currency onChange={(value) => console.log('onChange', value)} />

Placeholder

Code Editor
<Field.Currency

  placeholder="Enter a number"

  onChange={(value) => console.log('onChange', value)}

/>

Label

Code Editor
<Field.Currency

  label="Amount"

  onChange={(value) => console.log('onChange', value)}

/>

Label and value

Code Editor
<Field.Currency

  value={150000}

  currency="NOK"

  label="Amount"

  onChange={(value) => console.log('onChange', value)}

/>

With help

Code Editor
<Field.Currency

  value={150000}

  currency="NOK"

  label="Amount"

  help={{

    title: 'Help is available',

    contents:

      'Helping others, without expecting anything in return is what true self-worth is all about.',

  }}

  onChange={(value) => console.log('onChange', value)}

/>

Disabled

Code Editor
<Field.Currency

  value={25000000}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Error

This is what is wrong...
Code Editor
<Field.Currency

  value={12345678}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

/>

Validation - Required

Code Editor
<Field.Currency

  value={42}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  required

/>