Skip to content
EspañolEnglish
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 onChange is clean, without spaces, dots or hyphens, and in uppercase: 12345678Z.
  • error for 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

The invoice holder's
CIF is valid

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

PropTypeWhat it does
classNamestringMerged with the library classes; it does not replace them.
disabledboolean—
errorstringError from outside (from the server). It takes precedence over the one the field calculates.
hintstring—
initialValuestring—
labelstring—
onBlur() => voidOn leaving the field. The field already marks the error on leaving; this is to notify whoever uses it (a form).
onChange(value: string) => voidArrives already clean and in uppercase: `12345678Z`.
requiredboolean—
size"sm" | "md" | "lg"—
valuestring—
variantFieldVariant—

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: