Saltar al contenido
EspañolEnglish
Todos los componentes (204)

IBAN

Campos · IbanField

Qué es y cuándo usarlo

El número de cuenta, con el módulo 97 comprobado: es lo único que caza un dígito cambiado al teclear, que es el error de verdad. Mientras se escribe se va separando en grupos de cuatro, como viene impreso en el banco; lo que sale por onChange va sin espacios y en mayúsculas, que es lo que se guarda.

Cuándo usarlo

  • Domiciliaciones, devoluciones por transferencia, los datos de cobro de un proveedor.
  • error para lo que diga el servidor: manda sobre el que calcula el campo.

Cuándo no

  • Enseñar una cuenta que no se edita, con su botón de copiar: Copyable.
  • Un NIF, un NIE o un CIF: DocumentField.

Teclado: el de un campo de texto; se puede pegar con espacios o sin ellos. La comprobación salta al salir del campo, no en cada tecla.

Accesibilidad: es un TextField, con su etiqueta (por defecto «IBAN»), su ayuda y su error enlazados. Cuando la cuenta cuadra, la ayuda lo dice con palabras: «Cuenta correcta». El error explica qué falla: que no empieza por las dos letras del país y dos cifras, o que el número no es correcto.

Aspecto fino: sin variables propias: son las del campo, --amset-field-*, con las cifras en ancho fijo (amset-field--numeric).

Cómo se ve

El de la cuenta donde se cargan los recibos
Cuenta correcta

<IbanField label="IBAN para la domiciliacion" hint="El de la cuenta donde se cargan los recibos" />
<IbanField label="IBAN del proveedor" initialValue="ES9121000418450200051332" required />

Props

Se importa con import { IbanField } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
classNamestringSe une a las clases de la biblioteca, no las sustituye.
disabledboolean—
errorstring—
hintstring—
initialValuestring—
labelstring—
onBlur() => voidAl salir del campo. El campo ya marca el error al salir; esto es para avisar a quien lo usa (un formulario).
onChange(value: string) => voidLlega sin espacios y en mayusculas: `ES9121000418450200051332`.
requiredboolean—
size"sm" | "md" | "lg"—
valuestring—
variantFieldVariant—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: