Skip to content
Home

BankAccountNumber

Info
Demos
Properties
Events

Description

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

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

There is a corresponding Value.BankAccountNumber component.

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',

    contents:

      '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 FormError('This is what is wrong...')}

/>

Validation - Required

<Field.BankAccountNumber

  value="20001234567"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  required

/>