Todos los componentes (204)

Seguridad Social (NUSS)

Campos · SocialSecurityField

Qué es y cuándo usarlo

El número de la Seguridad Social (NUSS o NAF), con los dos dígitos de control comprobados de verdad. 281234567841 tiene forma de número y no existe, porque a ese le toca el 40.

Cuándo usarlo

Altas de trabajadores, partes, nóminas: cualquier formulario que pida el número de afiliación.
Se escribe como se lee (28/12345678/40) y sale por onChange limpio: doce cifras, sin barras.
error para lo que diga el servidor: manda sobre el que calcula el campo.

Cuándo no

Un número de otro país, o un identificador que no sea de la Seguridad Social española: TextField.
El NIF del trabajador: DocumentField.

Teclado: el de un campo de texto, con teclado numérico en el móvil. La comprobación salta al salir del campo, no en cada tecla.

Accesibilidad: es un TextField, con su etiqueta, su ayuda y su error enlazados. Cuando el número es válido, la ayuda lo dice con palabras («Número correcto»), no con un color.

Aspecto fino: sin variables propias: son las del campo, --amset-field-*.

Cómo se ve

Número de la Seguridad Social

Número correcto

Se guarda 281234567840.

Cambia la última cifra y sal del campo: el dígito de control ya no cuadra y el campo lo avisa.

<SocialSecurityField label="Número de la Seguridad Social" value={numero} onChange={setNumero} />

Props

Se importa con import { SocialSecurityField } 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`	—
`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: solo cifras, hasta doce.
`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`	Las doce cifras, sin separadores (`281234567840`). 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: