Todos los componentes (244)
IVA intracomunitario
Campos · VatField
Qué es y cuándo usarlo
El IVA intracomunitario (VAT): el país y el número en un solo campo, comprobado país por país.
Cuándo usarlo
- Alta de un cliente o proveedor de empresa de la UE, facturación sin IVA entre Estados miembros, formularios de compra B2B.
- Cubre los 27 Estados de la UE y Irlanda del Norte (
XI), cada uno con su forma y, donde el algoritmo es público, su cifra de control: un dígito cambiado al teclear se caza, que es lo que una expresión regular no hace. - La ayuda dice de qué país es y si la cifra se ha podido comprobar (Bulgaria, Chipre, Lituania, Letonia o Malta solo se validan por su forma).
countrieslimita los Estados admitidos: el IVA correcto de otro país se rechaza con su mensaje.
Cuándo no
- Un NIF, NIE o CIF español:
DocumentField. - Saber si el número está dado de alta en VIES: el campo dice si el número *puede existir*. La consulta a VIES necesita un servidor (la API de la Comisión no admite CORS) y es cosa de quien lo usa; el error que devuelva se pasa por
error.
Teclado: el de un campo de texto. Se escribe con espacios, puntos o guiones y sale por onChange limpio, en mayúsculas y con EL para Grecia (también se acepta GR).
Accesibilidad: es un TextField, con su etiqueta, su ayuda y su error enlazados. El error salta al salir del campo, no mientras se escribe.
Aspecto fino: sin variables propias: son las del campo, --amset-field-*.
Cómo se ve
<VatField label="NIF-IVA del cliente" hint="Con el prefijo del país: ES, FR, DE…" />Props
Se importa con import { VatField } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
back | ReactNode | Contenido detras del texto: una unidad ("€"), un boton de copiar. |
className | string | — |
countries | readonly ("AT" | "BE" | "BG" | "CY" | "CZ" | "DE" | "DK" | "EE" | "EL" | "ES" | "FI" | "FR" | "HR" | "HU" | "IE" | "IT" | "LT" | "LU" | "LV" | "MT" | "NL" | "PL" | "PT" | "RO" | "SE" | "SI" | "SK" | "XI")[] | Solo estos Estados. Un IVA correcto de otro pais se rechaza con su propio mensaje. |
disabled | boolean | — |
error | string | Mensaje de error. Al pasarlo, el campo queda marcado como invalido. |
front | ReactNode | Contenido delante del texto: un icono, un prefijo ("+34"). |
hiddenLabel | boolean | La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de algo que ya se explica solo (el buscador de un grupo de filtros), nunca para ahorrar espacio. |
hint | string | Texto de ayuda permanente bajo el campo. No sustituye a la etiqueta. |
initialValue | string | — |
inputRef | Ref<HTMLInputElement> | El `<input>` de verdad, para enfocarlo, seleccionar su texto o medirlo desde fuera. Va aparte del `ref` porque el componente pinta una caja con etiqueta, ayuda y error, y quien pide un ref casi siempre quiere el control. |
invalid | boolean | — |
label | string | — |
onChange | (value: string) => void | Lo que sale va limpio: sin espacios, puntos ni guiones, en mayusculas y con `EL` para Grecia. |
onChangeEvent | (event: ChangeEvent<HTMLInputElement>) => void | Como `onChange`, pero con el evento nativo del `<input>`: `e.target.value`, `e.currentTarget`... Existe para migrar un front que ya escribe sus manejadores con el evento (AMS-735). Si solo quieres el texto, `onChange` lo entrega ya. |
placeholder | string | — |
readOnly | boolean | — |
required | boolean | — |
size | "sm" | "md" | "lg" | — |
validationBehavior | "aria" | "native" | `aria` (por defecto) anuncia el estado sin que el navegador interrumpa el envio con su globo; `native` añade ademas su validacion. |
value | string | El numero entero con su pais (`DE136695976`). Controlado desde fuera. |
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: