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.
errorpara 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
<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.
| Prop | Tipo | Para qué sirve |
|---|---|---|
className | string | Se une a las clases de la biblioteca, no las sustituye. |
disabled | boolean | — |
error | string | — |
hint | string | — |
initialValue | string | — |
label | string | — |
onBlur | () => void | Al salir del campo. El campo ya marca el error al salir; esto es para avisar a quien lo usa (un formulario). |
onChange | (value: string) => void | Llega sin espacios y en mayusculas: `ES9121000418450200051332`. |
required | boolean | — |
size | "sm" | "md" | "lg" | — |
value | string | — |
variant | FieldVariant | — |
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:
