Skip to content
Home

BankAccountNumber

Info
Demos
Properties
Events

Import

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

Description

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

This field is meant for Norwegian bank account numbers, and therefore takes a 11-digit string as a value. A Norwegian bank account number can have a leading zero, which is why this value is a string and not a number. In addition, we validate 0000 00 00000 as invalid. More info can be found at Wikipedia.

There is a corresponding Value.BankAccountNumber component.

Relevant links

Validators

Internal validators exposed

Field.BankAccountNumber expose the bankAccountNumberValidator validator through its onChangeValidator and onBlurValidator property, take a look at this demo. The bankAccountNumberValidator validator, validates if 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

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

Omit mask

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

Placeholder

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

Label

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

Label and value

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

With help

Code Editor
<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

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

Error

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

Validation - Required

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

Extend validation with custom validation function

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

Code Editor
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
  />,
)