diff --git a/dev/typescript/App.vue b/dev/typescript/App.vue
index 316dd9f..0e745b7 100644
--- a/dev/typescript/App.vue
+++ b/dev/typescript/App.vue
@@ -58,6 +58,7 @@ import {
   InputBase,
   email,
   pattern,
+  ColorInput,
 } from '../../src';
 
 export default defineComponent({
@@ -142,6 +143,11 @@ export default defineComponent({
           label: 'Custom Field',
           name: 'customField1',
         }),
+        new ColorInput({
+          label: 'Color',
+          name: 'color',
+          value: '#4DBA87',
+        }),
       ],
     });
     function handleSubmit(values) {
diff --git a/dev/typescript/main.ts b/dev/typescript/main.ts
index bb2b829..3b77c39 100644
--- a/dev/typescript/main.ts
+++ b/dev/typescript/main.ts
@@ -4,7 +4,8 @@ import App from './App.vue';
 import './styles/main.scss';
 
 import { createDynamicForms } from '../../src';
-//import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
+
+// import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
 
 const VueDynamicForms = createDynamicForms({
   autoValidate: true,
diff --git a/dev/vue/App.vue b/dev/vue/App.vue
index 8e6781f..f8c002d 100644
--- a/dev/vue/App.vue
+++ b/dev/vue/App.vue
@@ -37,6 +37,7 @@ import {
   email,
   pattern,
   TextAreaInput,
+  ColorInput,
 } from '../../src';
 
 export default defineComponent({
@@ -89,6 +90,10 @@ export default defineComponent({
           cols: 20,
           rows: 5,
         }),
+        new ColorInput({
+          label: 'Color',
+          value: '#4DBA87',
+        }),
       ],
     });
     function handleSubmit(values) {
diff --git a/src/components/dynamic-input/DynamicInput.vue b/src/components/dynamic-input/DynamicInput.vue
index 6422e0d..9dd81b2 100644
--- a/src/components/dynamic-input/DynamicInput.vue
+++ b/src/components/dynamic-input/DynamicInput.vue
@@ -135,6 +135,7 @@ export default defineComponent({
         case 'email':
         case 'password':
         case 'url':
+        case 'color':
           component = h(TextInput, attributes.value);
           break;
         case 'select':
diff --git a/src/core/models.ts b/src/core/models.ts
index afbcb11..5db1770 100644
--- a/src/core/models.ts
+++ b/src/core/models.ts
@@ -91,6 +91,10 @@ export class RadioInput extends InputBase<boolean> {
   type = 'radio';
 }
 
+export class ColorInput extends InputBase<string> {
+  type = 'color';
+}
+
 export class FormControl<T> extends InputBase<T> {
   valid = true;
   invalid = false;