All components (244)
EU VAT number
Fields · VatField
What it is and when to use it
The EU VAT number: the country and the number in a single field, checked country by country.
When to use it
- Registering a customer or supplier that is an EU company, VAT-free invoicing between Member States, B2B purchase forms.
- It covers the 27 EU Member States and Northern Ireland (
XI), each with its own shape and, where the algorithm is public, its check digit: a digit changed while typing is caught, which a regular expression does not do. - The help text says which country it is and whether the check digit could be verified (Bulgaria, Cyprus, Lithuania, Latvia or Malta are only validated by shape).
countrieslimits the accepted Member States: a valid VAT number from another country is rejected with its own message.
When not to
- A Spanish NIF, NIE or CIF:
DocumentField. - Knowing whether the number is registered in VIES: the field says whether the number *can exist*. The VIES lookup needs a server (the Commission API does not allow CORS) and is up to whoever uses it; the error it returns goes through
error.
Keyboard: that of a text field. It is typed with spaces, dots or hyphens and onChange delivers it clean, in capitals and with EL for Greece (GR is also accepted).
Accessibility: it is a TextField, with its label, help text and error linked. The error appears when leaving the field, not while typing.
Fine styling: no variables of its own: it uses the field ones, --amset-field-*.
What it looks like
With the country prefix: ES, FR, DE…
<VatField label="Customer VAT number" hint="With the country prefix: ES, FR, DE…" />Props
Import it with import { VatField } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
back | ReactNode | Content behind the text: a unit ("€"), a copy button. |
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")[] | Only these Member States. A valid VAT number from another country is rejected with its own message. |
disabled | boolean | — |
error | string | Error message. When it is passed, the field is marked as invalid. |
front | ReactNode | Content before the text: an icon, a prefix ("+34"). |
hiddenLabel | boolean | The label for the screen reader only. For when the field sits inside something that already explains itself (a table cell, a group of filters), never to save space. |
hint | string | Permanent hint text below the field. It does not replace the label. |
initialValue | string | — |
inputRef | Ref<HTMLInputElement> | The real `<input>`, to focus it, select its text or measure it from outside. It is separate from `ref` because the component paints a box with label, hint and error, and whoever asks for a ref almost always wants the control. |
invalid | boolean | — |
label | string | — |
onChange | (value: string) => void | What comes out is clean: no spaces, dots or hyphens, in capitals and with `EL` for Greece. |
onChangeEvent | (event: ChangeEvent<HTMLInputElement>) => void | Like `onChange`, but with the native event of the `<input>`: `e.target.value`, `e.currentTarget`... It exists to migrate a front end that already writes its handlers with the event (AMS-735). If you only want the text, `onChange` already gives it to you. |
placeholder | string | — |
readOnly | boolean | — |
required | boolean | — |
size | "sm" | "md" | "lg" | — |
validationBehavior | "aria" | "native" | `aria` (the default) announces the state without the browser interrupting submission with its bubble; `native` also adds its own validation. |
value | string | The whole number with its country (`DE136695976`). Controlled from outside. |
variant | FieldVariant | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: