All components (204)
Document (NIF, NIE, CIF)
Fields · DocumentField
What it is and when to use it
The NIF, the NIE or the CIF, with the control letter genuinely checked. 12345678A has the shape of a NIF and does not exist, because that number gets the Z: here it is checked, and the error says what is wrong ("The letter does not match the number") instead of an "invalid format" that helps nobody.
When to use it
- Customer sign-ups, billing details: any form that asks for a Spanish document. Each type with its own algorithm.
- What comes out through
onChangeis clean, without spaces, dots or hyphens, and in uppercase:12345678Z. errorfor whatever the server says (a NIF that already has an account): it takes precedence over the one the field calculates.
When not to
- A foreign document (a passport, a tax number from another country):
TextField. - A bank account:
IbanField.
Keyboard: that of a text field. The check fires on leaving the field, not on every key: marking a half-typed document in red is noise.
Accessibility: it is a TextField, with its label (by default "ID number"), its help and its error linked. When the document is valid, the help says so in words ("NIF is valid", "NIE is valid", "CIF is valid"), not with a color tick, and only if it really is, not if it "has the shape of" one.
Fine-tuning: no variables of its own: they are those of the field, --amset-field-*, with the digits in fixed width (amset-field--numeric).
What it looks like
<DocumentField label="NIF, NIE or CIF" hint="The invoice holder's" />
<DocumentField label="Company CIF" initialValue="B12345674" required />Props
Import it with import { DocumentField } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
className | string | Merged with the library classes; it does not replace them. |
disabled | boolean | — |
error | string | Error from outside (from the server). It takes precedence over the one the field calculates. |
hint | string | — |
initialValue | string | — |
label | string | — |
onBlur | () => void | On leaving the field. The field already marks the error on leaving; this is to notify whoever uses it (a form). |
onChange | (value: string) => void | Arrives already clean and in uppercase: `12345678Z`. |
required | boolean | — |
size | "sm" | "md" | "lg" | — |
value | string | — |
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:
