Saltar al contenido
EspañolEnglish
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 onChange va limpio, sin espacios, puntos ni guiones, y en mayúsculas: 12345678Z.
  • error para 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

El del titular de la factura
CIF correcto

<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.

PropTipoPara qué sirve
classNamestringSe une a las clases de la biblioteca, no las sustituye.
disabledboolean—
errorstringError de fuera (del servidor). Manda sobre el que calcula el campo.
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 ya limpio y en mayusculas: `12345678Z`.
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: