diff --git a/package.json b/package.json
index 6e65396..c1b7bb2 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,8 @@
     "@vue/compiler-sfc": "^3.0.11",
     "@vuedx/typecheck": "^0.6.3",
     "@vuedx/typescript-plugin-vue": "^0.6.3",
+    "@vuelidate/core": "^2.0.0-alpha.18",
+    "@vuelidate/validators": "^2.0.0-alpha.15",
     "@vueuse/integrations": "^4.11.0",
     "autoprefixer": "^10.2.5",
     "axios": "^0.21.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb4f7e7..ba73e50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,8 @@ specifiers:
   '@vue/compiler-sfc': ^3.0.11
   '@vuedx/typecheck': ^0.6.3
   '@vuedx/typescript-plugin-vue': ^0.6.3
+  '@vuelidate/core': ^2.0.0-alpha.18
+  '@vuelidate/validators': ^2.0.0-alpha.15
   '@vueuse/integrations': ^4.11.0
   autoprefixer: ^10.2.5
   axios: ^0.21.1
@@ -63,6 +65,8 @@ dependencies:
   '@vue/compiler-sfc': 3.0.11_vue@3.0.11
   '@vuedx/typecheck': 0.6.3
   '@vuedx/typescript-plugin-vue': 0.6.3
+  '@vuelidate/core': 2.0.0-alpha.18_vue@3.0.11
+  '@vuelidate/validators': 2.0.0-alpha.15_vue@3.0.11
   '@vueuse/integrations': 4.11.0_vue@3.0.11
   autoprefixer: 10.2.5_postcss@8.2.15
   axios: 0.21.1
@@ -1166,6 +1170,22 @@ packages:
       - supports-color
     dev: false
 
+  /@vuelidate/core/2.0.0-alpha.18_vue@3.0.11:
+    resolution: {integrity: sha512-g6Pn0efTwSUbZWyCX0v4cLOiZoszrTCFC2CI8gI5szmgVZV30hmC3aI7yCutHwaPpPd2cxMB+XILS6cl7QHiYA==}
+    dependencies:
+      vue-demi: 0.6.2_vue@3.0.11
+    transitivePeerDependencies:
+      - vue
+    dev: false
+
+  /@vuelidate/validators/2.0.0-alpha.15_vue@3.0.11:
+    resolution: {integrity: sha512-G1gFPPA6ogLaQd2MRwg0gGCo1T5m52bQomTMvGeELWXc6WoDs416KSCZnh7hLktfm4BQBlKFKwM8PiiVJJDNuQ==}
+    dependencies:
+      vue-demi: 0.6.2_vue@3.0.11
+    transitivePeerDependencies:
+      - vue
+    dev: false
+
   /@vueuse/integrations/4.11.0_vue@3.0.11:
     resolution: {integrity: sha512-ma9WFTk7JKUFBZCRu9eq11MDHOe67RSz9XLHu9S/fXaEblJzHthNCNcxffuHkqLE5kEyr8OtsJD1DB/YHwkX7A==}
     dependencies:
@@ -5429,6 +5449,16 @@ packages:
     resolution: {integrity: sha512-orMjjj1r4efP5ocODYZm3orpANakRBsxPZPDoD5UIrFOPKDFtMJQLp6PIH1rb3AYVRD1iYXMhDQoC6tZ+DrigA==}
     dev: false
 
+  /vue-demi/0.6.2_vue@3.0.11:
+    resolution: {integrity: sha512-4KfwxbqsZcDz7UryD11oHa6FLK9Gzx4MIwAEcP37IbUdXuF6DHg2w9L5Zv5t+FNqsuAjEQ2NnGVIZ3u71y435Q==}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      vue: ^2.6.0 || >=3.0.0-rc.1
+    dependencies:
+      vue: 3.0.11
+    dev: false
+
   /vue-demi/0.9.0_vue@3.0.11:
     resolution: {integrity: sha512-f8vVUpC726YXv99fF/3zHaw5CUYbP5H/DVWBN+pncXM8P2Uz88kkffwj9yD7MukuVzPICDHNrgS3VC2ursaP7g==}
     hasBin: true
diff --git a/src/components/molecules/VFormItem/vformItem.vue b/src/components/molecules/VFormItem/vformItem.vue
new file mode 100644
index 0000000..00dbb9a
--- /dev/null
+++ b/src/components/molecules/VFormItem/vformItem.vue
@@ -0,0 +1,50 @@
+<template>
+  <ElFormItem
+    class="v-form-item"
+    :class="{'-error': error}"
+  >
+    <slot />
+
+    <transition name="el-zoom-in-top">
+      <div
+        v-if="error"
+        class="el-form-item__error"
+      >
+        <slot name="error" />
+      </div>
+    </transition>
+  </ElFormItem>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'VFormItem',
+
+  props: {
+    error: {
+      type: Boolean,
+      required: true,
+      default: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.v-form-item {
+  &.-error {
+    /* stylelint-disable-next-line */
+    .el-input__inner,
+    .el-textarea__inner {
+      border: 1px solid theme('colors.red.500');
+    }
+  }
+
+  /* stylelint-disable-next-line */
+  &__error {
+    color: theme('colors.red.500');
+  }
+}
+</style>
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
new file mode 100644
index 0000000..379196f
--- /dev/null
+++ b/src/components/molecules/index.ts
@@ -0,0 +1,3 @@
+import VFormItem from './VFormItem/vformItem.vue'
+
+export { VFormItem }
diff --git a/src/modules/Home/views/home.vue b/src/modules/Home/views/home.vue
index 05f47d5..e849ef3 100644
--- a/src/modules/Home/views/home.vue
+++ b/src/modules/Home/views/home.vue
@@ -7,24 +7,50 @@
     <ElButton @click="toggleLocales">
       👋
     </ElButton>
+
+    <ElForm>
+      {{ v$.name.$error }}
+      <VFormItem :error="v$.name.$invalid">
+        <ElInput
+          v-model="form.name"
+          placeholder="Name"
+        />
+
+        <template #error>
+          <div v-if="v$.name.required.$invalid">
+            Name field is required
+          </div>
+        </template>
+      </VFormItem>
+    </ElForm>
   </div>
 </template>
 
 <script lang="ts">
 import {
   defineComponent,
+  reactive,
+  computed,
   onMounted
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
+import useVuelidate from '@vuelidate/core'
+import { required } from '@vuelidate/validators'
 
 import { SET_TITLE } from '@/stores/Common/commonTypes'
 
+import { VFormItem } from 'molecules'
+
 export default defineComponent({
   name: 'Home',
-
+  components: { VFormItem },
   setup () {
-    const { t, availableLocales, locale } = useI18n()
+    const {
+      t,
+      availableLocales,
+      locale
+    } = useI18n()
 
     const store = useStore()
     const common = store.getters.common
@@ -41,9 +67,21 @@ export default defineComponent({
       console.log(import.meta.env.VITE_APP_ENV)
     })
 
+    const form = reactive({
+      name: ''
+    })
+
+    const formRules = computed(() => ({
+      name: { required }
+    }))
+
+    const v$ = useVuelidate(formRules, form)
+
     return {
       t,
-      toggleLocales
+      toggleLocales,
+      v$,
+      form
     }
   }
 })