diff --git a/app/src/components/CrudField.vue b/app/src/components/CrudField.vue
new file mode 100644
index 0000000..17c7b9d
--- /dev/null
+++ b/app/src/components/CrudField.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { IonInput, IonItem } from '@ionic/vue';
+import { Field, useField } from 'vee-validate';
+
+interface Props {
+  name: string; // The name of the field for validation
+  label: string; // The label text
+  labelPlacement?: string; // Placement of the label (optional)
+  type?: string; // Input type, e.g., "text", "number", etc.
+}
+
+const props = defineProps<Props>(); // Define props for the component
+const { value, errorMessage, ...fieldAttrs } = useField(props.name); // Setup field logic using vee-validate
+</script>
+
+<template>
+  <ion-item>
+    <Field name="name">
+      <IonInput
+          :label="label"
+          :label-placement="labelPlacement || 'stacked'"
+          v-model="value"
+          v-bind="fieldAttrs"
+          :type="type || 'text'"
+      >
+        <small v-if="errorMessage" class="error-message">{{ errorMessage }}</small>
+      </IonInput>
+    </Field>
+  </ion-item>
+</template>
+
+<style scoped>
+.error-message {
+  color: red;
+  font-size: 12px;
+}
+</style>