All components (204)

CNAE

Fields · CnaeField

What it is and when to use it

The CNAE-2009 code of an economic activity: four digits.

When to use it

Company and freelancer registrations, customer records: any form that asks for the business activity.
Without a catalog it checks that there are four digits and that the division (the first two) exists in the classification.
With descriptions (an object such as { '6201': 'Computer programming activities' }) it also checks that the code is listed and shows the activity in the help text.

When not to

The IAE heading or any other classification: TextField.

Keyboard: that of a text field, with a numeric keypad on mobile. onChange delivers a clean value: digits only, up to four.

Accessibility: it is a TextField, with its label, help text and error linked. The error appears when leaving the field.

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

What it looks like

CNAE (economic activity code)

Retail sale of watches and jewelry

CNAE 4777.

Try 6201 and you will see its description; with a code that is not in the list, the field warns you on leaving.

<CnaeField descriptions={actividades} value={cnae} onChange={setCnae} />

Props

Import it with import { CnaeField } 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`	—
`descriptions`	`Readonly<Record<string, string>>`	The catalogue of activities (`{ '6201': 'Computer programming activities' }`): with it, the hint says which activity it is and the field rejects a code that is not in it. Without it only the shape is checked, and that the division exists.
`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 four.
`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 four digits (`6201`). 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: