Skip to content
Home

Field.BankAccountNumber

Info
Demos
Properties
Events

Import

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

Description

Field.BankAccountNumber is a wrapper component for string input, with user experience tailored for bank account values.

Use the bankAccountType prop to switch between formats:

  • norwegianBban (default): 11-digit Norwegian account number with mod-11 checksum validation.
  • swedishBban: 4-digit clearing number + account number (up to 14 digits).
  • swedishBankgiro: 7–8 digits.
  • swedishPlusgiro: 2–8 digits.
  • iban: Up to 34 alphanumeric characters, grouped in blocks of four.

Only norwegianBban includes built-in validation. Use onBlurValidator for custom validation of other types.

The value is always a string since account numbers can have leading zeros.

There is a corresponding Value.BankAccountNumber component.

Relevant links

Validators

Internal validators exposed

Field.BankAccountNumber exposes the bankAccountNumberValidator validator through its onChangeValidator and onBlurValidator properties. Take a look at this demo. The bankAccountNumberValidator validator validates whether the bank account number provided is a Norwegian bank account number or not.

Extending validators

Use the validators parameter to keep the default checks and add your own custom rule. Import BankAccountNumberValidator to type your onBlurValidator and get the typed validators object.

import { Field } from '@dnb/eufemia/extensions/forms'
import type { BankAccountNumberValidator } from '@dnb/eufemia/extensions/forms/Field/BankAccountNumber'


const myValidator: BankAccountNumberValidator = (
  value,
  { validators }
) => {
  const { bankAccountNumberValidator } = validators ?? {}
  const prefixChecker = (value: string) => {
    if (value && value[0] !== '1') {
      return new Error('Account number must start with 1')
    }
  }


  // Keep the built-in validator and add a custom prefix rule.
  return [bankAccountNumberValidator, prefixChecker]
}


render(<Field.BankAccountNumber onBlurValidator={myValidator} />)

Demos

Empty

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

Omit mask

<Field.BankAccountNumber
  onChange={(value) => console.log('onChange', value)}
  omitMask
/>

Placeholder

<Field.BankAccountNumber
  placeholder="Enter 11 digits..."
  onChange={(value) => console.log('onChange', value)}
/>

Label

<Field.BankAccountNumber
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Label and value

<Field.BankAccountNumber
  label="Label text"
  value="20001234567"
  onChange={(value) => console.log('onChange', value)}
/>

With help

<Field.BankAccountNumber
  label="Label text"
  value="20001234567"
  help={{
    title: 'Help is available',
    content:
      'The real point is that we all need help somewhere along life’s path whether we think we will or not. And, if you are the one giving and helping, just remember this: no matter what happens later, you will always be secure in the fact knowing that you have remained strong and true to assist those that need your help.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Disabled

<Field.BankAccountNumber
  value="20001234567"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Error

<Field.BankAccountNumber
  value="007"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

<Field.BankAccountNumber
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
  validateInitially
/>

Extend validation with custom validation function

You can extend the existing validation (bankAccountNumberValidator) with your own validation function.

const firstDigitIs1Validator = (value: string) => {
  if (value.substring(0, 1) !== '1') {
    return new Error('First digit is not 1')
  }
}

// Keep the built-in validator and add your own checks.
const myValidator: BankAccountNumberValidator = (
  value,
  { validators }
) => {
  const { bankAccountNumberValidator } = validators ?? {}
  return [bankAccountNumberValidator, firstDigitIs1Validator]
}
render(
  <Field.BankAccountNumber
    required
    value="65845125621"
    onBlurValidator={myValidator}
    validateInitially
  />
)

Bank account types

Use the bankAccountType prop to switch between formats.

<Field.BankAccountNumber
  bankAccountType="swedishBban"
  value="50001234567"
  onChange={(value) => console.log('onChange', value)}
/>
<Field.BankAccountNumber
  bankAccountType="swedishBankgiro"
  value="59140129"
  onChange={(value) => console.log('onChange', value)}
/>
<Field.BankAccountNumber
  bankAccountType="swedishPlusgiro"
  value="1263664"
  onChange={(value) => console.log('onChange', value)}
/>
<Field.BankAccountNumber
  bankAccountType="iban"
  value="NO9386011117947"
  onChange={(value) => console.log('onChange', value)}
/>