diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
new file mode 100644
index 0000000000..972982cacb
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+import Tooltip from '@/app/components/base/tooltip'
+import { RiSendPlaneLine } from '@remixicon/react'
+
+const InputField: React.FC = () => {
+  return (
+    <div className="flex flex-col space-y-4">
+      {/* Input Field */}
+      <div className="flex items-center space-x-2">
+        <Input
+          className="flex-1 rounded-md border border-components-input-border-active bg-components-input-bg-normal px-4 py-2 text-text-primary"
+          placeholder="Enter your text here"
+        />
+        <Tooltip popupContent="Submit">
+          <Button className="bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg-hover">
+            <RiSendPlaneLine className="h-5 w-5" />
+          </Button>
+        </Tooltip>
+      </div>
+
+      {/* Additional Info */}
+      <p className="text-sm text-components-input-text-placeholder">
+        Please provide the required information.
+      </p>
+    </div>
+  )
+}
+
+export default InputField
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/test-page.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/test-page.tsx
new file mode 100644
index 0000000000..7fdcc935b3
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/test-page.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import InputField from './input-field'
+
+const TestPage: React.FC = () => {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+      <div className="w-full max-w-md rounded-md bg-white p-4 shadow-md">
+        <h1 className="mb-4 text-xl font-bold">Test Input Field</h1>
+        <InputField />
+      </div>
+    </div>
+  )
+}
+
+export default TestPage
diff --git a/web/app/test/page.tsx b/web/app/test/page.tsx
new file mode 100644
index 0000000000..bb46f27ae6
--- /dev/null
+++ b/web/app/test/page.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import InputField from '@/app/components/base/prompt-editor/plugins/hitl-input-block/input-field'
+
+const Page = () => {
+  return (
+    <InputField />
+  )
+}
+
+export default Page