diff --git a/dev/typescript/App.vue b/dev/typescript/App.vue
index bea2b15..fdb65bf 100644
--- a/dev/typescript/App.vue
+++ b/dev/typescript/App.vue
@@ -230,6 +230,7 @@ export default defineComponent({
           value: string;
           disabled?: boolean;
         }[];
+        form.fields.name.value = 'Alvaro';
       } catch (e) {
         console.error(e);
       }
diff --git a/package-lock.json b/package-lock.json
index 598972b..3439c2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8807,6 +8807,11 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "deep-clone": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/deep-clone/-/deep-clone-3.0.3.tgz",
+      "integrity": "sha512-6jtXIlCBAwr3GP/7Il52clbIFIKAxg/pnNkL4/sE6+Oqb10MXMtm9LDZV2IAuwdaKV9VBm8hlxAFk9r6pF8XRw=="
+    },
     "deep-equal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -8833,6 +8838,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deep-object-diff": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.0.tgz",
+      "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw=="
+    },
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
diff --git a/package.json b/package.json
index f7335a8..aa1485c 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,8 @@
     "vue-select": "3.10.8"
   },
   "dependencies": {
+    "deep-clone": "^3.0.3",
+    "deep-object-diff": "^1.1.0",
     "rollup-plugin-scss": "^2.6.1"
   }
 }
diff --git a/src/components/dynamic-form/DynamicForm.vue b/src/components/dynamic-form/DynamicForm.vue
index 98835ba..b2c50d1 100644
--- a/src/components/dynamic-form/DynamicForm.vue
+++ b/src/components/dynamic-form/DynamicForm.vue
@@ -13,6 +13,7 @@
       :control="control"
       :submited="submited"
       @change="valueChange"
+      @blur="onBlur"
     >
       <template v-slot:customField="props">
         <div
@@ -25,7 +26,6 @@
             :name="slot"
             :control="normalizedControls[slot]"
             :onChange="props.onChange"
-            :onFocus="props.onFocus"
             :onBlur="props.onBlur"
           ></slot>
         </div>
@@ -38,23 +38,22 @@
 import {
   defineComponent,
   PropType,
-  reactive,
   ref,
   Ref,
   computed,
   onMounted,
   watch,
   inject,
+  toRaw,
 } from 'vue';
-import { DynamicForm } from './form';
+import { diff } from 'deep-object-diff';
+
 import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
-import { FieldTypes, FormControl, InputType } from '@/core/models';
+import { DynamicForm, FieldTypes, FormControl, InputType } from '@/core/models';
 import { dynamicFormsSymbol } from '@/useApi';
-import { removeEmpty } from '@/core/utils/helpers';
+import { deepClone, hasValue, removeEmpty } from '@/core/utils/helpers';
 
