diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index b8e687ac06..2018dd8c7e 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -18,6 +18,10 @@ let docfield_df = computed(() => {
 			return false;
 		}
 
+		if (df.fieldname === "fetch_from") {
+			df.fieldtype = "Fetch From";
+		}
+
 		if (
 			in_list(["fetch_from", "fetch_if_empty"], df.fieldname) &&
 			in_list(frappe.model.no_value_type, store.form.selected_field.fieldtype)
diff --git a/frappe/public/js/form_builder/components/controls/FetchFromControl.vue b/frappe/public/js/form_builder/components/controls/FetchFromControl.vue
new file mode 100644
index 0000000000..526ce48efb
--- /dev/null
+++ b/frappe/public/js/form_builder/components/controls/FetchFromControl.vue
@@ -0,0 +1,87 @@
+<!-- Used as Fetch From Control -->
+<script setup>
+import { useStore } from "../../store";
+import { ref, computed, watch } from "vue";
+import { computedAsync } from "@vueuse/core";
+
+let store = useStore();
+const props = defineProps(["df", "value", "modelValue"]);
+let emit = defineEmits(["update:modelValue"]);
+
+let doctype = ref("");
+let fieldname = ref("");
+let doctypes = ref("");
+
+let doctype_df = computed(() => {
+	doctypes.value = store
+		.get_updated_fields()
+		.filter((df) => df.fieldtype == "Link")
+		.filter((df) => df.options && df.fieldname != store.form.selected_field.fieldname)
+		.sort((a, b) => a.options.localeCompare(b.options))
+		.map((df) => ({
+			label: `${df.options} (${df.fieldname})`,
+			value: df.fieldname,
+			doctype_name: df.options,
+		}));
+
+	let options = [{ label: __("Select DocType"), value: "" }, ...doctypes.value];
+	return { fieldtype: "Select", label: __("Fetch From"), options };
+});
+
+let field_df = computedAsync(async () => {
+	let options = [{ label: __("Select Field"), value: "" }];
+	let df = { fieldtype: "Select", label: __("Fetch From"), options };
+	if (!doctype.value) return df;
+	let doctype_name = doctypes.value?.find((df) => df.value == doctype.value).doctype_name;
+	if (!doctype_name) return df;
+
+	if (props.value.split(".")[0] != doctype.value) {
+		fieldname.value = "";
+	}
+
+	await frappe.model.with_doctype(doctype_name);
+
+	let fields = frappe.meta
+		.get_docfields(doctype_name, null, {
+			fieldtype: ["not in", frappe.model.no_value_type],
+		})
+		.sort((a, b) => {
+			if (a.label && b.label) {
+				return a.label.localeCompare(b.label);
+			}
+		})
+		.map((df) => ({
+			label: `${df.label || __("No Label")} (${df.fieldtype})`,
+			value: df.fieldname,
+		}));
+
+	df.options = df.options.concat(fields);
+	return df;
+}, {});
+
+watch(
+	() => props.value,
+	(value) => {
+		[doctype.value, fieldname.value] = value?.split(".") || ["", ""];
+	},
+	{ immediate: true }
+);
+
+watch([() => doctype.value, () => fieldname.value], ([doctype_value, fieldname_value]) => {
+	let [doctype_name, field_name] = props.value?.split(".") || ["", ""];
+	if (doctype_value != doctype_name || fieldname_value != field_name) {
+		emit("update:modelValue", `${doctype_value}.${fieldname_value}`);
+	}
+});
+</script>
+
+<template>
+	<SelectControl :df="doctype_df" :value="doctype" v-model="doctype" />
+	<SelectControl
+		v-if="doctype"
+		:df="field_df"
+		:value="fieldname"
+		v-model="fieldname"
+		:no_label="true"
+	/>
+</template>
diff --git a/frappe/public/js/form_builder/components/controls/TextControl.vue b/frappe/public/js/form_builder/components/controls/TextControl.vue
index afd4513c38..afcd409cd2 100644
--- a/frappe/public/js/form_builder/components/controls/TextControl.vue
+++ b/frappe/public/js/form_builder/components/controls/TextControl.vue
@@ -1,8 +1,7 @@
 <!-- Used as Text, Small Text & Long Text Control -->
 <script setup>
 import { useStore } from "../../store";
-import { useSlots, ref, computed, watch } from "vue";
-import { computedAsync } from "@vueuse/core";
+import { useSlots, computed } from "vue";
 
 let store = useStore();
 const props = defineProps(["df", "value", "modelValue"]);
@@ -15,91 +14,10 @@ let height = computed(() => {
 	}
 	return "300px";
 });
-
-let doctype = ref("");
-let fieldname = ref("");
-let doctypes = ref("");
-
-let doctype_df = computed(() => {
-	doctypes.value = store
-		.get_updated_fields()
-		.filter(df => df.fieldtype == "Link")
-		.filter(df => df.options && df.fieldname != store.form.selected_field.fieldname)
-		.sort((a, b) => a.options.localeCompare(b.options))
-		.map(df => ({
-			label: `${df.options} (${df.fieldname})`,
-			value: df.fieldname,
-			doctype_name: df.options
-		}));
-
-	let options = [{ label: __("Select DocType"), value: "" }, ...doctypes.value];
-	return { fieldtype: "Select", label: __("Fetch From"), options };
-});
-
-let field_df = computedAsync(async () => {
-	let options = [{ label: __("Select Field"), value: "" }];
-	let df = { fieldtype: "Select", label: __("Fetch From"), options };
-	if (!doctype.value) return df;
-	let doctype_name = doctypes.value?.find(df => df.value == doctype.value).doctype_name;
-	if (!doctype_name) return df;
-
-	if (props.value.split(".")[0] != doctype.value) {
-		fieldname.value = "";
-	}
-
-	await frappe.model.with_doctype(doctype_name);
-
-	let fields = frappe.meta
-		.get_docfields(doctype_name, null, {
-			fieldtype: ["not in", frappe.model.no_value_type]
-		})
-		.sort((a, b) => {
-			if (a.label && b.label) {
-				return a.label.localeCompare(b.label);
-			}
-		})
-		.map(df => ({
-			label: `${df.label || __("No Label")} (${df.fieldtype})`,
-			value: df.fieldname
-		}));
-
-	df.options = df.options.concat(fields);
-	return df;
-}, {});
-
-watch(
-	() => props.value,
-	value => {
-		if (props.df.fieldname == "fetch_from") {
-			[doctype.value, fieldname.value] = value?.split(".") || ["", ""];
-		}
-	},
-	{ immediate: true }
-);
-
-watch([() => doctype.value, () => fieldname.value], ([doctype_value, fieldname_value]) => {
-	let [doctype_name, field_name] = props.value?.split(".") || ["", ""];
-	if (
-		props.df.fieldname == "fetch_from" &&
-		(doctype_value != doctype_name || fieldname_value != field_name)
-	) {
-		emit("update:modelValue", `${doctype_value}.${fieldname_value}`);
-	}
-});
 </script>
 
 <template>
-	<div v-if="df.fieldname == 'fetch_from'">
-		<SelectControl :df="doctype_df" :value="doctype" v-model="doctype" />
-		<SelectControl
-			v-if="doctype"
-			:df="field_df"
-			:value="fieldname"
-			v-model="fieldname"
-			:no_label="true"
-		/>
-	</div>
-	<div v-else class="control" :class="{ editable: slots.label }">
+	<div class="control" :class="{ editable: slots.label }">
 		<!-- label -->
 		<div v-if="slots.label" class="field-controls">
 			<slot name="label" />
diff --git a/frappe/public/js/form_builder/globals.js b/frappe/public/js/form_builder/globals.js
index 591e75d71e..f7a04df2db 100644
--- a/frappe/public/js/form_builder/globals.js
+++ b/frappe/public/js/form_builder/globals.js
@@ -12,6 +12,7 @@ import SignatureControl from "./components/controls/SignatureControl.vue";
 import TableControl from "./components/controls/TableControl.vue";
 import TextControl from "./components/controls/TextControl.vue";
 import TextEditorControl from "./components/controls/TextEditorControl.vue";
+import FetchFromControl from "./components/controls/FetchFromControl.vue";
 
 export function registerGlobalComponents(app) {
 	app.component("AttachControl", AttachControl)
@@ -52,5 +53,6 @@ export function registerGlobalComponents(app) {
 		.component("TableMultiSelectControl", DataControl)
 		.component("TextControl", TextControl)
 		.component("TextEditorControl", TextEditorControl)
-		.component("TimeControl", DataControl);
+		.component("TimeControl", DataControl)
+		.component("FetchFromControl", FetchFromControl);
 }