Todos los componentes (204)
Documento (NIF, NIE, CIF)
Campos · DocumentField
Qué es y cuándo usarlo
El NIF, el NIE o el CIF, con la letra de control comprobada de verdad. 12345678A tiene forma de NIF y no existe, porque a ese número le toca la Z: aquí se comprueba, y el error dice qué pasa («La letra no corresponde con el número») en vez de un «formato inválido» que no ayuda a nadie.
Cuándo usarlo
- Altas de clientes, datos de facturación: cualquier formulario que pida un documento español. Cada tipo con su algoritmo.
- Lo que sale por
onChangeva limpio, sin espacios, puntos ni guiones, y en mayúsculas:12345678Z. errorpara lo que diga el servidor (un NIF que ya tiene cuenta): manda sobre el que calcula el campo.
Cuándo no
- Un documento de fuera (un pasaporte, un número fiscal de otro país):
TextField. - Una cuenta bancaria:
IbanField.
Teclado: el de un campo de texto. La comprobación salta al salir del campo, no en cada tecla: marcar en rojo un documento a medio escribir es ruido.
Accesibilidad: es un TextField, con su etiqueta (por defecto «NIF, NIE o CIF»), su ayuda y su error enlazados. Cuando el documento es válido, la ayuda lo dice con palabras («NIF correcto», «NIE correcto», «CIF correcto»), no con un tic de color, y solo si lo es de verdad, no si «tiene forma de».
Aspecto fino: sin variables propias: son las del campo, --amset-field-*, con las cifras en ancho fijo (amset-field--numeric).
Cómo se ve
<DocumentField label="NIF, NIE o CIF" hint="El del titular de la factura" />
<DocumentField label="CIF de la empresa" initialValue="B12345674" required />Props
Se importa con import { DocumentField } 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 | Error de fuera (del servidor). Manda sobre el que calcula el campo. |
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 ya limpio y en mayusculas: `12345678Z`. |
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:
