All components (204)

Social Security (NUSS)

Fields · SocialSecurityField

What it is and when to use it

The Spanish Social Security number (NUSS or NAF), with its two check digits genuinely verified. 281234567841 looks like a number and does not exist, because the right check digits for it would be 40.

When to use it

Employee registrations, reports, payroll: any form that asks for the affiliation number.
It is typed the way it is read (28/12345678/40) and onChange delivers it clean: twelve digits, no slashes.
error for whatever the server says: it takes precedence over the one the field computes.

When not to

A number from another country, or an identifier that is not a Spanish Social Security one: TextField.
The employee's tax ID: DocumentField.

Keyboard: that of a text field, with a numeric keypad on mobile. The check happens on leaving the field, not on every keystroke.

Accessibility: it is a TextField, with its label, help text and error linked. When the number is valid, the help text says so in words ("Valid number"), not with a colour.

Fine styling: no variables of its own: it uses the field ones, --amset-field-*.

What it looks like

Social Security number

Number is valid

Saved as 281234567840.

Change the last digit and leave the field: the check digit no longer matches and the field says so.

<SocialSecurityField label="Social Security number" value={numero} onChange={setNumero} />

Props

Import it with import { SocialSecurityField } 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`	—
`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`	The output is clean: digits only, up to twelve.
`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 twelve digits, without separators (`281234567840`). 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: