feat(Forms): add bankAccountType prop with formatting and input masks

Add bankAccountType prop to Field.BankAccountNumber and Value.BankAccountNumber
supporting norwegianBban, swedishBban, swedishBankgiro, swedishPlusgiro, and iban.

This commit adds:
- Input masks and placeholders per bank account type
- Type-aware display formatting in Value.BankAccountNumber
- Extended formatBAN() in NumberUtils with bankAccountType parameter
- inputMode switching (text for IBAN, numeric for others)

Validation is only enabled for norwegianBban (default).
Validation for other types will be added separately.

Author: langz

packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx

@@ -173,6 +173,20 @@ const string = cleanNumber('prefix -12 345,678 suffix') // returns -12345.678
 const string = cleanNumber('prefix -12.345,678 suffix') // returns -12345.678
 ```
 
+### Format bank account numbers
+
+Use `formatBAN` to format bank account numbers. It supports Norwegian BBAN, Swedish BBAN, Swedish Bankgiro, Swedish Plusgiro, and IBAN.
+
+```ts
+import { formatBAN } from '@dnb/eufemia/components/number-format/NumberUtils'
+
+const { number, aria } = formatBAN('20001234567') // { number: '2000 12 34567', aria: '20 00 12 34 56 7' }
+const { number, aria } = formatBAN('50001234567', 'swedishBban') // { number: '5000-1234567', aria: '50 00 12 34 56 7' }
+const { number, aria } = formatBAN('59140129', 'swedishBankgiro') // { number: '5914-0129', aria: '59 14 01 29' }
+const { number, aria } = formatBAN('1263664', 'swedishPlusgiro') // { number: '126366-4', aria: '12 63 66 4' }
+const { number, aria } = formatBAN('NO9386011117947', 'iban') // { number: 'NO93 8601 1117 947', aria: 'N O 9 3 8 6 0 1 1 1 1 7 9 4 7' }
+```
+
 ### Element and style
 
 The number component is style-independent, so it has no visual styles. By default, a `<span>` is used (with [speak-as: numbers](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as), even though the support is very low). However, you can easily change the element type by providing a different value to the `element="div"` property.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/Examples.tsx

@@ -53,3 +53,33 @@ export const Inline = () => {
     </ComponentBox>
   )
 }
+
+export const SwedishBankAccountTypes = () => {
+  return (
+    <ComponentBox>
+      <Value.BankAccountNumber
+        bankAccountType="swedishBban"
+        value="50001234567"
+      />
+      <Value.BankAccountNumber
+        bankAccountType="swedishBankgiro"
+        value="59140129"
+      />
+      <Value.BankAccountNumber
+        bankAccountType="swedishPlusgiro"
+        value="1263664"
+      />
+    </ComponentBox>
+  )
+}
+
+export const IbanValue = () => {
+  return (
+    <ComponentBox>
+      <Value.BankAccountNumber
+        bankAccountType="iban"
+        value="NO9386011117947"
+      />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/demos.mdx

@@ -29,3 +29,11 @@ import * as Examples from './Examples'
 ### Inline
 
 <Examples.Inline />
+
+### Swedish bank account types
+
+<Examples.SwedishBankAccountTypes />
+
+### IBAN
+
+<Examples.IbanValue />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/info.mdx

@@ -13,6 +13,8 @@ render(<Value.BankAccountNumber />)
 
 `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](/uilib/extensions/forms/feature-fields/BankAccountNumber) component.
 
 ```jsx

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/properties.mdx

@@ -5,11 +5,18 @@ showTabs: true
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
+import { BankAccountNumberValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/BankAccountNumber/BankAccountNumberDocs'
 
 ## Properties
 
+### BankAccountNumber-specific properties
+
+<PropertiesTable props={BankAccountNumberValueProperties} />
+
+### General properties
+
 <PropertiesTable props={ValueProperties} />
 
 ## Translations
 
-<TranslationsTable localeKey={['BankAccountNumber.label']} />
+<TranslationsTable localeKey={['BankAccountNumber']} />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx

@@ -17,6 +17,7 @@ Get more [details about releases](/uilib/releases) or have a look on all [releas
 
 ## v11.0.0
 
+- Added `bankAccountType` prop to [Field.BankAccountNumber](/uilib/extensions/forms/feature-fields/BankAccountNumber/) and [Value.BankAccountNumber](/uilib/extensions/forms/Value/BankAccountNumber/) with support for Swedish BBAN, Swedish Bankgiro, Swedish Plusgiro, and IBAN.
 - Added `preventDefaultOnSubmit` to [Form.Handler](/uilib/extensions/forms/Form/Handler/), allowing native browser form submission such as `POST` to a form `action`.
 - Removed automatic horizontal card-coupled outset alignment for [Form.MainHeading](/uilib/extensions/forms/Form/MainHeading/), [Form.SubHeading](/uilib/extensions/forms/Form/SubHeading/), [Form.SubmitButton](/uilib/extensions/forms/Form/SubmitButton/) and [Form.ButtonRow](/uilib/extensions/forms/Form/ButtonRow/).
 - [Form.Card](/uilib/extensions/forms/Form/Card/) no longer enables `outset` by default.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/Examples.tsx

@@ -145,3 +145,59 @@ export const ValidationExtendValidator = () => {
     </ComponentBox>
   )
 }
+
+export const SwedishBankAccountTypes = () => {
+  return (
+    <ComponentBox>
+      <Field.BankAccountNumber
+        bankAccountType="swedishBban"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.BankAccountNumber
+        bankAccountType="swedishBban"
+        value="50001234567"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.BankAccountNumber
+        bankAccountType="swedishBankgiro"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.BankAccountNumber
+        bankAccountType="swedishBankgiro"
+        value="5914012"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.BankAccountNumber
+        bankAccountType="swedishBankgiro"
+        value="59140129"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.BankAccountNumber
+        bankAccountType="swedishPlusgiro"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.BankAccountNumber
+        bankAccountType="swedishPlusgiro"
+        value="1263664"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.BankAccountNumber
+        bankAccountType="swedishPlusgiro"
+        value="43219876"
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const Iban = () => {
+  return (
+    <ComponentBox>
+      <Field.BankAccountNumber
+        bankAccountType="iban"
+        value="NO9386011117947"
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/demos.mdx

@@ -47,3 +47,13 @@ import * as Examples from './Examples'
 You can [extend the existing validation](/uilib/extensions/forms/create-component/useFieldProps/info/#validators) (`bankAccountNumberValidator`) with your own validation function.
 
 <Examples.ValidationExtendValidator />
+
+### Swedish bank account types
+
+These examples show the Swedish bank account formats: BBAN (clearing number + account), Bankgiro (7 or 8 digits), and Plusgiro (2–8 digits). Each type includes an empty field for testing input from scratch, and pre-filled fields that demonstrate the formatted mask with dash separators.
+
+<Examples.SwedishBankAccountTypes />
+
+### IBAN
+
+<Examples.Iban />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/BankAccountNumber/info.mdx

@@ -13,8 +13,23 @@ render(<Field.BankAccountNumber />)
 
 `Field.BankAccountNumber` is a wrapper component for [string input](/uilib/extensions/forms/base-fields/String), with user experience tailored for bank account values.
 
-This field is meant for Norwegian bank account numbers and therefore takes an 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 information can be found at [Wikipedia](https://no.wikipedia.org/wiki/Kontonummer).
+By default, this field handles Norwegian bank account numbers (BBAN) — an 11-digit string with a mod-11 checksum. Use the `bankAccountType` prop to switch between formats:
+
+- `norwegianBban` (default): 11-digit Norwegian account number. Validated with mod-11 checksum.
+- `swedishBban`: Swedish account number with 4-digit clearing number + account number (up to 14 digits).
+- `swedishBankgiro`: Swedish Bankgiro number (7–8 digits).
+- `swedishPlusgiro`: Swedish Plusgiro number (2–8 digits).
+- `iban`: International Bank Account Number (up to 34 alphanumeric characters).
+
+The value is always a string since account numbers (e.g. Norwegian BBAN) can have leading zeros.
+More information about Norwegian bank account numbers can be found at [Wikipedia](https://no.wikipedia.org/wiki/Kontonummer).
+
+### Input mask behavior
+
+For types with variable-length numbers (`swedishBankgiro` and `swedishPlusgiro`), the input mask adapts based on whether a `value` or `defaultValue` is provided:
+
+- **With a value:** The mask includes the dash separator at the correct position based on the value length. For example, a 7-digit Bankgiro uses `XXX-XXXX` and an 8-digit Bankgiro uses `XXXX-XXXX`.
+- **Without a value:** The mask is digit-only (no dash), since the final length is not known during input. The formatted display with dashes is applied by `Value.BankAccountNumber` and `formatBAN`.
 
 There is a corresponding [Value.BankAccountNumber](/uilib/extensions/forms/Value/BankAccountNumber) component.
 

packages/dnb-eufemia/src/components/number-format/NumberUtils.ts

@@ -214,7 +214,7 @@ export const format = (
     aria = _aria
   } else if (ban) {
     type = 'ban' // Bank Account Number
-    const { number: _number, aria: _aria } = formatBAN(value, locale)
+    const { number: _number, aria: _aria } = formatBAN(value)
 
     display = _number
     aria = _aria
@@ -755,35 +755,104 @@ export const formatPhone = (number, locale = null) => {
   return { number: display, aria }
 }
 
+// Keep in sync with BankAccountType in Field/BankAccountNumber/validators.ts.
+// Duplicated here to avoid cross-layer imports in this @ts-nocheck file.
+type FormatBANType =
+  | 'norwegianBban'
+  | 'swedishBban'
+  | 'swedishBankgiro'
+  | 'swedishPlusgiro'
+  | 'iban'
+
 /**
  * Use this function to format Bank Account Numbers
  *
  * @param {string|number} number a Bank Account Number
- * @param {string} locale locale as a string
+ * @param {FormatBANType} bankAccountType the type of bank account number
  * @returns A formatted Bank Account Number
  */
-export const formatBAN = (number, locale = null) => {
+export const formatBAN = (
+  number: string | number,
+  bankAccountType: FormatBANType = 'norwegianBban'
+) => {
   if (isAbsent(number)) {
     return { number: ABSENT_VALUE_FORMAT, aria: ABSENT_VALUE_FORMAT }
   }
-  // cleanup
-  number = String(number).replace(/[^0-9]/g, '')
 
-  let display = number
-  let aria = null
+  const cleanDigits = (val: string | number) =>
+    String(val).replace(/[^0-9]/g, '')
 
-  switch (locale) {
+  const cleanAlphanumeric = (val: string | number) =>
+    String(val).replace(/[^A-Za-z0-9]/g, '')
+
+  const pairwiseAria = (digits: string) =>
+    digits
+      .split(/([0-9]{2})/)
+      .filter((s) => s)
+      .join(' ')
+
+  let display: string
+  let aria: string = null
+
+  switch (bankAccountType) {
+    case 'iban': {
+      const cleaned = cleanAlphanumeric(number)
+      // Group in blocks of 4
+      display = cleaned.match(/.{1,4}/g)?.join(' ') ?? cleaned
+      aria = cleaned.split('').join(' ')
+      break
+    }
+
+    case 'swedishBban': {
+      const cleaned = cleanDigits(number)
+      // Clearing number (4 digits) + account number
+      display =
+        cleaned.length > 4
+          ? cleaned.slice(0, 4) + '-' + cleaned.slice(4)
+          : cleaned
+      aria = pairwiseAria(cleaned)
+      break
+    }
+
+    case 'swedishBankgiro': {
+      const cleaned = cleanDigits(number)
+      // Format: XXXX-XXXX (8 digits) or XXX-XXXX (7 digits)
+      if (cleaned.length === 8) {
+        display = cleaned.slice(0, 4) + '-' + cleaned.slice(4)
+      } else if (cleaned.length === 7) {
+        display = cleaned.slice(0, 3) + '-' + cleaned.slice(3)
+      } else {
+        display = cleaned
+      }
+      aria = pairwiseAria(cleaned)
+      break
+    }
+
+    case 'swedishPlusgiro': {
+      const cleaned = cleanDigits(number)
+      // Last digit is check digit, separated by dash
+      if (cleaned.length >= 2) {
+        display =
+          cleaned.slice(0, cleaned.length - 1) +
+          '-' +
+          cleaned.slice(cleaned.length - 1)
+      } else {
+        display = cleaned
+      }
+      aria = pairwiseAria(cleaned)
+      break
+    }
+
+    case 'norwegianBban':
     default: {
+      const cleaned = cleanDigits(number)
       // Get 2000 12 34567
-      display = number
+      display = cleaned
         .split(/([0-9]{4})([0-9]{2})([0-9]{1,})/)
         .filter((s) => s)
         .join(' ')
-
-      aria = number
-        .split(/([0-9]{2})/)
-        .filter((s) => s)
-        .join(' ')
+      aria = pairwiseAria(cleaned)
+      break
     }
   }