-/* import { warn } from '../../core/utils/warning';
- */
 const props = {
   form: {
     type: Object as PropType<DynamicForm>,
@@ -80,31 +79,11 @@ export default defineComponent({
   components,
   setup(props, ctx) {
     const { options } = inject(dynamicFormsSymbol);
+    const cache = deepClone(toRaw(props.form.fields));
 
     const controls: Ref<FormControl<InputType>[]> = ref([]);
-    const formValues = reactive({});
     const submited = ref(false);
 
-    onMounted(() => {
-      mapControls();
-      initValues();
-    });
-    //  TODO: enable again when plugin theme option is available
-
-    /* const validTheme = computed(
-      () => options.theme && AVAILABLE_THEMES.includes(options.theme),
-    );
-
-    if (!validTheme.value) {
-      warn(
-        `There isn't a theme: ${
-          options.theme
-        } just yet, please choose one of the available themes: ${AVAILABLE_THEMES.join(
-          ', ',
-        )}`,
-      );
-    } */
-
     const deNormalizedScopedSlots = computed(() => Object.keys(ctx.slots));
 
     const normalizedControls = computed(() => {
@@ -120,6 +99,22 @@ export default defineComponent({
       return !hasInvalidControls;
     });
 
+    const formValues = computed(() => {
+      return removeEmpty(
+        controls.value.reduce((prev, curr) => {
+          const obj = {};
+          obj[curr.name] =
+            curr.type === FieldTypes.NUMBER
+              ? parseFloat(`${curr.value}`)
+              : curr.value;
+          return {
+            ...prev,
+            ...obj,
+          };
+        }, {}),
+      );
+    });
+
     const errors = computed(() => {
       return controls.value
         ? controls.value.reduce((prev, curr) => {
@@ -160,12 +155,7 @@ export default defineComponent({
       }
     });
 
-    function valueChange(changedValue: Record<string, unknown>) {
-      Object.assign(formValues, changedValue);
-      ctx.emit('change', removeEmpty(formValues));
-    }
-
-    function mapControls(empty?: boolean) {
+    function mapControls(empty = false) {
       const controlArray =
         Object.entries(props.form?.fields).map(
           ([key, field]: [string, InputType]) =>
@@ -192,6 +182,69 @@ export default defineComponent({
         controls.value = controlArray;
       }
     }
+    function findControlByName(name: string | unknown) {
+      const updatedCtrl = controls.value.find(control => control.name === name);
+      return updatedCtrl;
+    }
+
+    function valueChange(event: Record<string, unknown>) {
+      if (event && hasValue(event.value)) {
+        const updatedCtrl = findControlByName(event.name);
+        if (updatedCtrl) {
+          updatedCtrl.value = event.value as string;
+          updatedCtrl.dirty = true;
+          validateControl(updatedCtrl);
+        }
+        ctx.emit('change', formValues.value);
+      }
+    }
+
+    function onBlur(control: FormControl<InputType>) {
+      const updatedCtrl = findControlByName(control.name);
+      if (updatedCtrl) {
+        updatedCtrl.touched = true;
+      }
+    }
+
+    function validateControl(control: FormControl<InputType>) {
+      if (control.validations) {
+        const validation = control.validations.reduce((prev, curr) => {
+          const val =
+            typeof curr.validator === 'function'
+              ? curr.validator(control)
+              : null;
+          if (val !== null) {
+            const [key, value] = Object.entries(val)[0];
+            const obj = {};
+            obj[key] = {
+              value,
+              text: curr.text,
+            };
+            return {
+              ...prev,
+              ...obj,
+            };
+          }
+          return {
+            ...prev,
+          };
+        }, {});
+        control.errors = validation;
+        control.valid = Object.keys(validation).length === 0;
+      }
+    }
+
+    function detectChanges(fields) {
+      const changes = diff(cache, deepClone(fields));
+      Object.entries(changes).forEach(([key, value]) => {
+        let ctrl = findControlByName(key);
+        if (ctrl) {
+          Object.entries(value).forEach(([change, newValue]) => {
+            ctrl[change] = newValue;
+          });
+        }
+      });
+    }
 
     function resetForm() {
       mapControls(true);
@@ -208,33 +261,22 @@ export default defineComponent({
       }
     }
 
-    function initValues() {
-      Object.assign(
-        formValues,
-        controls.value
-          ? controls.value.reduce((prev, curr) => {
-              const obj = {};
-              obj[curr.name] =
-                curr.type === FieldTypes.NUMBER
-                  ? parseFloat(`${curr.value}`)
-                  : curr.value;
-              return {
-                ...prev,
-                ...obj,
-              };
-            }, {})
-          : {},
-      );
-      ctx.emit('changed', formValues);
-    }
+    watch(
+      () => props.form.fields,
+      fields => {
+        detectChanges(fields);
+      },
+      {
+        deep: true,
+      },
+    );
 
-    watch(props.form.fields, () => {
+    onMounted(() => {
       mapControls();
     });
 
     return {
       controls,
-      form: props.form,
       valueChange,
       formValues,
       handleSubmit,
@@ -244,6 +286,7 @@ export default defineComponent({
       normalizedControls,
       submited,
       formattedOptions,
+      onBlur,
     };
   },
 });
diff --git a/src/components/dynamic-form/form.ts b/src/components/dynamic-form/form.ts
deleted file mode 100644
index fe40505..0000000
--- a/src/components/dynamic-form/form.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { InputType } from '@/core/models';
-
-export interface DynamicForm {
-  id: string;
-  fields: InputType[];
-  fieldOrder?: string[];
-}
diff --git a/src/components/dynamic-input/DynamicInput.vue b/src/components/dynamic-input/DynamicInput.vue
index 5232064..72f8b4f 100644
--- a/src/components/dynamic-input/DynamicInput.vue
+++ b/src/components/dynamic-input/DynamicInput.vue
@@ -26,15 +26,7 @@ import {
   FieldTypes,
 } from '@/core/models';
 
-import {
-  isEmpty,
-  entries,
-  values,
-  keys,
-  isEvent,
-  isArray,
-  isObject,
-} from '@/core/utils/helpers';
+import { values, keys, isArray, isObject } from '@/core/utils/helpers';
 import { useInputEvents } from '@/composables/input-events';
 import { dynamicFormsSymbol } from '@/useApi';
 
@@ -61,6 +53,8 @@ const props = {
 export type ControlAttribute<T extends InputType> = {
   control: FormControl<T>;
   onChange: (value: unknown) => void;
+  onFocus: (value: unknown) => void;
+  onBlur: (value: unknown) => void;
 };
 
 export default defineComponent({
@@ -78,6 +72,8 @@ export default defineComponent({
         control: props?.control,
         style: props?.control.customStyles,
         onChange: valueChange,
+        onBlur: () => emit('blur', props.control),
+        onFocus: () => emit('focus', props.control),
       };
     });
 
@@ -91,6 +87,12 @@ export default defineComponent({
         {
           'form-group--inline': props?.control?.type === FieldTypes.CHECKBOX,
         },
+        {
+          'form-group--success':
+            props?.control?.valid &&
+            props?.control?.dirty &&
+            props?.control?.touched,
+        },
         {
           'form-group--error': showErrors.value,
         },
@@ -131,57 +133,8 @@ export default defineComponent({
       return [];
     });
 
-    function validate() {
-      if (
-        props.control &&
-        props.control.validations &&
-        isEmpty(props.control.validations)
-      ) {
-        const validation = props.control.validations.reduce((prev, curr) => {
-          const val =
-            typeof curr.validator === 'function'
-              ? curr.validator(props.control)
-              : null;
-          if (val !== null) {
-            const [key, value] = entries(val)[0];
-            const obj = {};
-            obj[key] = {
-              value,
-              text: curr.text,
-            };
-            return {
-              ...prev,
-              ...obj,
-            };
-          }
-          return {
-            ...prev,
-          };
-        }, {});
-        props.control.errors = validation;
-        props.control.valid = Object.keys(validation).length === 0;
-      }
-    }
-
     function valueChange($event) {
-      let value;
-      const newValue = {};
-
-      if (isEvent($event)) {
-        $event.stopPropagation();
-        value =
-          props.control.type === 'checkbox'
-            ? $event.target.checked
-            : $event.target.value;
-      } else {
-        value = $event;
-      }
-
-      if (props.control) {
-        newValue[props.control.name] = value;
-        validate();
-        emit('change', newValue);
-      }
+      emit('change', $event);
     }
 
     return () => {
diff --git a/src/components/select-input/SelectInput.vue b/src/components/select-input/SelectInput.vue
index 2e607b6..c639ae1 100644
--- a/src/components/select-input/SelectInput.vue
+++ b/src/components/select-input/SelectInput.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+import { defineComponent, h, PropType, computed } from 'vue';
 import { FormControl, SelectInput } from '@/core/models';
 import { useInputEvents } from '@/composables/input-events';
+import { isArray, isObject } from '@/core/utils/helpers';
 
 const props = {
   control: Object as PropType<FormControl<SelectInput>>,
@@ -14,7 +15,14 @@ export default defineComponent({
     return () => {
       const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
 
-      const options = props?.control?.options?.map(({ key, value, disabled }) =>
+      const formattedOptions = computed(() => {
+        if (isObject(props?.control?.options)) {
+          return Object.values(props?.control?.options);
+        }
+        return props?.control?.options;
+      });
+
+      const options = formattedOptions.value.map(({ key, value, disabled }) =>
         h('option', { key, value: key, disabled }, value),
       );
       return h(
diff --git a/src/components/text-input/TextInput.vue b/src/components/text-input/TextInput.vue
index 2102b54..45b49b1 100644
--- a/src/components/text-input/TextInput.vue
+++ b/src/components/text-input/TextInput.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+import { defineComponent, h, PropType, ref } from 'vue';
 import {
   ColorInput,
   EmailInput,
@@ -21,14 +21,13 @@ export default defineComponent({
   props,
   setup(props, { emit }) {
     const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
-
     return () =>
       h('input', {
         id: props.control.name,
         name: props.control.name || '',
         type: props.control.type,
         class: ['form-control'],
-        value: props?.control?.value,
+        value: props.control.value,
         disabled: props.control.disabled,
         placeholder: props.control.placeholder,
         required: props.control.required,
diff --git a/src/composables/input-events.ts b/src/composables/input-events.ts
index 7c05aec..cd307a7 100644
--- a/src/composables/input-events.ts
+++ b/src/composables/input-events.ts
@@ -1,16 +1,29 @@
 /* eslint-disable */
 
 import { watch } from 'vue';
+import { hasValue } from '../core/utils/helpers';
 
 export function useInputEvents(props: any, emit: any) {
   function onChange($event): void {
-    if (props.control) {
-      props.control.dirty = true;
+    if (props.control && hasValue($event.target.value)) {
+      $event.stopImmediatePropagation();
+
+      emit('change', {
+        name: props.control.name,
+        value: props.control.type === 'checkbox'
+        ? $event.target.checked
+        : $event.target.value,
+      });
     }
   }
   function onCheck($event): void {
     if (props.control) {
-      props.control.dirty = true;
+      $event.stopImmediatePropagation();
+
+      emit('change', {
+        name: props.control.name,
+        value: $event.target.checked,
+      });
     }
   }
   function onFocus(): void {
@@ -18,17 +31,16 @@ export function useInputEvents(props: any, emit: any) {
   }
   function onBlur(): void {
     emit('blur');
-    if (props.control) {
-      props.control.touched = true;
-    }
   }
 
-  watch(props, (form: any) => {
-    if (form?.control && !form?.control?.dirty) {
-      form.control.dirty = true;
-      emit('change', form.control.value);
+  watch(() => props?.control?.value, (curr, prev) => {
+    if(prev === undefined && hasValue(curr)) {
+      emit('change', {
+        name: props.control.name,
+        value: props.control.value
+      });
     }
-  });
+  })
 
   return {
     onFocus,
diff --git a/src/core/factories.ts b/src/core/factories.ts
index 94714a5..0e98bd4 100644
--- a/src/core/factories.ts
+++ b/src/core/factories.ts
@@ -10,8 +10,17 @@ import {
   NumberInput,
   SelectInput,
   CustomInput,
+  FormControl,
+  InputType,
 } from './models';
 
+const EMPTY_CONTROL = {
+  dirty: false,
+  touched: false,
+  valid: true,
+  errors: null,
+};
+
 export const FieldBase = ({
   validations = [],
   label = null,
@@ -129,3 +138,14 @@ export const CustomField = ({
   value,
   type: FieldTypes.CUSTOM,
 });
+
+export const FieldControl = ({
+  name,
+  type,
+  ...rest
+}: Partial<FormControl<any>>): FormControl<any> => ({
+  ...FieldBase(rest),
+  name,
+  type,
+  ...EMPTY_CONTROL,
+});
diff --git a/src/core/models.ts b/src/core/models.ts
index 67ed46d..4234930 100644
--- a/src/core/models.ts
+++ b/src/core/models.ts
@@ -15,6 +15,15 @@ export type InputType =
 
 export type MustHave<T, K extends keyof T> = Partial<T> & Pick<T, K>;
 
+export type FormFields = {
+  [key: string]: InputType;
+};
+export interface DynamicForm {
+  id: string;
+  fields: FormFields;
+  fieldOrder?: string[];
+}
+
 export type ValidationErrors = {
   // eslint-disable-next-line
   [key: string]: any;
@@ -112,7 +121,6 @@ export type RadioInput = InputBase & {
 
 export type FormControl<T extends InputType> = T & {
   valid: boolean;
-  invalid: boolean;
   dirty: boolean;
   touched: boolean;
   errors: ValidationErrors | null;
diff --git a/src/core/utils/helpers.ts b/src/core/utils/helpers.ts
index e0c5628..3092b0b 100644
--- a/src/core/utils/helpers.ts
+++ b/src/core/utils/helpers.ts
@@ -25,6 +25,8 @@ export const isEmpty = (entry: any) => {
   }
 };
 
+export const hasValue = (value: unknown) => value !== undefined && value !== null && value !== '';
+
 export const removeEmpty = obj =>
   Object.keys(obj)
     .filter(k => obj[k] != null) // Remove undef. and null.
@@ -47,3 +49,23 @@ export const mockAsync = (success, timeout, value) => {
     }, timeout);
   });
 };
+
+export const deepClone = (obj: any) => {
+  let clone, value: any, key: string;
+
+  if (typeof obj !== "object" || obj === null) {
+    return obj; // Return the value if obj is not an object
+  }
+
+  // Create an array or object to hold the values
+  clone = Array.isArray(obj) ? [] : {};
+
+  for (key in obj) {
+    value = obj[key];
+
+    // Recursively (deep) copy for nested objects, including arrays
+    clone[key] = deepClone(value);
+  }
+
+  return clone;
+};
diff --git a/src/styles/themes/default.scss b/src/styles/themes/default.scss
index 1ee31c2..94e1bcf 100644
--- a/src/styles/themes/default.scss
+++ b/src/styles/themes/default.scss
@@ -32,6 +32,7 @@ $input-focus-box-shadow: $input-box-shadow !default;
 
 $enable-shadows: true !default;
 
+$input-success-color: #28a745 !default;
 $input-error-color: #dc3545 !default;
 
 // Form groups
@@ -63,13 +64,24 @@ $input-error-color: #dc3545 !default;
     align-items: center;
   }
 
+  &--success {
+    .form-label {
+      color: $input-success-color;
+    }
+
+    .form-control {
+      border-color: $input-success-color !important;
+      background-color: lighten($input-success-color, 50);
+    }
+  }
+
   &--error {
     .form-label {
       color: $input-error-color;
     }
 
     .form-control {
-      border-color: $input-error-color;
+      border-color: $input-error-color !important;
       background-color: lighten($input-error-color, 40);
     }
   }