Value.SelectCurrency#

Import#

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

Description#

Value.SelectCurrency will render the selected currency display name by the value's ISO code (ISO 4217 code). It displays the currency name in the current locale, together with the currency ISO code, like Norwegian krone (NOK). If the value provided is not a valid/supported ISO code, it displays the value.

There is a corresponding Field.SelectCurrency component.

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.SelectCurrency path="/currency" />)

Relevant links#

• Source code
• Docs code

The useCurrency hook#

You can use the Value.SelectCurrency.useCurrency hook to get the currency display name by ISO code (ISO 4217 code). It returns the currency name in the current locale, together with the currency ISO code, like Norwegian krone (NOK).

import { Value } from '@dnb/eufemia/extensions/forms'

const MyComponent = () => {
  const { getCurrencyDisplayNameByIso } =
    Value.SelectCurrency.useCurrency('NOK')
}

Demos#

Interactive#

<Form.Handler
  data={{
    myCurrency: 'NOK',
  }}
>
  <Flex.Stack>
    <Field.SelectCurrency path="/myCurrency" />
    <Value.SelectCurrency path="/myCurrency" />
  </Flex.Stack>
</Form.Handler>

Placeholder#

<Value.SelectCurrency placeholder="No value given" />

Value#

<Value.SelectCurrency value="NOK" />

Use different locale#

<Form.Handler
  locale="en-GB"
  data={{
    myCurrency: 'CHF',
  }}
>
  <Value.SelectCurrency path="/myCurrency" />
</Form.Handler>

Label#

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

Label and value#

<Value.SelectCurrency label="Label text" value="NOK" />

Inline#

<P>
  This is before the component <Value.SelectCurrency value="NOK" inline />{' '}
  This is after the component
</P>