#SelectCurrency

#Import

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

#Description

Field.SelectCurrency is a wrapper component for Field.Selection, with options built in for selecting a currency. The list of available currencies to select is carefully curated to meet the demands we know today. When selecting a currency, the value returned is the selected currency's ISO 4217 code (currency code) like NOK for Norwegian krone.

It supports the HTML autocomplete attribute. Consider setting autoComplete="transaction-currency" if used to set the currency of a transaction, in a payment form.

There is a corresponding Value.SelectCurrency component.

#Relevant links

• Source code
• Docs code

#Filter or prioritize currency listing

You can filter currencies with the currencies property's values Scandinavia, Nordic or Europe.

Currencies are sorted in alphabetically order, with the following prioritized currencies on top of the list:

• Norwegian krone
• Swedish krona
• Danish krone
• Euro
• United States dollar

#TransformIn and TransformOut

You can use the transformIn and transformOut to transform the value before it gets displayed in the field and before it gets sent to the form context. The second parameter is the currency object. You may have a look at the demo below to see how it works.

import type { CurrencyType } from '@dnb/eufemia/extensions/forms/Field/SelectCurrency'

// From the Field (internal value) to the data context or event parameter
const transformOut = (internal: string, currency: CurrencyType) => {
  if (internal) {
    return `${currency.name} (${internal})`
  }
}

// To the Field (from e.g. defaultValue)
const transformIn = (external: unknown) => {
  return String(external).match(/\((.*)\)/)?.[1] || 'NOK'
}

#onFocus, onBlur, onChange

These events have an additional parameter with the currency object.

const onFocus = (value, currency) => {}

#The currency object

{
  continent: 'Europe',
  name: 'Norsk krone',
  iso: 'NOK',
  decimals: 2,
  i18n: {
    en: 'Norwegian krone',
    nb: 'Norsk krone',
  },
  regions: ['Scandinavia', 'Nordic']
},