diff --git a/frontend/components/global/DataField.vue b/frontend/components/global/DataField.vue
new file mode 100644
index 0000000..dce67ba
--- /dev/null
+++ b/frontend/components/global/DataField.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    id?: string;
+    label: string;
+    required?: boolean;
+    error?: any;
+};
+
+// props
+
+withDefaults(defineProps<Props>(), {
+    required: false,
+});
+</script>
+
+<template>
+    <div class="w-full flex flex-col gap-2">
+        <div class="flex items-center gap-1 ps-2">
+            <label :for="id" class="typo-label-sm">{{ label }}</label>
+            <span v-if="!!required && required" class="text-danger-600">*</span>
+        </div>
+        <slot />
+        <div
+            v-if="!!error && error.$error"
+            class="w-full typo-label-xs flex items-center py-1 px-3 rounded-md text-danger-600"
+        >
+            {{ error.$errors[0].$message }}
+        </div>
+    </div>
+</template>
+
+<style scoped></style>