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.
errorfor 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
<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.
| Prop | Type | What it does |
|---|---|---|
className | string | Merged with the library classes; it does not replace them. |
disabled | boolean | — |
error | string | — |
hint | string | — |
initialValue | string | — |
label | string | — |
onBlur | () => void | On leaving the field. The field already marks the error on leaving; this is to notify whoever uses it (a form). |
onChange | (value: string) => void | It arrives without spaces and in capitals: `ES9121000418450200051332`. |
required | boolean | — |
size | "sm" | "md" | "lg" | — |
value | string | — |
variant | FieldVariant | — |
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:
