Skip to content
EspañolEnglish
All components (204)

IBAN

Fields · IbanField

What it is and when to use it

The account number, with the mod 97 check applied: it is the only thing that catches a digit changed while typing, which is the real error. As you type it is split into groups of four, as it comes printed by the bank; what comes out through onChange has no spaces and is in uppercase, which is what gets stored.

When to use it

  • Direct debits, refunds by transfer, a supplier's payment details.
  • error for whatever the server says: it takes precedence over the one the field computes.

When not to

  • Showing an account that is not edited, with its copy button: Copyable.
  • A NIF, a NIE or a CIF: DocumentField.

Keyboard: that of a text field; you can paste with or without spaces. The check runs when leaving the field, not on every key.

Accessibility: it is a TextField, with its label (by default "IBAN"), its help text and its error linked. When the account checks out, the help text says so in words: "Account is valid". The error explains what is wrong: that it does not start with the two country letters and two digits, or that the number is not valid.

Fine-tuning: no variables of its own: they are those of the field, --amset-field-*, with digits in a fixed width (amset-field--numeric).

What it looks like

The one for the account where the receipts are charged
Account is valid

<IbanField label="IBAN for direct debit" hint="The one for the account where the receipts are charged" />
<IbanField label="Supplier IBAN" initialValue="ES9121000418450200051332" required />

Props

Import it with import { IbanField } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
classNamestringMerged with the library classes; it does not replace them.
disabledboolean—
errorstring—
hintstring—
initialValuestring—
labelstring—
onBlur() => voidOn leaving the field. The field already marks the error on leaving; this is to notify whoever uses it (a form).
onChange(value: string) => voidIt arrives without spaces and in capitals: `ES9121000418450200051332`.
requiredboolean—
size"sm" | "md" | "lg"—
valuestring—
variantFieldVariant—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: