Skip to content
Home

SelectCurrency

Info
Demos
Properties
Events

Demos

Option selected

Code Editor
<Field.SelectCurrency
  value="NOK"
  onChange={(value, obj) => console.log('onChange', value, obj)}
/>

With a horizontal layout

Code Editor
<Field.SelectCurrency
  value="NOK"
  layout="horizontal"
  layoutOptions={{
    width: '6rem',
  }}
/>

With help

Code Editor
<Field.SelectCurrency
  value="NOK"
  label="Label text"
  help={{
    title: 'Help is available',
    content:
      'Helping others, encouraging others, are often acts of being kind that have more meaning that you may realize.',
  }}
  onChange={(value, obj) => console.log('onChange', value, obj)}
/>

Disabled

Code Editor
<Field.SelectCurrency
  value="NOK"
  label="Label text"
  onChange={(value, obj) => console.log('onChange', value, obj)}
  disabled
/>

Error

This is what is wrong...
Code Editor
<Field.SelectCurrency
  value="NOK"
  label="Label text"
  onChange={(value, obj) => console.log('onChange', value, obj)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.SelectCurrency
  label="Label text"
  onChange={(value, obj) => console.log('onChange', value, obj)}
  required
  validateInitially
  validateUnchanged
/>

TransformIn and TransformOut

Valuta(Select a currency)

Data Context

"undefined" 
Code Editor
// From the Field (internal value) to the data context or event parameter
const transformOut = (value, currency) => {
  if (value) {
    return currency
  }
}

// To the Field (from e.g. defaultValue)
const transformIn = (currency) => {
  return currency?.iso
}
const MyForm = () => {
  return (
    <Form.Handler onSubmit={console.log}>
      <Form.Card>
        <Field.SelectCurrency
          path="/currency"
          transformIn={transformIn}
          transformOut={transformOut}
          defaultValue="NOK"
        />

        <Value.SelectCurrency
          path="/currency"
          transformIn={transformIn}
          placeholder="(Select a currency)"
          showEmpty
        />

        <Form.SubHeading>Data Context</Form.SubHeading>
        <Tools.Log />
      </Form.Card>
      <Form.SubmitButton />
    </Form.Handler>
  )
}
render(<MyForm />)

Filter currencies

This example demonstrates how to filter specific currencies. Use the currencies property to define a set of currencies and/or the filterCurrencies property to apply custom filtering logic.

Code Editor
<Field.SelectCurrency
  currencies="Scandinavia"
  filterCurrencies={({ iso }) => iso !== 'DKK'}
/>

With Field.Currency

This example demonstrates how to use Field.SelectCurrency together with Field.Currency. It imitates a transaction, and therefore sets the HTML autocomplete attribute for both fields, transaction-currency in Field.SelectCurrency and transaction-amount in Field.Currency. This is done to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

Code Editor
<Form.Handler onSubmit={console.log}>
  <Form.Card>
    <Flex.Horizontal>
      <Field.SelectCurrency
        label="Select a currency"
        path="/currency"
        value="EUR"
        autoComplete="transaction-currency"
      />
      <Field.Currency
        label="Amount"
        currency="/currency"
        autoComplete="transaction-amount"
      />
    </Flex.Horizontal>
  </Form.Card>
  <Form.SubmitButton text="Pay" />
</Form.Handler>