@digigov/form 2.0.0-8e254888 → 2.0.0-a402a664

package/lazy/index.js

@@ -9,12 +9,12 @@ export default {
   'FieldBase': lazy(() => import('@digigov/form/Field/FieldBase').then((module) => ({ default: module['FieldBase'] }))),
   'FieldBaseContainer': lazy(() => import('@digigov/form/Field/FieldBaseContainer').then((module) => ({ default: module['FieldBaseContainer'] }))),
   'FieldConditional': lazy(() => import('@digigov/form/Field/FieldConditional').then((module) => ({ default: module['FieldConditional'] }))),
-  'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
   'FormDialog': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['FormDialog'] }))),
   'ArrayItemModal': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemModal'] }))),
   'ArrayItemHeader': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemHeader'] }))),
   'ArrayItemDisplay': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemDisplay'] }))),
   'FieldArray': lazy(() => import('@digigov/form/FieldArray').then((module) => ({ default: module['FieldArray'] }))),
+  'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
   'FieldsetWithContext': lazy(() => import('@digigov/form/Fieldset/FieldsetWithContext').then((module) => ({ default: module['FieldsetWithContext'] }))),
   'FieldsetLabel': lazy(() => import('@digigov/form/Fieldset').then((module) => ({ default: module['FieldsetLabel'] }))),
   'FieldsetCaption': lazy(() => import('@digigov/form/Fieldset').then((module) => ({ default: module['FieldsetCaption'] }))),
