Todos los componentes (204)
CNAE
Campos · CnaeField
Qué es y cuándo usarlo
El código CNAE-2009 de la actividad económica: cuatro cifras.
Cuándo usarlo
- Altas de empresas y autónomos, fichas de cliente: cualquier formulario que pida la actividad.
- Sin catálogo comprueba que sean cuatro cifras y que la división (las dos primeras) exista en la clasificación.
- Con
descriptions(un objeto{ '6201': 'Actividades de programación informática' }) comprueba además que el código esté y dice la actividad en la ayuda.
Cuándo no
- El epígrafe del IAE u otra clasificación:
TextField.
Teclado: el de un campo de texto, con teclado numérico en el móvil. Sale por onChange limpio: solo cifras, hasta cuatro.
Accesibilidad: es un TextField, con su etiqueta, su ayuda y su error enlazados. El error salta al salir del campo.
Aspecto fino: sin variables propias: son las del campo, --amset-field-*.
Cómo se ve
CNAE 4777.
Prueba con 6201 y verás su descripción; con un código que no esté en la lista, el campo lo avisa al salir.
<CnaeField descriptions={actividades} value={cnae} onChange={setCnae} />Props
Se importa con import { CnaeField } 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 | — |
descriptions | Readonly<Record<string, string>> | El catalogo de actividades (`{ '6201': 'Actividades de programación informática' }`): con el, la ayuda dice de que actividad se trata y el campo rechaza un codigo que no este. Sin el solo se comprueba la forma y que la division exista. |
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 cuatro. |
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 cuatro cifras (`6201`). 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: