Skip to content
Home

Value.BankAccountNumber

Info
Demos
Properties

Import

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

Description

Value.BankAccountNumber is a wrapper component for displaying string values, with user experience tailored for bank account number values.

Use the bankAccountType prop to format different account types: norwegianBban (default), swedishBban, swedishBankgiro, swedishPlusgiro, or iban.

There is a corresponding Field.BankAccountNumber component.

Relevant links

Demos

Empty

Bankkonto
<Value.BankAccountNumber showEmpty />

Placeholder

BankkontoThe value was not filled in
<Value.BankAccountNumber placeholder="The value was not filled in" />

Value

Bankkonto2000 12 34567
<Value.BankAccountNumber value="20001234567" />

Label

Label text
<Value.BankAccountNumber label="Label text" showEmpty />

Label and value

Label text2000 12 34567
<Value.BankAccountNumber label="Label text" value="20001234567" />

Inline

This is before the component 2000 12 34567 This is after the component

<P>
  This is before the component{' '}
  <Value.BankAccountNumber value="20001234567" inline /> This is after the
  component
</P>

Bank account types

Use the bankAccountType prop to switch between formats.

Svenskt kontonummer5000-1234567Bankgiro5914-0129Plusgiro126366-4IBANNO93 8601 1117 947
<Value.BankAccountNumber
  bankAccountType="swedishBban"
  value="50001234567"
/>
<Value.BankAccountNumber
  bankAccountType="swedishBankgiro"
  value="59140129"
/>
<Value.BankAccountNumber
  bankAccountType="swedishPlusgiro"
  value="1263664"
/>
<Value.BankAccountNumber
  bankAccountType="iban"
  value="NO9386011117947"
/>