@@ -57,6 +57,7 @@ export default {
   'RadioButtonsGroup': lazy(() => import('@digigov/form/inputs/Radio').then((module) => ({ default: module['RadioButtonsGroup'] }))),
   'ControlledRadioButtonsGroup': lazy(() => import('@digigov/form/inputs/Radio').then((module) => ({ default: module['ControlledRadioButtonsGroup'] }))),
   'AFM_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['AFM_VALIDATOR'] }))),
+  'AMKA_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['AMKA_VALIDATOR'] }))),
   'LATER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['LATER_THAN_VALIDATOR'] }))),
   'EARLIER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['EARLIER_THAN_VALIDATOR'] }))),
   'DATE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['DATE_VALIDATOR'] }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/form",
-  "version": "2.0.0-8e254888",
+  "version": "2.0.0-a402a664",
   "description": "@digigov form builder",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -10,18 +10,18 @@
     "access": "public"
   },
   "dependencies": {
-    "react-hook-form": "7.33.1",
+    "react-hook-form": "7.56.1",
     "yup": "0.32.11",
     "dayjs": "1.10.4",
-    "@hookform/resolvers": "3.9.0",
-    "@digigov/react-icons": "2.0.0-8e254888"
+    "@hookform/resolvers": "5.0.1",
+    "@digigov/react-icons": "2.0.0-a402a664"
   },
   "peerDependencies": {
-    "@digigov/ui": "2.0.0-8e254888",
-    "@digigov/react-core": "2.0.0-8e254888",
+    "@digigov/ui": "2.0.0-a402a664",
+    "@digigov/react-core": "2.0.0-a402a664",
     "clsx": "1.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "react": "^18.3.0 || ^19.1.0",
+    "react-dom": "^18.3.0 || ^19.1.0"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry/index.js

@@ -10,9 +10,9 @@ import * as _digigov_form_Field_FieldBaseContainer from "@digigov/form/Field/Fie
 import * as _digigov_form_Field_FieldConditional from "@digigov/form/Field/FieldConditional";
 import * as _digigov_form_Field from "@digigov/form/Field";
 import * as _digigov_form_Field_types from "@digigov/form/Field/types";
-import * as _digigov_form_FieldObject from "@digigov/form/FieldObject";
 import * as _digigov_form_FieldArray_FormDialog from "@digigov/form/FieldArray/FormDialog";
 import * as _digigov_form_FieldArray from "@digigov/form/FieldArray";
+import * as _digigov_form_FieldObject from "@digigov/form/FieldObject";
 import * as _digigov_form_Fieldset_FieldsetWithContext from "@digigov/form/Fieldset/FieldsetWithContext";
 import * as _digigov_form_Fieldset from "@digigov/form/Fieldset";
 import * as _digigov_form_Fieldset_types from "@digigov/form/Fieldset/types";
@@ -45,19 +45,19 @@ import * as _digigov_form_Questions_Step_StepTitle from "@digigov/form/Questions
 import * as _digigov_form_Questions_Step_getAddMoreFields from "@digigov/form/Questions/Step/getAddMoreFields";
 import * as _digigov_form_Questions_Step from "@digigov/form/Questions/Step";
 import * as _digigov_form_Questions_Step_types from "@digigov/form/Questions/Step/types";
-import * as _digigov_form_inputs_AutoCompleteInput from "@digigov/form/inputs/AutoCompleteInput";
 import * as _digigov_form_inputs_Checkboxes from "@digigov/form/inputs/Checkboxes";
+import * as _digigov_form_inputs_AutoCompleteInput from "@digigov/form/inputs/AutoCompleteInput";
 import * as _digigov_form_inputs_DateInput from "@digigov/form/inputs/DateInput";
-import * as _digigov_form_inputs_FileInput from "@digigov/form/inputs/FileInput";
 import * as _digigov_form_inputs_DateTimeInput from "@digigov/form/inputs/DateTimeInput";
+import * as _digigov_form_inputs_FileInput from "@digigov/form/inputs/FileInput";
 import * as _digigov_form_inputs_ImageInput from "@digigov/form/inputs/ImageInput";
 import * as _digigov_form_inputs_Input from "@digigov/form/inputs/Input";
-import * as _digigov_form_inputs_Input_inputsInputScenarios from "@digigov/form/inputs/Input/inputsInputScenarios";
 import * as _digigov_form_inputs_Label from "@digigov/form/inputs/Label";
 import * as _digigov_form_inputs_OtpInput from "@digigov/form/inputs/OtpInput";
 import * as _digigov_form_inputs_Radio from "@digigov/form/inputs/Radio";
 import * as _digigov_form_inputs_Select from "@digigov/form/inputs/Select";
 import * as _digigov_form_validators_utils_afm from "@digigov/form/validators/utils/afm";
+import * as _digigov_form_validators_utils_amka from "@digigov/form/validators/utils/amka";
 import * as _digigov_form_validators_utils_date from "@digigov/form/validators/utils/date";
 import * as _digigov_form_validators_utils_datetime from "@digigov/form/validators/utils/datetime";
 import * as _digigov_form_validators_utils_file from "@digigov/form/validators/utils/file";
@@ -101,9 +101,9 @@ export default {
   '@digigov/form/Field/FieldConditional': lazyImport(_digigov_form_Field_FieldConditional),
   '@digigov/form/Field': lazyImport(_digigov_form_Field),
   '@digigov/form/Field/types': lazyImport(_digigov_form_Field_types),
-  '@digigov/form/FieldObject': lazyImport(_digigov_form_FieldObject),
   '@digigov/form/FieldArray/FormDialog': lazyImport(_digigov_form_FieldArray_FormDialog),
   '@digigov/form/FieldArray': lazyImport(_digigov_form_FieldArray),
+  '@digigov/form/FieldObject': lazyImport(_digigov_form_FieldObject),
   '@digigov/form/Fieldset/FieldsetWithContext': lazyImport(_digigov_form_Fieldset_FieldsetWithContext),
   '@digigov/form/Fieldset': lazyImport(_digigov_form_Fieldset),
   '@digigov/form/Fieldset/types': lazyImport(_digigov_form_Fieldset_types),
@@ -136,19 +136,19 @@ export default {
   '@digigov/form/Questions/Step/getAddMoreFields': lazyImport(_digigov_form_Questions_Step_getAddMoreFields),
   '@digigov/form/Questions/Step': lazyImport(_digigov_form_Questions_Step),
   '@digigov/form/Questions/Step/types': lazyImport(_digigov_form_Questions_Step_types),
-  '@digigov/form/inputs/AutoCompleteInput': lazyImport(_digigov_form_inputs_AutoCompleteInput),
   '@digigov/form/inputs/Checkboxes': lazyImport(_digigov_form_inputs_Checkboxes),
+  '@digigov/form/inputs/AutoCompleteInput': lazyImport(_digigov_form_inputs_AutoCompleteInput),
   '@digigov/form/inputs/DateInput': lazyImport(_digigov_form_inputs_DateInput),
-  '@digigov/form/inputs/FileInput': lazyImport(_digigov_form_inputs_FileInput),
   '@digigov/form/inputs/DateTimeInput': lazyImport(_digigov_form_inputs_DateTimeInput),
+  '@digigov/form/inputs/FileInput': lazyImport(_digigov_form_inputs_FileInput),
   '@digigov/form/inputs/ImageInput': lazyImport(_digigov_form_inputs_ImageInput),
   '@digigov/form/inputs/Input': lazyImport(_digigov_form_inputs_Input),
-  '@digigov/form/inputs/Input/inputsInputScenarios': lazyImport(_digigov_form_inputs_Input_inputsInputScenarios),
   '@digigov/form/inputs/Label': lazyImport(_digigov_form_inputs_Label),
   '@digigov/form/inputs/OtpInput': lazyImport(_digigov_form_inputs_OtpInput),
   '@digigov/form/inputs/Radio': lazyImport(_digigov_form_inputs_Radio),
   '@digigov/form/inputs/Select': lazyImport(_digigov_form_inputs_Select),
   '@digigov/form/validators/utils/afm': lazyImport(_digigov_form_validators_utils_afm),
+  '@digigov/form/validators/utils/amka': lazyImport(_digigov_form_validators_utils_amka),
   '@digigov/form/validators/utils/date': lazyImport(_digigov_form_validators_utils_date),
   '@digigov/form/validators/utils/datetime': lazyImport(_digigov_form_validators_utils_datetime),
   '@digigov/form/validators/utils/file': lazyImport(_digigov_form_validators_utils_file),

package/src/Field/FieldBase.tsx

@@ -39,10 +39,12 @@ export const FieldBase: React.FC<FieldBaseProps> = ({
       <FieldBaseContainer
         label={label}
         layout={layout}
+        register={register}
         error={errorGroupContext ? undefined : error}
         hasError={!!error}
         wrapper={wrapper}
         name={name}
+        controlled={controlled}
       >
         <Controller
           control={control}
@@ -74,6 +76,7 @@ export const FieldBase: React.FC<FieldBaseProps> = ({
     <FieldBaseContainer
       label={label}
       layout={layout}
+      register={register}
       error={errorGroupContext ? undefined : error}
       hasError={!!error}
       wrapper={wrapper}
@@ -90,6 +93,7 @@ export const FieldBase: React.FC<FieldBaseProps> = ({
           aria-describedby={error && `${name}-error`}
           required={required}
           disabled={editable === false}
+          defaultValue={defaultValue}
           {...componentProps}
         />
       ) : (
@@ -100,11 +104,11 @@ export const FieldBase: React.FC<FieldBaseProps> = ({
           error={!!error}
           extra={extra}
           type={type}
+          defaultValue={defaultValue}
           aria-required={!!required}
           aria-describedby={error && `${name}-error`}
           required={required}
           disabled={editable === false}
-          ref={undefined}
           {...componentProps}
         />
       )}

package/src/Field/FieldBaseContainer.tsx

@@ -3,7 +3,7 @@ import { FieldContainerProps } from '@digigov/form/Field/types';
 import Label from '@digigov/form/inputs/Label';
 import { ErrorMessage } from '@digigov/react-core/ErrorMessage';
 import FieldContainer from '@digigov/react-core/FieldContainer';
-import CoreFieldset from '@digigov/react-core/Fieldset';
+import Fieldset from '@digigov/react-core/Fieldset';
 import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -17,6 +17,8 @@ export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
   error,
   hasError,
   layout,
+  controlled,
+  labelSize = 'sm',
 }) => {
   const { t } = useTranslation();
   const errorMessage = error?.message.key
@@ -26,8 +28,10 @@ export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
   if (wrapper === 'fieldset') {
     return (
       <FieldContainer error={hasError} {...layout}>
-        <CoreFieldset>
-          <FieldsetLegend size="sm">{label && label.primary}</FieldsetLegend>
+        <Fieldset {...(controlled && { tabIndex: -1 })}>
+          <FieldsetLegend size={labelSize}>
+            {label && label.primary}
+          </FieldsetLegend>
           {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
           {error && (
             <ErrorMessage id={`${name}-error`}>
@@ -36,7 +40,7 @@ export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
           )}
           {children}
           {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
-        </CoreFieldset>
+        </Fieldset>
       </FieldContainer>
     );
   } else {

package/src/Field/FieldConditional.tsx

@@ -13,6 +13,7 @@ const ChildFieldMemo = React.memo(
     field,
     control,
     reset,
+    resetField,
     register,
     error,
     Field,
@@ -27,6 +28,7 @@ const ChildFieldMemo = React.memo(
         Field={Field}
         name={newField.key}
         reset={reset}
+        resetField={resetField}
         control={control}
         register={register}
         error={error}
@@ -54,6 +56,7 @@ export const FieldConditional: React.FC<FieldConditionalProps> = ({
   field,
   register,
   reset,
+  resetField,
   error,
   Field,
 }) => {
@@ -76,6 +79,7 @@ export const FieldConditional: React.FC<FieldConditionalProps> = ({
       control={control}
       register={register}
       reset={reset}
+      resetField={resetField}
       error={error}
       Field={Field}
     />

package/src/Field/doc.mdx

@@ -3,4 +3,205 @@ title: Form
 parent: docs/form/components
 ---
 
-hello md
+# Field
+
+Field allow users to create different types of inputs based on data that is described by a particular config schema.
+
+```jsx
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'first_name',
+    type: 'string',
+    required: true,
+    label: {
+      primary: 'Ποιo είναι το όνομά σας;',
+    },
+  },
+];
+
+export const MyComponent = () => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default MyComponent;
+```
+
+## Accessibility & Usability
+
+Our goal is to create semantically correct and valid forms, which means
+we must avoid mixing form-related HTML elements (like form, input, label) with generic
+ones (such as div, cards, or custom components). For instance, if a paragraph element is
+placed inside a form, React will display warnings in the console. Rather than building overly
+complex interfaces that attempt to accomplish too much too quickly, Digigov Form encourages
+using forms in their intended way—filling out and validating inputs, and then submitting the form
+as a whole.
+
+Additionally, we must ensure our interfaces are fully accessible to screen readers and other
+assistive technologies. This is why we designed the flow to be as guided and recoverable as possible.
+Forms and fields should be clear and logical, reading like well-written text for the users.
+If validation fails, the system provides users with meaningful error messages and clear instructions on how to correct the errors.
+Once validation is successful, the data can be submitted. It is crucial to provide helpful information to users at each step.
+Therefore, we should avoid relying on flashy “magic” UX solutions that assume users have advanced digital skills,
+as these are often intended for expert use cases.
+
+## Introducing the Field component
+
+Field is a component that creates `form` inputs dynamically based on a `data config` schema.
+The config structure is a `key-value` pair of data that describes the input fields and its usage.
+In order to create an input, we need to provide a specific type of input for each field,
+and we can use the `type` property for this.
+
+## Field types
+
+The `type` property determines the type of input field to be rendered. Below are the available types and their descriptions.
+
+| Type              | Input Description                                                                                                                  |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `int`             | A whole number.                                                                                                                    |
+| `string`          | A text string (e.g., name, address).                                                                                               |
+| `text`            | A larger text input, suitable for paragraphs or multiline text.                                                                    |
+| `boolean`         | A binary value, typically a checkbox or toggle (true/false).                                                                       |
+| `email`           | An email address (e.g., example@example.com).                                                                                      |
+| `uuid4`           | A universally unique identifier (UUID) in version 4 format.                                                                        |
+| `choice:multiple` | A selection of multiple options from a list (e.g., checkboxes).                                                                    |
+| `choice:single`   | A single selection from a list (e.g., radio buttons).                                                                              |
+| `mobile_phone`    | A phone number, typically with country code (e.g., +1-234-567-890).                                                                |
+| `date`            | A date input, typically in the format YYYY-MM-DD.                                                                                  |
+| `datetime`        | A date and time input, typically in the format YYYY-MM-DD HH:MM:SS.                                                                |
+| `otp`             | A one-time password, typically a short numeric or alphanumeric string.                                                             |
+| `afm`             | A Greek Tax Identification Number (AFM).                                                                                           |
+| `iban`            | An International Bank Account Number (IBAN).                                                                                       |
+| `file`            | A file upload input (e.g., for documents, images).                                                                                 |
+| `image`           | A file input that specifically handles images.                                                                                     |
+| `postal_code`     | A postal code input (e.g., ZIP code, postcode).                                                                                    |
+| `phone_number`    | A phone number input (e.g., with or without country code).                                                                         |
+| `array`           | A list of values, typically displayed as multiple inputs ([MultiplicityField](/components/@digigov/form/MultiplicityField.html)).  |
+| `object`          | A structured data object, often used for more complex or nested forms.                                                             |
+
+## Field properties
+
+The Field component accepts several properties, that describes the input fields and its usage.
+
+| Property       | Type                                                                                      | Description                                                                 |
+| -------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `key`          | `string`                                                                                  | The name of the field (TODO: rename to `name`).                             |
+| `type`         | Describes the format of each field, e.g., `type: 'string'` is a simple input format field | The type of input field. Defines the kind of value it accepts.              |
+| `trim`         | `boolean`                                                                                 | If `true`, trims the input value.                                           |
+| `component`    | `any`                                                                                     | A custom React component for the input field.                               |
+| `autoComplete` | `string`                                                                                  | The `autocomplete` attribute value for the input field (e.g., 'on', 'off'). |
+| `maxLength`    | `number`                                                                                  | The maximum number of characters the input can accept.                      |
+| `condition`    | `Record<string, FieldCondition>`                                                          | Conditions for when the field should be shown, enabled, or validated.       |
+| `controlled`   | `boolean`                                                                                 | If `true`, the input value is controlled by React state.                    |
+| `label`        | `FieldLabelProps`                                                                         | The label associated with the input field.                                  |
+| `extra`        | `Record<string, any>`                                                                     | Extra custom attributes or settings for the field.                          |
+| `editable`     | `boolean`                                                                                 | If `false`, the field cannot be edited.                                     |
+| `variant`      | `'inline' \| 'dialog'`                                                                    | Defines the display variant of the field (e.g., inline or in a dialog).     |
+| `required`     | `boolean`                                                                                 | If `true`, the field is required to be filled.                              |
+| `enabled`      | `boolean`                                                                                 | If `false`, the field is disabled and cannot be interacted with.            |
+| `disabled`     | `boolean`                                                                                 | If `true`, the field is disabled.                                           |
+| `layout`       | `Record<string, GridProps['xs' \| 'sm' \| 'md' \| 'lg' \| 'xl']>`                         | Defines the layout settings for the field (grid system).                    |
+| `validators`   | `ValidatorSchema[]`                                                                       | Array of validators to be applied to the input field.                       |
+| `wrapper`      | `'label' \| 'fieldset'`                                                                   | Defines the wrapping element for the field (label or fieldset).             |
+| `maxWidth`     | `string`                                                                                  | The maximum width of the field.                                             |
+| `maxHeight`    | `string`                                                                                  | The maximum height of the field.                                            |
+| `width`        | `string`                                                                                  | The width of the field.                                                     |
+
+### How to use it
+
+The `Field` component is a fundamental building block of the `form`.
+We can implement a `Field` by using the `data config` or we can fill the `Field` directly with its properties.
+
+First, we need to import the `FormBuilder` component from the `@digigov/form` path.
+
+```jsx pure
+import React from 'react';
+import FormBuilder from '@digigov/form';
+import Button from '@digigov/ui/form/Button';
+
+export default function MyFieldComponent() {
+  return (
+    <FormBuilder>
+      {/* this is where all fields will eventually be rendered */}
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+}
+```
+
+#### Data config
+
+The `data config` is an array of objects that contains the configuration for each field.
+
+```jsx pure
+const fields = [
+  {
+    key: 'first_name',
+    type: 'string',
+    required: true,
+    label: {
+      primary: 'Ποιo είναι το όνομά σας;',
+    },
+  },
+];
+```
+
+Then we can use the `fields` array to render the Field(s).
+
+```jsx pure
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'first_name',
+    type: 'string',
+    required: true,
+    label: {
+      primary: 'Ποιo είναι το όνομά σας;',
+    },
+  },
+];
+
+export const MyComponent = () => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default MyComponent;
+```
+
+#### Directly
+
+We can also use the `Field` component directly and pass the properties to it.
+
+```jsx pure
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const MyComponent = () => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    <Field
+      key="first_name"
+      name="first_name"
+      label={{ primary: 'Οχήματα' }}
+      type="sting"
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default MyComponent;
+```

package/src/Field/index.tsx

@@ -16,7 +16,6 @@ import FieldArray from '@digigov/form/FieldArray';
 import Multiplicity from '@digigov/form/MultiplicityField';
 export const Field: React.FC<FieldProps> = ({
   name,
-  disabled,
   children,
   ...customField
 }) => {
@@ -25,6 +24,7 @@ export const Field: React.FC<FieldProps> = ({
     control,
     register,
     reset,
+    resetField,
     error,
     componentRegistry,
     formState,
@@ -47,12 +47,12 @@ export const Field: React.FC<FieldProps> = ({
       ),
     [field]
   );
-
   if (calculatedField.condition) {
     return (
       <FieldConditional
         control={control}
         reset={reset}
+        resetField={resetField}
         register={register}
         field={calculatedField as FieldWithCondition}
         error={error}
@@ -68,12 +68,15 @@ export const Field: React.FC<FieldProps> = ({
         trigger={trigger}
         register={register}
         clearErrors={clearErrors}
-        error={error}
+        error={
+          formState.isSubmitted && !formState.isSubmitting ? error : undefined
+        }
         getValues={getValues}
         setValue={setValue}
         formState={formState}
         Field={Field}
         reset={reset}
+        resetField={resetField}
         {...calculatedField}
       />
     );
@@ -94,20 +97,27 @@ export const Field: React.FC<FieldProps> = ({
         setValue={setValue}
         getValues={getValues}
         unregister={unregister}
+        resetField={resetField}
         Field={Field}
         {...calculatedField}
       />
     );
   }
+  const editable =
+    customField.editable === false || customField.disabled === true
+      ? false
+      : true;
+  const customError = error ? error : formState?.errors[name];
   return (
     <FieldBase
       {...calculatedField}
+      editable={editable}
       name={name}
-      disabled={disabled}
       control={control}
       register={register}
       reset={reset}
-      error={error}
+      error={customError}
+      resetField={resetField}
       Field={Field}
     />
   );

package/src/Field/types.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
 import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
 import { GridProps } from '@digigov/ui/layouts/Grid';
 
 export interface FieldLabelProps {
@@ -25,6 +26,7 @@ export interface FieldSpec {
     | 'datetime'
     | 'otp'
     | 'afm'
+    | 'amka'
     | 'iban'
     | 'file'
     | 'image'
@@ -35,6 +37,7 @@ export interface FieldSpec {
   trim?: boolean;
   component?: any;
   autoComplete?: string;
+  placeholder?: string;
   maxLength?: number;
   condition?: Record<string, FieldCondition>;
   controlled?: boolean;
@@ -44,7 +47,7 @@ export interface FieldSpec {
   variant?: 'inline' | 'dialog';
   required?: boolean;
   enabled?: boolean;
-  disabled?: boolean;
+  disabled?: boolean; // TODO: keep disabled or editable
   layout?: Record<
     string,
     | GridProps['xs']
@@ -79,6 +82,7 @@ export interface FieldConditionalProps {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   Field: React.FC<FieldProps>;
 }
@@ -92,12 +96,15 @@ export interface FieldComponentItem {
 
 export interface FieldContainerProps {
   name?: FieldSpec['key'];
+  register: FieldBaseProps['register'];
   layout?: FieldSpec['layout'];
   label?: FieldSpec['label'];
   error?: ErrorOption | Record<string, any>;
   hasError?: boolean;
   children?: React.ReactNode;
+  controlled?: boolean;
   wrapper?: FieldSpec['wrapper'];
+  labelSize?: FieldsetLegendProps['size'];
 }
 
 export type FieldComponentRegistry = Record<string, FieldComponentItem>;
@@ -116,7 +123,7 @@ export interface ControlledFieldProps {
   error?: boolean;
   name?: string;
   disabled?: boolean;
-  Field: React.FC<FieldProps>;
+  Field?: React.FC<FieldProps>;
 }
 
 export interface UncontrolledFieldProps {
@@ -144,7 +151,8 @@ export interface FieldBaseProps extends CalculatedField {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
-  Field: React.FC<FieldProps>;
+  resetField?: UseFormReturn['resetField'];
+  Field?: React.FC<FieldProps>;
 }
 
 export interface FieldProps extends FieldSpec {
@@ -157,6 +165,7 @@ export interface UseFieldProps {
   control: FieldBaseProps['control'];
   register: FieldBaseProps['register'];
   reset: FieldBaseProps['reset'];
+  resetField: FieldBaseProps['resetField'];
   watch: UseFormReturn['watch'];
   formState: UseFormReturn['formState'];
   getFieldState: UseFormReturn['getFieldState'];

package/src/Field/utils/index.ts

@@ -20,10 +20,12 @@ export const FIELD_COMPONENTS: FieldComponentRegistry = {
   file: {
     wrapper: 'fieldset',
     component: FileInput,
+    // controlled: true,
   },
   image: {
     wrapper: 'fieldset',
     component: ImageInput,
+    controlled: true,
   },
   date: {
     wrapper: 'fieldset',

package/src/Field/utils/useField.ts

@@ -11,6 +11,7 @@ export const useField = (
     control,
     register,
     reset,
+    resetField,
     trigger,
     clearErrors,
     errors,
@@ -30,11 +31,17 @@ export const useField = (
     `);
   }
   let error = errors[name];
-  const nameIndexRegex = name.match(/^(.*?)\.(\d+)$/);
+
+  const nameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\]*$/);
   if (nameIndexRegex) {
     const [, fieldArrayName, indexStr] = nameIndexRegex;
     error = errors[fieldArrayName]?.[Number(indexStr)];
   }
+  const nestedNameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\.(.*?)\]*$/);
+  if (nestedNameIndexRegex) {
+    const [, fieldArrayName, indexStr, fieldItemName] = nestedNameIndexRegex;
+    error = errors[fieldArrayName]?.[Number(indexStr)]?.[fieldItemName];
+  }
   useMemo(
     () => customField?.type && registerField({ ...customField, key: name }),
     [customField, name, registerField]
@@ -44,6 +51,7 @@ export const useField = (
     control,
     register,
     reset,
+    resetField,
     trigger,
     watch,
     componentRegistry,