From 7186cb0ab00a106be0fb80610fdd9f2d71126657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Thu, 20 Aug 2026 15:01:10 +0300
Subject: [PATCH] <input/> -> <Input/>

---
 .../ListFormSeeder_Administration.cs          | 14 +--
 .../host/custom/DynamicEntityComponent.json   |  4 +-
 configs/seeds/host/custom/NewComponent.json   |  2 +-
 ui/src/components/codeLayout/StyleModal.tsx   |  7 +-
 .../importManager/FileUploadArea.tsx          |  4 +-
 .../importManager/ImportPreview.tsx           |  7 +-
 ui/src/components/orders/PaymentForm.tsx      | 22 +++--
 ui/src/components/orders/ProductCatalog.tsx   |  4 +-
 ui/src/components/orders/TenantForm.tsx       | 31 ++++--
 .../scriptBuilder/ScriptBuilderDialog.tsx     | 13 ++-
 .../components/template/MessengerWidget.tsx   |  3 +-
 ui/src/components/template/Search.tsx         |  4 +-
 ui/src/components/ui/Input/Input.tsx          |  4 +-
 .../visualDesigner/VisualCanvas.tsx           |  9 +-
 .../views/admin/files/components/FileItem.tsx |  7 +-
 .../files/components/FileUploadModal.tsx      |  4 +-
 ui/src/views/admin/hr/OrgChart.tsx            |  4 +-
 .../edit/form-fields/FormFieldTabLookup.tsx   |  3 +-
 .../EditorOptionsBuilderDialog.tsx            | 19 ++--
 .../editor-options/OptionField.tsx            | 15 ++-
 .../listForm/wizard/WizardFileManager.tsx     |  3 +-
 .../listForm/wizard/WizardImportDialog.tsx    |  4 +-
 .../wizard/WizardStepDataSettings.tsx         |  3 +-
 .../listForm/wizard/WizardStepFields.tsx      | 34 ++++---
 .../listForm/workflow/WorkflowCriteria.tsx    |  6 +-
 ui/src/views/admin/videoroom/ChatPanel.tsx    |  4 +-
 .../views/admin/videoroom/DocumentsPanel.tsx  |  4 +-
 ui/src/views/admin/videoroom/RoomList.tsx     | 30 ++++--
 ui/src/views/ai/Assistant.tsx                 |  4 +-
 .../views/developerKit/ComponentManager.tsx   |  4 +-
 .../views/developerKit/CrudEndpointDialog.tsx |  4 +-
 .../developerKit/DynamicServiceEditor.tsx     | 16 +++-
 .../developerKit/DynamicServiceManager.tsx    |  4 +-
 .../views/developerKit/SqlObjectExplorer.tsx  |  7 +-
 ui/src/views/developerKit/SqlQueryManager.tsx | 10 +-
 ui/src/views/developerKit/SqlResultsGrid.tsx  |  4 +-
 .../developerKit/SqlTableDesignerDialog.tsx   | 28 ++++--
 .../developerKit/SqlViewDesignerDialog.tsx    | 22 +++--
 .../developerKit/VisualComponentDesigner.tsx  | 94 +++++++++++++------
 .../sqlViewDesigner/CriteriaGrid.tsx          | 22 +++--
 .../sqlViewDesigner/DiagramPane.tsx           |  7 +-
 .../editors/ImageUploadEditorComponent.tsx    |  4 +-
 ui/src/views/forum/forum/SearchModal.tsx      |  4 +-
 .../views/intranet/SocialWall/CreatePost.tsx  |  7 +-
 .../intranet/SocialWall/MediaManager.tsx      |  7 +-
 ui/src/views/intranet/SocialWall/PostItem.tsx |  4 +-
 ui/src/views/intranet/widgets/SurveyModal.tsx | 10 +-
 ui/src/views/list/Chart.tsx                   |  4 +-
 ui/src/views/list/GridExtraFilterToolbar.tsx  |  4 +-
 ui/src/views/list/TodoBoard.tsx               | 25 +++--
 .../editors/ImageUploadEditorComponent.tsx    |  4 +-
 ui/src/views/public/Blog.tsx                  |  7 +-
 ui/src/views/public/Demo.tsx                  | 19 ++--
 .../views/public/designer/DesignerDrawer.tsx  |  3 +-
 ui/src/views/shared/MenuAddDialog.tsx         | 30 ++++--
 55 files changed, 429 insertions(+), 197 deletions(-)

diff --git a/api/src/Sozsoft.Platform.DbMigrator/Migrations/ListFormSeeder_Administration.cs b/api/src/Sozsoft.Platform.DbMigrator/Migrations/ListFormSeeder_Administration.cs
index c19335d9..a53edcdc 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Migrations/ListFormSeeder_Administration.cs
+++ b/api/src/Sozsoft.Platform.DbMigrator/Migrations/ListFormSeeder_Administration.cs
@@ -5980,7 +5980,7 @@ public class ListFormSeeder_Administration : IDataSeedContributor, ITransientDep
                         new() { FieldName = "RequestDate", FieldDbType = DbType.Date, Value = "@NOW", CustomValueType = FieldCustomValueTypeEnum.CustomKey },
                         new() { FieldName = "Importance", FieldDbType = DbType.String, Value = "Low", CustomValueType = FieldCustomValueTypeEnum.Value },
                         new() { FieldName = "Urgency", FieldDbType = DbType.String, Value = "Low", CustomValueType = FieldCustomValueTypeEnum.Value },
-                        new() { FieldName = "Status", FieldDbType = DbType.String, Value = "backlog", CustomValueType = FieldCustomValueTypeEnum.Value },
+                        new() { FieldName = "Status", FieldDbType = DbType.String, Value = "Backlog", CustomValueType = FieldCustomValueTypeEnum.Value },
                     })
                 });
 
@@ -6082,12 +6082,12 @@ public class ListFormSeeder_Administration : IDataSeedContributor, ITransientDep
                         DisplayExpr = "name",
                         ValueExpr = "key",
                         LookupQuery = JsonSerializer.Serialize(new LookupDataDto[] {
-                            new () { Key="backlog", Name="App.StaticLookup.Backlog" },
-                            new () { Key="ready_to_start", Name="App.StaticLookup.ReadyToStart" },
-                            new () { Key="in_progress", Name="App.StaticLookup.InProgress" },
-                            new () { Key="code_review", Name="App.StaticLookup.CodeReview" },
-                            new () { Key="testing", Name="App.StaticLookup.Testing" },
-                            new () { Key="staging", Name="App.StaticLookup.Staging" }
+                            new () { Key="Backlog", Name="App.StaticLookup.Backlog" },
+                            new () { Key="Ready to Start", Name="App.StaticLookup.ReadyToStart" },
+                            new () { Key="In Progress", Name="App.StaticLookup.InProgress" },
+                            new () { Key="Code Review", Name="App.StaticLookup.CodeReview" },
+                            new () { Key="Testing", Name="App.StaticLookup.Testing" },
+                            new () { Key="Staging", Name="App.StaticLookup.Staging" }
                         }),
                     }),
                     ColSpan = 1,
diff --git a/configs/seeds/host/custom/DynamicEntityComponent.json b/configs/seeds/host/custom/DynamicEntityComponent.json
index ee76c0c9..6dc2ec5f 100644
--- a/configs/seeds/host/custom/DynamicEntityComponent.json
+++ b/configs/seeds/host/custom/DynamicEntityComponent.json
@@ -1,10 +1,10 @@
 {
-  "GeneratedAt": "2026-08-19T13:14:10.1944181Z",
+  "GeneratedAt": "2026-08-20T11:16:38.2313189Z",
   "CustomComponents": [
     {
       "Name": "DynamicEntityComponent",
       "RoutePath": "/admin/dynamic-entity",
-      "Code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n  title: string;\n}\n\nconst api = axios.create({\n  baseURL: \"https://api.sozsoft.com\",\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n  const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        const res = await api.get(`/api/app/crudendpoint/${title}`);\n        const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n        const filtered = raw.map((item: any) => ({\n          id: item.Id ?? item.id,\n          name: item.Name ?? item.name,\n        }));\n\n        setData(filtered);\n      } catch (err: any) {\n        setError(err.message || \"Failed to fetch data\");\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    if (title) fetchData();\n  }, [title]);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div className=\"text-red-600 dark:text-red-400\">Error: {error}</div>;\n  if (!data.length) return <div>No records found</div>;\n\n  const headers = [\"id\", \"name\", \"actions\"];\n\n  return (\n    <div className=\"overflow-auto\">\n      <table className=\"min-w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-sm rounded-lg\">\n        <thead className=\"bg-slate-100 dark:bg-slate-800\">\n          <tr>\n            {headers.map((key) => (\n              <th\n                key={key}\n                className=\"text-left px-4 py-2 border-b border-slate-200 dark:border-slate-700 text-sm font-medium text-slate-700 dark:text-slate-200\"\n              >\n                {key === \"actions\" ? \"Actions\" : key}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((item, rowIndex) => (\n            <tr key={item.id ?? rowIndex} className=\"hover:bg-slate-50 dark:hover:bg-slate-800\">\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n                {item.id}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n                {item.name}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800\">\n                <Button\n                  type=\"button\"\n                  color=\"blue-500\"\n                  onClick={() => alert(item.name)}\n                  shape=\"round\"\n                  size=\"xs\"\n                  variant=\"solid\"\n                  id=\"c_mrix4c1a_qrybhk\"\n                >\n                  Show Name\n                </Button>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n\nexport default DynamicEntityComponent;",
+      "Code": "import React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\ninterface DynamicEntityComponentProps {\n  title: string;\n}\n\nconst api = axios.create({\n  baseURL: \"https://localhost:44344/\",\n});\n\nconst DynamicEntityComponent: React.FC<DynamicEntityComponentProps> = ({ title }) => {\n  const [data, setData] = useState<Array<{ id: string; name: string }>>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        const res = await api.get(`/api/app/crudendpoint/${title}`);\n        const raw = Array.isArray(res.data) ? res.data : res.data?.items ?? [];\n\n        const filtered = raw.map((item: any) => ({\n          id: item.Id ?? item.id,\n          name: item.Name ?? item.name,\n        }));\n\n        setData(filtered);\n      } catch (err: any) {\n        setError(err.message || \"Failed to fetch data\");\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    if (title) fetchData();\n  }, [title]);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div className=\"text-red-600 dark:text-red-400\">Error: {error}</div>;\n  if (!data.length) return <div>No records found</div>;\n\n  const headers = [\"id\", \"name\", \"actions\"];\n\n  return (\n    <div className=\"overflow-auto\">\n      <table className=\"min-w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-sm rounded-lg\">\n        <thead className=\"bg-slate-100 dark:bg-slate-800\">\n          <tr>\n            {headers.map((key) => (\n              <th\n                key={key}\n                className=\"text-left px-4 py-2 border-b border-slate-200 dark:border-slate-700 text-sm font-medium text-slate-700 dark:text-slate-200\"\n              >\n                {key === \"actions\" ? \"Actions\" : key}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((item, rowIndex) => (\n            <tr key={item.id ?? rowIndex} className=\"hover:bg-slate-50 dark:hover:bg-slate-800\">\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n                {item.id}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-sm text-slate-800 dark:text-slate-100\">\n                {item.name}\n              </td>\n              <td className=\"px-4 py-2 border-b border-slate-100 dark:border-slate-800\">\n                <Button\n                  type=\"button\"\n                  color=\"blue-500\"\n                  onClick={() => alert(item.name)}\n                  shape=\"round\"\n                  size=\"xs\"\n                  variant=\"solid\"\n                  id=\"c_mrix4c1a_qrybhk\"\n                >\n                  Show Name\n                </Button>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n\nexport default DynamicEntityComponent;",
       "Props": null,
       "Description": null,
       "IsActive": true,
diff --git a/configs/seeds/host/custom/NewComponent.json b/configs/seeds/host/custom/NewComponent.json
index c48c9718..0c4bbf1b 100644
--- a/configs/seeds/host/custom/NewComponent.json
+++ b/configs/seeds/host/custom/NewComponent.json
@@ -1,5 +1,5 @@
 {
-  "GeneratedAt": "2026-08-20T07:44:44.3775836Z",
+  "GeneratedAt": "2026-08-20T11:23:45.7859641Z",
   "CustomComponents": [
     {
       "Name": "NewComponent",
diff --git a/ui/src/components/codeLayout/StyleModal.tsx b/ui/src/components/codeLayout/StyleModal.tsx
index e694d851..cb1c8276 100644
--- a/ui/src/components/codeLayout/StyleModal.tsx
+++ b/ui/src/components/codeLayout/StyleModal.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react'
 import { FaPlus, FaSearch, FaTimes } from 'react-icons/fa'
 import { Button } from '@/components/ui'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 interface StyleModalProps {
   isOpen: boolean
@@ -400,7 +401,8 @@ const StyleModal = ({
           <div className="grid gap-3 border-b border-slate-200 p-4 md:grid-cols-[1fr_190px] dark:border-slate-700">
             <label className="relative">
               <FaSearch className="absolute left-3 top-3 text-slate-400" />
-              <input
+              <Input
+                unstyle
                 className="w-full rounded-md border border-slate-300 bg-white py-2 pl-9 pr-3 text-sm dark:border-slate-700 dark:bg-slate-950 dark:text-white"
                 placeholder={translate('::App.StyleModal.SearchClasses')}
                 value={search}
@@ -423,7 +425,8 @@ const StyleModal = ({
         )}
         {mode === 'class' && (
           <div className="flex gap-2 border-b border-slate-200 p-4 dark:border-slate-700">
-            <input
+            <Input
+              unstyle
               className="min-w-0 flex-1 rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs dark:border-slate-700 dark:bg-slate-950 dark:text-white"
               placeholder={translate('::App.StyleModal.CustomClassPlaceholder')}
               value={customClass}
diff --git a/ui/src/components/importManager/FileUploadArea.tsx b/ui/src/components/importManager/FileUploadArea.tsx
index 77859df4..b8d5426d 100644
--- a/ui/src/components/importManager/FileUploadArea.tsx
+++ b/ui/src/components/importManager/FileUploadArea.tsx
@@ -2,6 +2,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import React, { useCallback, useState } from 'react'
 import { FaUpload, FaFile, FaTimes, FaRegCircle } from 'react-icons/fa'
 import { Button } from '@/components/ui'
+import Input from '@/components/ui/Input'
 
 interface FileUploadAreaProps {
   onFileUpload: (file: File) => void
@@ -109,7 +110,8 @@ export const FileUploadArea: React.FC<FileUploadAreaProps> = ({
           onDragOver={handleDrag}
           onDrop={handleDrop}
         >
-          <input
+          <Input
+            unstyle
             type="file"
             id="fileInput"
             className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
diff --git a/ui/src/components/importManager/ImportPreview.tsx b/ui/src/components/importManager/ImportPreview.tsx
index 13a18614..9d69bef1 100644
--- a/ui/src/components/importManager/ImportPreview.tsx
+++ b/ui/src/components/importManager/ImportPreview.tsx
@@ -5,6 +5,7 @@ import { GridDto } from '@/proxy/form/models'
 import { ImportService } from '@/services/import.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Button } from '@/components/ui'
+import Input from '@/components/ui/Input'
 
 interface ImportPreviewProps {
   session: ListFormImportDto
@@ -195,7 +196,8 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
               <thead className="bg-gray-50 dark:bg-gray-800 sticky top-0 z-10">
                 <tr>
                   <th className="px-4 py-2 text-left font-medium text-gray-700 dark:text-gray-200 whitespace-nowrap w-12">
-                    <input
+                    <Input
+                      unstyle
                       type="checkbox"
                       checked={selectAll}
                       onChange={handleSelectAll}
@@ -221,7 +223,8 @@ export const ImportPreview: React.FC<ImportPreviewProps> = ({
                     }`}
                   >
                     <td className="px-4 py-2">
-                      <input
+                      <Input
+                        unstyle
                         type="checkbox"
                         checked={selectedRows.includes(rowIndex)}
                         onChange={() => handleRowSelect(rowIndex)}
diff --git a/ui/src/components/orders/PaymentForm.tsx b/ui/src/components/orders/PaymentForm.tsx
index 01434fb2..2c1667b5 100644
--- a/ui/src/components/orders/PaymentForm.tsx
+++ b/ui/src/components/orders/PaymentForm.tsx
@@ -10,6 +10,7 @@ import { OrderService } from '@/services/order.service'
 import { CustomTenantDto } from '@/proxy/config/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Button } from '@/components/ui'
+import Input from '@/components/ui/Input'
 
 interface BasketData {
   items: BasketItem[]
@@ -165,7 +166,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     License Start Time
                   </label>
-                  <input
+                  <Input
+                    unstyle
                     type="date"
                     required
                     value={licenseStartTime}
@@ -211,7 +213,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
                         : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
                     }`}
                   >
-                    <input
+                    <Input
+                      unstyle
                       type="radio"
                       name="paymentMethodId"
                       value={method.name}
@@ -268,7 +271,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
                           : 'border-gray-200 bg-white hover:border-blue-200 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/40 dark:hover:border-blue-500 dark:hover:bg-gray-800/70'
                       }`}
                     >
-                      <input
+                      <Input
+                        unstyle
                         type="radio"
                         name="installment"
                         value={option.installment}
@@ -309,7 +313,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
                 <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-3">
                   {translate('::App.PaymentCard.CardTitle')}
                 </h3>
-                <input
+                <Input
+                  unstyle
                   type="text"
                   required
                   value={paymentData.cardName}
@@ -317,7 +322,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
                   placeholder={translate('::App.PaymentCard.CardName')}
                 />
-                <input
+                <Input
+                  unstyle
                   type="text"
                   required
                   value={paymentData.cardNumber}
@@ -327,7 +333,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
                   maxLength={19}
                 />
                 <div className="grid grid-cols-2 gap-3">
-                  <input
+                  <Input
+                    unstyle
                     type="text"
                     required
                     value={paymentData.expiryDate}
@@ -336,7 +343,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ onBack, onComplete, ba
                     placeholder="MM/YY"
                     maxLength={5}
                   />
-                  <input
+                  <Input
+                    unstyle
                     type="text"
                     required
                     value={paymentData.cvv}
diff --git a/ui/src/components/orders/ProductCatalog.tsx b/ui/src/components/orders/ProductCatalog.tsx
index 5e395078..b727db04 100644
--- a/ui/src/components/orders/ProductCatalog.tsx
+++ b/ui/src/components/orders/ProductCatalog.tsx
@@ -7,6 +7,7 @@ import { OrderService } from '@/services/order.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Loading } from '../shared'
 import { Button } from '@/components/ui'
+import Input from '@/components/ui/Input'
 
 interface ProductCatalogProps {
   searchQuery: string
@@ -135,7 +136,8 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
             </div>
             <div className="relative">
               <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-              <input
+              <Input
+                unstyle
                 type="text"
                 placeholder={translate('::App.ProductsSearch.SearchPlaceholder')}
                 value={searchQuery}
diff --git a/ui/src/components/orders/TenantForm.tsx b/ui/src/components/orders/TenantForm.tsx
index c5dad6dd..e7dc33ce 100644
--- a/ui/src/components/orders/TenantForm.tsx
+++ b/ui/src/components/orders/TenantForm.tsx
@@ -32,6 +32,7 @@ import {
 } from '@/services/location.service'
 import { useStoreActions, useStoreState } from '@/store/store'
 import type { TenantFormDraft } from '@/store/client.model'
+import Input from '@/components/ui/Input'
 
 interface LocationOption<T> {
   label: string
@@ -616,7 +617,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                 <div className="relative flex flex-col sm:flex-row sm:items-stretch gap-3">
                   <div className="relative w-full">
                     <FaBuilding className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                    <input
+                    <Input
+                      unstyle
                       type="text"
                       required
                       autoFocus
@@ -773,7 +775,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                   </label>
                   <div className="relative">
                     <FaBuilding className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                    <input
+                    <Input
+                      unstyle
                       type="text"
                       required
                       autoFocus
@@ -791,7 +794,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaUser className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="text"
                         required
                         placeholder="Enter founder's name"
@@ -901,7 +905,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaMapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="text"
                         required
                         placeholder="34782"
@@ -937,7 +942,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaPhone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="tel"
                         required
                         inputMode="numeric"
@@ -982,7 +988,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaEnvelope className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="email"
                         required
                         placeholder="sample@email.com"
@@ -1028,7 +1035,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaSitemap className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="text"
                         required
                         placeholder={translate('::App.Listform.ListformField.Website')}
@@ -1071,7 +1079,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaUserPlus className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="text"
                         placeholder={translate('::App.StaticLookup.Reference')}
                         value={formData.reference || ''}
@@ -1089,7 +1098,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaBuilding className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="text"
                         required
                         placeholder="Sarıgazi"
@@ -1105,7 +1115,8 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
                     </label>
                     <div className="relative">
                       <FaDollarSign className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-                      <input
+                      <Input
+                        unstyle
                         type="text"
                         required
                         placeholder="1234567890"
diff --git a/ui/src/components/scriptBuilder/ScriptBuilderDialog.tsx b/ui/src/components/scriptBuilder/ScriptBuilderDialog.tsx
index cc9bee75..fa5630b8 100644
--- a/ui/src/components/scriptBuilder/ScriptBuilderDialog.tsx
+++ b/ui/src/components/scriptBuilder/ScriptBuilderDialog.tsx
@@ -20,6 +20,7 @@ import {
   FaTrash,
 } from 'react-icons/fa'
 import { apiEntryName, attachScriptIntelliSense, insertAtCursor } from './scriptIntelliSense'
+import Input from '@/components/ui/Input'
 import {
   scriptRuleConditions,
   type ScriptDialect,
@@ -265,7 +266,8 @@ function ScriptBuilderDialog({
     const options = optionSource ? dialect.getOptions(optionSource) : []
     if (!options.length) {
       return (
-        <input
+        <Input
+          unstyle
           className={controlClass}
           placeholder={placeholder}
           value={selectedValue}
@@ -368,7 +370,8 @@ function ScriptBuilderDialog({
           </select>
         )}
         {(param.type === 'text' || param.type === 'number') && (
-          <input
+          <Input
+            unstyle
             className={controlClass}
             type={param.type === 'number' ? 'number' : 'text'}
             value={currentValue}
@@ -477,7 +480,8 @@ function ScriptBuilderDialog({
             <span className="mb-1 block text-xs text-gray-500">
               {translate('::App.Listform.ListformField.Value')}
             </span>
-            <input
+            <Input
+              unstyle
               className={controlClass}
               value={condition.value}
               placeholder="Aktif / 1000"
@@ -646,7 +650,8 @@ function ScriptBuilderDialog({
     <section className={`flex min-h-0 w-80 shrink-0 flex-col ${cardClass} p-3`}>
       <div className="mb-2 flex items-center gap-2">
         <FaSearch className="text-gray-400" size={11} />
-        <input
+        <Input
+          unstyle
           className="w-full min-w-0 bg-transparent text-xs text-gray-700 outline-none dark:text-gray-100"
           placeholder={translate('::App.ScriptBuilder.SearchHelp')}
           value={helpSearch}
diff --git a/ui/src/components/template/MessengerWidget.tsx b/ui/src/components/template/MessengerWidget.tsx
index 6aae68b8..b72f65db 100644
--- a/ui/src/components/template/MessengerWidget.tsx
+++ b/ui/src/components/template/MessengerWidget.tsx
@@ -711,7 +711,8 @@ const MessengerWidgetContent = ({ className }: { className?: string }) => {
                       </div>
                     )}
                     <div className="flex min-h-[52px] items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 focus-within:border-emerald-500 focus-within:ring-1 focus-within:ring-emerald-500 dark:border-gray-600 dark:bg-gray-800">
-                      <input
+                      <Input
+                        unstyle
                         ref={fileInputRef}
                         type="file"
                         multiple
diff --git a/ui/src/components/template/Search.tsx b/ui/src/components/template/Search.tsx
index 97e752a0..84fb9059 100644
--- a/ui/src/components/template/Search.tsx
+++ b/ui/src/components/template/Search.tsx
@@ -13,6 +13,7 @@ import { Badge, Checkbox, Pagination, Tooltip } from '../ui'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { getSearch, getSystems } from '@/services/global-search.service'
 import { FcSearch } from 'react-icons/fc'
+import Input from '@/components/ui/Input'
 
 type SearchData = {
   title: string
@@ -189,7 +190,8 @@ const _Search = ({ className }: { className?: string }) => {
           <div className="px-4 flex items-center border-b border-gray-200 dark:border-gray-600">
             <div className="flex items-center flex-1">
               <FaSearch className="text-xl" />
-              <input
+              <Input
+                unstyle
                 ref={inputRef}
                 className="ring-0 outline-none block w-full p-4 text-base bg-transparent text-gray-900 dark:text-gray-100"
                 placeholder={translate('::App.Platform.Search2')}
diff --git a/ui/src/components/ui/Input/Input.tsx b/ui/src/components/ui/Input/Input.tsx
index a3811c0d..c0e7f3fc 100644
--- a/ui/src/components/ui/Input/Input.tsx
+++ b/ui/src/components/ui/Input/Input.tsx
@@ -27,7 +27,7 @@ export interface InputProps
   form?: any
 }
 
-const Input = forwardRef<ElementType | HTMLInputElement, InputProps>((props, ref) => {
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const {
     asElement: Component = 'input',
     className,
@@ -156,7 +156,7 @@ const Input = forwardRef<ElementType | HTMLInputElement, InputProps>((props, ref
   }
 
   const inputProps = {
-    className: !unstyle ? inputClass : '',
+    className: !unstyle ? inputClass : className,
     disabled,
     type,
     ref,
diff --git a/ui/src/components/visualDesigner/VisualCanvas.tsx b/ui/src/components/visualDesigner/VisualCanvas.tsx
index 66b5c8da..b318313e 100644
--- a/ui/src/components/visualDesigner/VisualCanvas.tsx
+++ b/ui/src/components/visualDesigner/VisualCanvas.tsx
@@ -10,6 +10,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import { formatLocaleValue } from '@/utils/localeFormat'
 import { FaArrowDown, FaArrowUp, FaClone, FaGripVertical, FaTrash } from 'react-icons/fa'
 import { beginDesignerDragSoon, endDesignerDrag, useDesignerDrag } from './designerDrag'
+import Input from '@/components/ui/Input'
 import {
   buildDesignerFilterParams,
   buildSqlDefaultRecord,
@@ -1352,7 +1353,13 @@ const renderElement = (
     )
   }
   if (node.type === 'checkbox') {
-    return <input {...(props as React.InputHTMLAttributes<HTMLInputElement>)} type="checkbox" />
+    return (
+      <Input
+        unstyle
+        {...(props as Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>)}
+        type="checkbox"
+      />
+    )
   }
   if (node.kind === 'html') {
     // An empty element paints nothing, so on the canvas it would look like the
diff --git a/ui/src/views/admin/files/components/FileItem.tsx b/ui/src/views/admin/files/components/FileItem.tsx
index cdf1a11d..c7450577 100644
--- a/ui/src/views/admin/files/components/FileItem.tsx
+++ b/ui/src/views/admin/files/components/FileItem.tsx
@@ -27,6 +27,7 @@ import { toast, Notification } from '@/components/ui'
 import type { FileItem as FileItemType, FileActionMenuItem } from '@/types/fileManagement'
 import { FILE_URL } from '@/constants/app.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 export interface FileItemProps {
   item: FileItemType
@@ -391,7 +392,8 @@ const FileItem = forwardRef<HTMLDivElement, FileItemProps>((props, ref) => {
           <div className="col-span-5 flex items-center min-w-0 gap-2">
             {/* Checkbox */}
             {!item.isReadOnly ? (
-              <input
+              <Input
+                unstyle
                 type="checkbox"
                 checked={selected}
                 className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
@@ -490,7 +492,8 @@ const FileItem = forwardRef<HTMLDivElement, FileItemProps>((props, ref) => {
         {/* Checkbox */}
         {!item.isReadOnly && (
           <div className="absolute top-3 left-3 z-10">
-            <input
+            <Input
+              unstyle
               type="checkbox"
               checked={selected}
               className="w-4 h-4 text-blue-600 bg-white border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 shadow-sm"
diff --git a/ui/src/views/admin/files/components/FileUploadModal.tsx b/ui/src/views/admin/files/components/FileUploadModal.tsx
index 0d48e5ab..75a20056 100644
--- a/ui/src/views/admin/files/components/FileUploadModal.tsx
+++ b/ui/src/views/admin/files/components/FileUploadModal.tsx
@@ -9,6 +9,7 @@ import {
 import { Dialog, Button, Progress } from '@/components/ui'
 import { FaCloudUploadAlt, FaTimes } from 'react-icons/fa'
 import classNames from 'classnames'
+import Input from '@/components/ui/Input'
 
 export interface FileUploadModalProps {
   isOpen: boolean
@@ -252,7 +253,8 @@ const FileUploadModal = forwardRef<HTMLDivElement, FileUploadModalProps>((props,
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
           >
-            <input
+            <Input
+              unstyle
               ref={fileInputRef}
               multiple
               type="file"
diff --git a/ui/src/views/admin/hr/OrgChart.tsx b/ui/src/views/admin/hr/OrgChart.tsx
index a5e6b490..a8171cea 100644
--- a/ui/src/views/admin/hr/OrgChart.tsx
+++ b/ui/src/views/admin/hr/OrgChart.tsx
@@ -36,6 +36,7 @@ import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 import { Avatar, Button } from '@/components/ui'
 import { useStoreState } from '@/store'
 import UserProfileCard from '@/views/intranet/SocialWall/UserProfileCard'
+import Input from '@/components/ui/Input'
 
 type ViewMode = 'department' | 'jobPosition'
 
@@ -921,7 +922,8 @@ const OrgChart = () => {
 
             <div className="flex items-center bg-slate-100 dark:bg-gray-800 rounded-lg p-1 gap-1">
               <label className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs sm:text-sm text-slate-600 dark:text-gray-300 select-none cursor-pointer">
-                <input
+                <Input
+                  unstyle
                   type="checkbox"
                   checked={showUsers}
                   className="h-4 w-4 rounded border-slate-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
index a8d1ecf3..d98ec080 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
@@ -96,7 +96,8 @@ function TablePickerModal({
         {step === 'table' && (
           <>
             <div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800">
-              <input
+              <Input
+                unstyle
                 autoFocus
                 value={tableSearch}
                 placeholder={translate('::App.Platform.Search')}
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
index 341a6431..17bf64e2 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
@@ -43,6 +43,7 @@ import {
   type LeafValueType,
 } from './editor-options/jsonUtils'
 import { editorOptionsPresets } from './editor-options/presets'
+import Input from '@/components/ui/Input'
 import {
   isSpecRelevant,
   optionGroups,
@@ -394,7 +395,8 @@ function EditorOptionsBuilderDialog({
           <>
             {/* ── Araç çubuğu ──────────────────────────────────────── */}
             <div className="flex flex-wrap items-center gap-2">
-              <input
+              <Input
+                unstyle
                 className={`${controlClass} !w-64`}
                 value={search}
                 placeholder={translate('::App.ListFormEditorOptions.SearchSetting')}
@@ -404,7 +406,8 @@ function EditorOptionsBuilderDialog({
                 className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-300"
                 title={translate('::App.ListFormEditorOptions.ShowAllHint')}
               >
-                <input
+                <Input
+                  unstyle
                   type="checkbox"
                   checked={showAll}
                   onChange={(event) => setShowAll(event.target.checked)}
@@ -415,7 +418,8 @@ function EditorOptionsBuilderDialog({
                 className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-300"
                 title={translate('::App.ListFormEditorOptions.OnlySetHint')}
               >
-                <input
+                <Input
+                  unstyle
                   type="checkbox"
                   checked={onlySet}
                   onChange={(event) => setOnlySet(event.target.checked)}
@@ -560,7 +564,8 @@ function EditorOptionsBuilderDialog({
                                   </option>
                                 ))}
                               </select>
-                              <input
+                              <Input
+                                unstyle
                                 className={`${controlClass} col-span-5`}
                                 value={leafToText(current)}
                                 onChange={(event) =>
@@ -584,7 +589,8 @@ function EditorOptionsBuilderDialog({
                         })}
 
                         <div className="grid grid-cols-12 items-center gap-2 border-t border-dashed border-gray-200 pt-2 dark:border-gray-700">
-                          <input
+                          <Input
+                            unstyle
                             className={`${controlClass} col-span-4`}
                             value={newPath}
                             placeholder="path.to.option"
@@ -601,7 +607,8 @@ function EditorOptionsBuilderDialog({
                               </option>
                             ))}
                           </select>
-                          <input
+                          <Input
+                            unstyle
                             className={`${controlClass} col-span-5`}
                             value={newValue}
                             placeholder={
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx
index 08a0d238..a84195ef 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx
@@ -3,6 +3,7 @@ import { FaExclamationTriangle, FaUndo } from 'react-icons/fa'
 import { coerceNumber, coerceSize, leafToText } from './jsonUtils'
 import type { OptionSpec } from './optionSpecs'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 export const controlClass =
   'w-full min-w-0 h-9 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:border-indigo-400 disabled:opacity-60'
@@ -173,7 +174,8 @@ const StringListControl = ({
   const { translate } = useLocalization()
 
   return (
-    <input
+    <Input
+      unstyle
       className={controlClass}
       value={Array.isArray(value) ? value.join(', ') : leafToText(value)}
       placeholder={spec.placeholder ? translate('::' + spec.placeholder) : undefined}
@@ -200,7 +202,7 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
 
   const renderControl = () => {
     if (locked) {
-      return <input disabled readOnly className={controlClass} value={leafToText(value)} />
+      return <Input unstyle disabled readOnly className={controlClass} value={leafToText(value)} />
     }
 
     switch (spec.type) {
@@ -214,7 +216,8 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
         return <StringListControl spec={spec} value={value} onChange={onChange} />
       case 'number':
         return (
-          <input
+          <Input
+            unstyle
             className={controlClass}
             type="number"
             value={typeof value === 'number' ? value : leafToText(value)}
@@ -224,7 +227,8 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
         )
       case 'size':
         return (
-          <input
+          <Input
+            unstyle
             className={controlClass}
             value={leafToText(value)}
             placeholder={placeholder}
@@ -233,7 +237,8 @@ const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
         )
       default:
         return (
-          <input
+          <Input
+            unstyle
             className={controlClass}
             value={leafToText(value)}
             placeholder={placeholder}
diff --git a/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx b/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
index 6164573e..df077ff5 100644
--- a/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardFileManager.tsx
@@ -203,7 +203,8 @@ const WizardFileManager = () => {
                   {translate('::App.ListForm.WizardImportButton')}
                 </span>
               </Button>
-              <input
+              <Input
+                unstyle
                 ref={importInputRef}
                 type="file"
                 accept=".zip,application/zip"
diff --git a/ui/src/views/admin/listForm/wizard/WizardImportDialog.tsx b/ui/src/views/admin/listForm/wizard/WizardImportDialog.tsx
index 7758a599..ada81168 100644
--- a/ui/src/views/admin/listForm/wizard/WizardImportDialog.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardImportDialog.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/services/wizard.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
+import Input from '@/components/ui/Input'
 import {
   WizardImportAnalysisDto,
   WizardImportEntryDto,
@@ -376,7 +377,8 @@ const WizardImportDialog = ({ file, onClose, onImported }: WizardImportDialogPro
                 </span>
                 {renderStatusBadge(entry)}
                 {!isConflict && (
-                  <input
+                  <Input
+                    unstyle
                     type="checkbox"
                     className="shrink-0"
                     checked={!!decision?.apply}
diff --git a/ui/src/views/admin/listForm/wizard/WizardStepDataSettings.tsx b/ui/src/views/admin/listForm/wizard/WizardStepDataSettings.tsx
index 8231078d..5890654b 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStepDataSettings.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStepDataSettings.tsx
@@ -758,7 +758,8 @@ const WizardStepDataSettings = ({
                     key={col.columnName}
                     className="flex items-center gap-2 px-2 py-1.5 rounded mx-0.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 group"
                   >
-                    <input
+                    <Input
+                      unstyle
                       type="checkbox"
                       checked={selectedColumns.has(col.columnName)}
                       onChange={() => onToggleColumn(col.columnName)}
diff --git a/ui/src/views/admin/listForm/wizard/WizardStepFields.tsx b/ui/src/views/admin/listForm/wizard/WizardStepFields.tsx
index 8f8fe469..484be74a 100644
--- a/ui/src/views/admin/listForm/wizard/WizardStepFields.tsx
+++ b/ui/src/views/admin/listForm/wizard/WizardStepFields.tsx
@@ -35,6 +35,7 @@ import { UiLookupDataSourceTypeEnum } from '@/proxy/form/models'
 import EditorOptionsBuilderDialog from '../edit/json-row-operations/EditorOptionsBuilderDialog'
 import EditorScriptBuilderDialog from '../edit/json-row-operations/EditorScriptBuilderDialog'
 import { buildLookupQuery } from '../lookupQuery'
+import Input from '@/components/ui/Input'
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 export interface WizardGroupItem {
@@ -283,7 +284,8 @@ function SortableItem({
           <span className="text-[10px] text-gray-400 font-medium">
             {translate('::App.WizardStep3.LanguageKey')}
           </span>
-          <input
+          <Input
+            unstyle
             value={item.captionName}
             disabled
             onChange={(e) => onCaptionNameChange(e.target.value)}
@@ -294,7 +296,8 @@ function SortableItem({
           <span className="text-[10px] text-gray-400 font-medium">
             {translate('::App.WizardStep3.TurkishCaption')}
           </span>
-          <input
+          <Input
+            unstyle
             value={item.turkishCaption}
             onChange={(e) => onTurkishCaptionChange(e.target.value)}
             className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@@ -304,7 +307,8 @@ function SortableItem({
           <span className="text-[10px] text-gray-400 font-medium">
             {translate('::App.WizardStep3.EnglishCaption')}
           </span>
-          <input
+          <Input
+            unstyle
             value={item.englishCaption}
             onChange={(e) => onEnglishCaptionChange(e.target.value)}
             className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@@ -354,7 +358,8 @@ function SortableItem({
           <span className="text-[10px] text-gray-400 font-medium">
             {translate('::App.WizardStep3.LookupValueExpression')}
           </span>
-          <input
+          <Input
+            unstyle
             value={item.valueExpr}
             onChange={(e) => onValueExprChange(e.target.value)}
             className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@@ -365,7 +370,8 @@ function SortableItem({
           <span className="text-[10px] text-gray-400 font-medium">
             {translate('::App.WizardStep3.LookupDisplayExpression')}
           </span>
-          <input
+          <Input
+            unstyle
             value={item.displayExpr}
             onChange={(e) => onDisplayExprChange(e.target.value)}
             className="w-full text-xs px-1.5 py-1 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-indigo-400 resize-none font-mono"
@@ -441,7 +447,8 @@ function SortableItem({
             {pickerStep === 'table' && (
               <>
                 <div className="px-4 py-2 border-b border-gray-100 dark:border-gray-800">
-                  <input
+                  <Input
+                    unstyle
                     autoFocus
                     value={tableSearch}
                     onChange={(e) => setTableSearch(e.target.value)}
@@ -580,7 +587,8 @@ function SortableItem({
           {translate('::App.ListFormFieldEdit.DetailsEditorOptions')}
         </span>
         <div className="flex items-center gap-1">
-          <input
+          <Input
+            unstyle
             value={item.editorOptions}
             onChange={(e) => onEditorOptionsChange(e.target.value)}
             placeholder='{"readOnly": false}'
@@ -604,7 +612,8 @@ function SortableItem({
           {translate('::App.WizardStep3.EditorScript')}
         </span>
         <div className="flex items-center gap-1">
-          <input
+          <Input
+            unstyle
             value={item.editorScript}
             onChange={(e) => onEditorScriptChange(e.target.value)}
             placeholder="(e) => { /* e.component */ }"
@@ -658,7 +667,8 @@ function SortableItem({
           className="flex items-center gap-1 cursor-pointer ml-auto"
           title={translate('::App.WizardStep3.IncludeInEditingForm')}
         >
-          <input
+          <Input
+            unstyle
             type="checkbox"
             checked={item.includeInEditingForm}
             onChange={(e) => onIncludeInEditingFormChange(e.target.checked)}
@@ -669,7 +679,8 @@ function SortableItem({
           </span>
         </label>
         <label className="flex items-center gap-1 cursor-pointer ml-auto" title="Required">
-          <input
+          <Input
+            unstyle
             type="checkbox"
             checked={item.isRequired}
             onChange={(e) => onRequiredChange(e.target.checked)}
@@ -728,7 +739,8 @@ function GroupCard({
     >
       {/* Group Header */}
       <div className="flex flex-wrap items-center gap-2 px-3 pt-3 pb-2">
-        <input
+        <Input
+          unstyle
           type="text"
           value={group.caption}
           onChange={(e) => onCaptionChange(e.target.value)}
diff --git a/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx b/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx
index 8e1803bd..494cc1c1 100644
--- a/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx
+++ b/ui/src/views/admin/listForm/workflow/WorkflowCriteria.tsx
@@ -523,7 +523,8 @@ function SelectField({
         onChange={(option: any) => onChange(option?.value ?? '')}
       />
       {required && (
-        <input
+        <Input
+          unstyle
           required
           tabIndex={-1}
           className="pointer-events-none h-0 w-0 opacity-0"
@@ -565,7 +566,8 @@ function MultiSelectField({
         }
       />
       {required && (
-        <input
+        <Input
+          unstyle
           required
           tabIndex={-1}
           className="pointer-events-none h-0 w-0 opacity-0"
diff --git a/ui/src/views/admin/videoroom/ChatPanel.tsx b/ui/src/views/admin/videoroom/ChatPanel.tsx
index a085c765..048e8753 100644
--- a/ui/src/views/admin/videoroom/ChatPanel.tsx
+++ b/ui/src/views/admin/videoroom/ChatPanel.tsx
@@ -8,6 +8,7 @@ import { useRef, useEffect, type FormEvent } from 'react'
 import { FaTimes, FaUsers, FaUser, FaBullhorn, FaPaperPlane } from 'react-icons/fa'
 import { Button } from '@/components/ui'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 interface ChatPanelProps {
   user: { id: string; name: string; role: string }
@@ -193,7 +194,8 @@ const ChatPanel = ({
       {/* Mesaj Gönderme */}
       <form onSubmit={onSendMessage} className="p-4 border-t border-gray-200">
         <div className="flex space-x-2">
-          <input
+          <Input
+            unstyle
             type="text"
             value={newMessage}
             onChange={(e) => setNewMessage(e.target.value)}
diff --git a/ui/src/views/admin/videoroom/DocumentsPanel.tsx b/ui/src/views/admin/videoroom/DocumentsPanel.tsx
index c908be35..7c7e2e49 100644
--- a/ui/src/views/admin/videoroom/DocumentsPanel.tsx
+++ b/ui/src/views/admin/videoroom/DocumentsPanel.tsx
@@ -3,6 +3,7 @@ import { useRef, useState, type ChangeEvent, type DragEvent, type ReactNode } fr
 import { FaTimes, FaFile, FaEye, FaDownload, FaTrash } from 'react-icons/fa'
 import { Button } from '@/components/ui'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 interface DocumentsPanelProps {
   user: { role: string; name: string }
@@ -95,7 +96,8 @@ const DocumentsPanel = ({
             >
               {translate('::App.VideoRoom.SelectFile')}
             </Button>
-            <input
+            <Input
+              unstyle
               ref={fileInputRef}
               type="file"
               multiple
diff --git a/ui/src/views/admin/videoroom/RoomList.tsx b/ui/src/views/admin/videoroom/RoomList.tsx
index 7eed32e4..0ed4f833 100644
--- a/ui/src/views/admin/videoroom/RoomList.tsx
+++ b/ui/src/views/admin/videoroom/RoomList.tsx
@@ -524,7 +524,8 @@ const RoomList = () => {
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     {translate('::App.Listform.ListformField.RoomName')} *
                   </label>
-                  <input
+                  <Input
+                    unstyle
                     type="text"
                     required
                     autoFocus={showCreateModal}
@@ -553,7 +554,8 @@ const RoomList = () => {
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                       {translate('::App.Listform.ListformField.Subject')}
                     </label>
-                    <input
+                    <Input
+                      unstyle
                       type="text"
                       value={videoroom.subject}
                       onChange={(e) => setVideoroom({ ...videoroom, subject: e.target.value })}
@@ -566,7 +568,8 @@ const RoomList = () => {
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                       {translate('::App.Listform.ListformField.StartDateTime')} *
                     </label>
-                    <input
+                    <Input
+                      unstyle
                       type="datetime-local"
                       required
                       value={
@@ -591,7 +594,8 @@ const RoomList = () => {
                       {translate('::App.Listform.ListformField.Duration')} (
                       {translate('::App.Listform.ListformField.Minutes')})
                     </label>
-                    <input
+                    <Input
+                      unstyle
                       type="number"
                       min="15"
                       max="480"
@@ -610,7 +614,8 @@ const RoomList = () => {
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                       {translate('::App.Listform.ListformField.MaxParticipants')}
                     </label>
-                    <input
+                    <Input
+                      unstyle
                       type="number"
                       min="1"
                       max="100"
@@ -638,7 +643,8 @@ const RoomList = () => {
                         {translate('::App.VideoRoom.ParticipantPermissions')}
                       </h4>{' '}
                       <label className="flex items-center space-x-3">
-                        <input
+                        <Input
+                          unstyle
                           type="checkbox"
                           checked={videoroom.settingsDto?.allowHandRaise}
                           onChange={(e) =>
@@ -657,7 +663,8 @@ const RoomList = () => {
                         </span>
                       </label>
                       <label className="flex items-center space-x-3">
-                        <input
+                        <Input
+                          unstyle
                           type="checkbox"
                           checked={videoroom.settingsDto?.allowStudentChat}
                           onChange={(e) =>
@@ -676,7 +683,8 @@ const RoomList = () => {
                         </span>
                       </label>
                       <label className="flex items-center space-x-3">
-                        <input
+                        <Input
+                          unstyle
                           type="checkbox"
                           checked={videoroom.settingsDto?.allowPrivateMessages}
                           onChange={(e) =>
@@ -695,7 +703,8 @@ const RoomList = () => {
                         </span>
                       </label>
                       <label className="flex items-center space-x-3">
-                        <input
+                        <Input
+                          unstyle
                           type="checkbox"
                           checked={videoroom.settingsDto?.allowStudentScreenShare}
                           onChange={(e) =>
@@ -801,7 +810,8 @@ const RoomList = () => {
                       </div>
 
                       <label className="flex items-center space-x-3">
-                        <input
+                        <Input
+                          unstyle
                           type="checkbox"
                           checked={videoroom.settingsDto?.autoMuteNewParticipants}
                           onChange={(e) =>
diff --git a/ui/src/views/ai/Assistant.tsx b/ui/src/views/ai/Assistant.tsx
index 57380fc4..c1cbdb11 100644
--- a/ui/src/views/ai/Assistant.tsx
+++ b/ui/src/views/ai/Assistant.tsx
@@ -11,6 +11,7 @@ import ConversationList from './components/ConversationList'
 import MessageBubble from './components/MessageBubble'
 import { useAiBots } from './hooks/useAiBots'
 import { useConversations } from './hooks/useConversations'
+import Input from '@/components/ui/Input'
 
 const Assistant = () => {
   const { translate } = useLocalization()
@@ -228,7 +229,8 @@ const Assistant = () => {
 
           <form className="w-full mx-auto px-4" onSubmit={handleSubmit}>
             <div className="flex w-full items-center gap-2 rounded-2xl bg-[#2a2a2a] px-3 py-2 text-white shadow-md">
-              <input
+              <Input
+                unstyle
                 ref={inputRef}
                 autoFocus
                 value={input}
diff --git a/ui/src/views/developerKit/ComponentManager.tsx b/ui/src/views/developerKit/ComponentManager.tsx
index d8df20df..50c6883d 100644
--- a/ui/src/views/developerKit/ComponentManager.tsx
+++ b/ui/src/views/developerKit/ComponentManager.tsx
@@ -24,6 +24,7 @@ import ComponentEditor from './ComponentEditor'
 import { parseComponentDependencies } from '@/contexts/componentRuntime'
 import { usePermission } from '@/utils/hooks/usePermission'
 import { COMPONENT_PERMISSION } from '@/constants/permission.constant'
+import Input from '@/components/ui/Input'
 
 const ComponentManager: React.FC = () => {
   const {
@@ -131,7 +132,8 @@ const ComponentManager: React.FC = () => {
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="flex-1 relative">
           <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
-          <input
+          <Input
+            unstyle
             type="text"
             placeholder={translate('::App.DeveloperKitComponent.SearchPlaceholder')}
             value={searchTerm}
diff --git a/ui/src/views/developerKit/CrudEndpointDialog.tsx b/ui/src/views/developerKit/CrudEndpointDialog.tsx
index 06847f35..3ba2c55e 100644
--- a/ui/src/views/developerKit/CrudEndpointDialog.tsx
+++ b/ui/src/views/developerKit/CrudEndpointDialog.tsx
@@ -25,6 +25,7 @@ import type { CrudEndpoint } from '@/proxy/developerKit/models'
 import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { usePermission } from '@/utils/hooks/usePermission'
+import Input from '@/components/ui/Input'
 
 // ─── Paylasilan yardimcilar ───────────────────────────────────────────────────
 // Endpoint'leri ureten/gosteren tum ekranlar (SqlQueryManager, SqlObjectExplorer,
@@ -683,7 +684,8 @@ const CrudEndpointDialog = ({
                                   >
                                     {param.name}
                                   </span>
-                                  <input
+                                  <Input
+                                    unstyle
                                     type="text"
                                     value={param.value}
                                     aria-label={param.name}
diff --git a/ui/src/views/developerKit/DynamicServiceEditor.tsx b/ui/src/views/developerKit/DynamicServiceEditor.tsx
index 250c0a09..abcf979a 100644
--- a/ui/src/views/developerKit/DynamicServiceEditor.tsx
+++ b/ui/src/views/developerKit/DynamicServiceEditor.tsx
@@ -24,6 +24,7 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
 import Button from '@/components/ui/Button'
 import { Notification, toast } from '@/components/ui'
 import { useConfig } from '@/components/ui/ConfigProvider'
+import Input from '@/components/ui/Input'
 
 const DEFAULT_TEMPLATE = `using System;
 using System.Collections.Generic;
@@ -435,7 +436,8 @@ const DynamicServiceEditor: React.FC = () => {
             <label className={LABEL_CLASS} htmlFor="dse-service-name">
               {translate('::App.DynamicServicesEditor.ServiceName')}
             </label>
-            <input
+            <Input
+              unstyle
               id="dse-service-name"
               type="text"
               value={serviceName}
@@ -461,7 +463,8 @@ const DynamicServiceEditor: React.FC = () => {
             <label className={LABEL_CLASS} htmlFor="dse-display-name">
               {translate('::App.Platform.DisplayName')}
             </label>
-            <input
+            <Input
+              unstyle
               id="dse-display-name"
               type="text"
               value={displayName}
@@ -478,7 +481,8 @@ const DynamicServiceEditor: React.FC = () => {
             <label className={LABEL_CLASS} htmlFor="dse-description">
               {translate('::App.Listform.ListformField.Description')}
             </label>
-            <input
+            <Input
+              unstyle
               id="dse-description"
               type="text"
               value={description}
@@ -495,7 +499,8 @@ const DynamicServiceEditor: React.FC = () => {
             <label className={LABEL_CLASS} htmlFor="dse-primary-entity">
               {translate('::App.DynamicServicesEditor.PrimaryEntityType')}
             </label>
-            <input
+            <Input
+              unstyle
               id="dse-primary-entity"
               type="text"
               value={primaryEntityType}
@@ -509,7 +514,8 @@ const DynamicServiceEditor: React.FC = () => {
 
           {/* Aktif */}
           <div className="flex items-center gap-2">
-            <input
+            <Input
+              unstyle
               id="dse-is-active"
               type="checkbox"
               checked={isActive}
diff --git a/ui/src/views/developerKit/DynamicServiceManager.tsx b/ui/src/views/developerKit/DynamicServiceManager.tsx
index bae03b7f..b66f4080 100644
--- a/ui/src/views/developerKit/DynamicServiceManager.tsx
+++ b/ui/src/views/developerKit/DynamicServiceManager.tsx
@@ -17,6 +17,7 @@ import { dynamicServiceService, type DynamicServiceDto } from '@/services/dynami
 import PageTitle from '@/components/shared/PageTitle'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
 
 const DynamicServiceManager: React.FC = () => {
   const { translate } = useLocalization()
@@ -128,7 +129,8 @@ const DynamicServiceManager: React.FC = () => {
       <div className="flex flex-col lg:flex-row lg:items-center gap-3">
         <div className="flex-1 relative">
           <FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-          <input
+          <Input
+            unstyle
             type="text"
             placeholder={translate('::App.DeveloperKitDynamicServices.SearchPlaceholder')}
             value={searchTerm}
diff --git a/ui/src/views/developerKit/SqlObjectExplorer.tsx b/ui/src/views/developerKit/SqlObjectExplorer.tsx
index e06e2d34..e39e4a96 100644
--- a/ui/src/views/developerKit/SqlObjectExplorer.tsx
+++ b/ui/src/views/developerKit/SqlObjectExplorer.tsx
@@ -28,6 +28,7 @@ import {
   type CrudObjectType,
 } from './CrudEndpointDialog'
 import { developerKitService } from '@/services/developerKit.service'
+import Input from '@/components/ui/Input'
 
 type FolderKey = 'tables' | 'views' | 'procedures' | 'functions'
 
@@ -508,7 +509,8 @@ const SqlObjectExplorer = ({
           }}
         >
           {node.type === 'object' && (
-            <input
+            <Input
+              unstyle
               type="checkbox"
               className="h-4 w-4"
               checked={isChecked}
@@ -654,7 +656,8 @@ const SqlObjectExplorer = ({
 
       {/* Search + refresh */}
       <div className="p-2 border-b flex gap-2 flex-shrink-0">
-        <input
+        <Input
+          unstyle
           type="text"
           placeholder={translate('::App.Platform.Search')}
           value={filterText}
diff --git a/ui/src/views/developerKit/SqlQueryManager.tsx b/ui/src/views/developerKit/SqlQueryManager.tsx
index 60dd6dcf..0a6b75b0 100644
--- a/ui/src/views/developerKit/SqlQueryManager.tsx
+++ b/ui/src/views/developerKit/SqlQueryManager.tsx
@@ -33,6 +33,7 @@ import CrudEndpointDialog, {
   type CrudObjectType,
 } from './CrudEndpointDialog'
 import { usePermission } from '@/utils/hooks/usePermission'
+import Input from '@/components/ui/Input'
 
 const SqlResultsGrid = lazy(() => import('./SqlResultsGrid'))
 const SqlTableDesignerDialog = lazy(() => import('./SqlTableDesignerDialog'))
@@ -1010,7 +1011,8 @@ GO`,
         {translate('::App.Platform.TargetDataSources')}
       </div>
       <label className="flex items-center gap-2 text-sm cursor-pointer mb-2">
-        <input
+        <Input
+          unstyle
           type="checkbox"
           checked={allTargetsSelected}
           onChange={(e) => handleToggleSelectAllTargets(e.target.checked)}
@@ -1020,7 +1022,8 @@ GO`,
       <div className="max-h-44 overflow-auto border-t pt-2">
         {availableTargetDataSourceCodes.map((code) => (
           <label key={code} className="flex items-center gap-2 text-sm cursor-pointer">
-            <input
+            <Input
+              unstyle
               type="checkbox"
               checked={copyTargetDataSources.includes(code)}
               onChange={(e) =>
@@ -1400,7 +1403,8 @@ GO`,
                     <strong>{state.selectedDataSource}</strong>
                   </p>
                   <label className="flex items-center gap-2 text-sm cursor-pointer shrink-0">
-                    <input
+                    <Input
+                      unstyle
                       type="checkbox"
                       checked={overwriteIfExists}
                       onChange={(e) => setOverwriteIfExists(e.target.checked)}
diff --git a/ui/src/views/developerKit/SqlResultsGrid.tsx b/ui/src/views/developerKit/SqlResultsGrid.tsx
index 2d27c37d..2b15e522 100644
--- a/ui/src/views/developerKit/SqlResultsGrid.tsx
+++ b/ui/src/views/developerKit/SqlResultsGrid.tsx
@@ -15,6 +15,7 @@ import { FaTimesCircle } from 'react-icons/fa'
 import DateTimepicker from '@/components/ui/DatePicker/DateTimepicker'
 import dayjs from 'dayjs'
 import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
+import Input from '@/components/ui/Input'
 
 type ResultColumn = { name: string; dataType?: string; isNullable?: boolean }
 
@@ -467,7 +468,8 @@ const SqlResultsGrid = ({
                     />
                   )
                 ) : (
-                  <input
+                  <Input
+                    unstyle
                     type={isNumberColumn(column) ? 'number' : 'text'}
                     value={typeof value === 'boolean' ? String(value) : value || ''}
                     required={required}
diff --git a/ui/src/views/developerKit/SqlTableDesignerDialog.tsx b/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
index 8a777939..dcd4f317 100644
--- a/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
+++ b/ui/src/views/developerKit/SqlTableDesignerDialog.tsx
@@ -40,6 +40,7 @@ import { MenuAddDialog } from '../shared/MenuAddDialog'
 import { useStoreActions, useStoreState } from '@/store'
 import { usePermission } from '@/utils/hooks/usePermission'
 import { developerKitService } from '@/services/developerKit.service'
+import Input from '@/components/ui/Input'
 import {
   CRUD_ENDPOINT_PERMISSION,
   CRUD_OPERATION_TYPES,
@@ -2372,7 +2373,8 @@ const SqlTableDesignerDialog = ({
                   className={`grid grid-cols-12 gap-2 bg-white dark:bg-gray-800 rounded items-center ${rowBg}`}
                 >
                   <div className="col-span-4">
-                    <input
+                    <Input
+                      unstyle
                       type="text"
                       className={`w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white ${
                         isDuplicate ? 'border-red-400' : ''
@@ -2407,7 +2409,8 @@ const SqlTableDesignerDialog = ({
                     </select>
                   </div>
                   <div className="col-span-1">
-                    <input
+                    <Input
+                      unstyle
                       type="number"
                       className="w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-center"
                       placeholder="-"
@@ -2423,7 +2426,8 @@ const SqlTableDesignerDialog = ({
                     />
                   </div>
                   <div className="col-span-2">
-                    <input
+                    <Input
+                      unstyle
                       type="text"
                       className="w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                       placeholder={translate('::Abp.Mailing.Default')}
@@ -2553,7 +2557,8 @@ const SqlTableDesignerDialog = ({
           <label className="block text-sm font-medium mb-1">
             {translate('::App.SqlQueryManager.EntityName')} <span className="text-red-500">*</span>
           </label>
-          <input
+          <Input
+            unstyle
             type="text"
             disabled={isEditMode} // Entity name (and thus table name) cannot be changed in edit mode
             className="w-full px-3 py-2 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
@@ -2568,7 +2573,8 @@ const SqlTableDesignerDialog = ({
           <label className="block text-sm font-medium mb-1">
             {translate('::App.Listform.ListformField.TableName')}
           </label>
-          <input
+          <Input
+            unstyle
             type="text"
             readOnly
             className="w-full px-3 py-2 text-sm border rounded bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 cursor-not-allowed"
@@ -2880,7 +2886,8 @@ const SqlTableDesignerDialog = ({
                 {/* Options */}
                 <div className="flex items-center gap-6">
                   <label className="flex items-center gap-2 cursor-pointer">
-                    <input
+                    <Input
+                      unstyle
                       type="checkbox"
                       checked={fkForm.isRequired}
                       onChange={(e) => setFkForm((f) => ({ ...f, isRequired: e.target.checked }))}
@@ -3127,7 +3134,8 @@ const SqlTableDesignerDialog = ({
                   <label className="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">
                     {translate('::App.SqlQueryManager.IndexConstraintName')}
                   </label>
-                  <input
+                  <Input
+                    unstyle
                     type="text"
                     value={indexForm.indexName}
                     onChange={(e) => setIndexForm((f) => ({ ...f, indexName: e.target.value }))}
@@ -3141,7 +3149,8 @@ const SqlTableDesignerDialog = ({
                 {/* Clustered */}
                 <div className="flex items-center gap-3">
                   <label className="flex items-center gap-2 cursor-pointer">
-                    <input
+                    <Input
+                      unstyle
                       type="checkbox"
                       checked={indexForm.isClustered}
                       onChange={(e) =>
@@ -3181,7 +3190,8 @@ const SqlTableDesignerDialog = ({
                               className="grid grid-cols-12 gap-2 px-3 py-1.5 items-center"
                             >
                               <div className="col-span-1">
-                                <input
+                                <Input
+                                  unstyle
                                   type="checkbox"
                                   checked={!!existing}
                                   onChange={(e) => {
diff --git a/ui/src/views/developerKit/SqlViewDesignerDialog.tsx b/ui/src/views/developerKit/SqlViewDesignerDialog.tsx
index ac7d1ea2..22e8c9dc 100644
--- a/ui/src/views/developerKit/SqlViewDesignerDialog.tsx
+++ b/ui/src/views/developerKit/SqlViewDesignerDialog.tsx
@@ -26,6 +26,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
 import DiagramPane, { type PendingLink } from './sqlViewDesigner/DiagramPane'
 import CriteriaGrid from './sqlViewDesigner/CriteriaGrid'
+import Input from '@/components/ui/Input'
 import {
   BOX_DEFAULT_ROWS,
   createEmptySettings,
@@ -600,7 +601,8 @@ const SqlViewDesignerDialog = ({
       <span className="text-[11px] font-semibold text-gray-500">
         {translate('::App.SqlViewDesigner.Schema')}
       </span>
-      <input
+      <Input
+        unstyle
         className={`${inputCls} w-[90px]`}
         value={settings.schemaName}
         onChange={(e) => setSettings((s) => ({ ...s, schemaName: e.target.value }))}
@@ -608,7 +610,8 @@ const SqlViewDesignerDialog = ({
       <span className="text-[11px] font-semibold text-gray-500">
         {translate('::App.SqlViewDesigner.ViewName')} *
       </span>
-      <input
+      <Input
+        unstyle
         className={`${inputCls} w-[190px]`}
         placeholder="Vw_OrderSummary"
         value={settings.viewName}
@@ -616,7 +619,8 @@ const SqlViewDesignerDialog = ({
         onChange={(e) => setSettings((s) => ({ ...s, viewName: e.target.value }))}
       />
       <label className="flex items-center gap-1 text-[11px]">
-        <input
+        <Input
+          unstyle
           type="checkbox"
           checked={settings.distinct}
           onChange={(e) => setSettings((s) => ({ ...s, distinct: e.target.checked }))}
@@ -636,7 +640,8 @@ const SqlViewDesignerDialog = ({
         &#931; {translate('::App.SqlViewDesigner.GroupByColumn')}
       </button>
       <label className="flex items-center gap-1 text-[11px]">
-        <input
+        <Input
+          unstyle
           type="checkbox"
           checked={settings.topEnabled}
           onChange={(e) => setSettings((s) => ({ ...s, topEnabled: e.target.checked }))}
@@ -645,7 +650,8 @@ const SqlViewDesignerDialog = ({
       </label>
       {settings.topEnabled && (
         <>
-          <input
+          <Input
+            unstyle
             type="number"
             min={1}
             className={`${inputCls} w-[70px]`}
@@ -654,7 +660,8 @@ const SqlViewDesignerDialog = ({
           />
           {!isPostgreSql && (
             <label className="flex items-center gap-1 text-[11px]">
-              <input
+              <Input
+                unstyle
                 type="checkbox"
                 checked={settings.topPercent}
                 onChange={(e) => setSettings((s) => ({ ...s, topPercent: e.target.checked }))}
@@ -723,7 +730,8 @@ const SqlViewDesignerDialog = ({
         <>
           <div className="relative p-1">
             <FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-[10px] text-gray-400" />
-            <input
+            <Input
+              unstyle
               className="w-full rounded border py-1 pl-6 pr-1 text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-white"
               placeholder={translate('::App.SqlViewDesigner.SearchObjects')}
               value={catalogSearch}
diff --git a/ui/src/views/developerKit/VisualComponentDesigner.tsx b/ui/src/views/developerKit/VisualComponentDesigner.tsx
index 1b1af640..6bbb7822 100644
--- a/ui/src/views/developerKit/VisualComponentDesigner.tsx
+++ b/ui/src/views/developerKit/VisualComponentDesigner.tsx
@@ -118,6 +118,7 @@ import {
 } from '@/components/visualDesigner/types'
 import { IconPickerField } from '@/views/shared/MenuAddDialog'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 type WorkspaceTab = 'design' | 'data' | 'code' | 'javascript'
 type InspectorTab = 'properties' | 'data' | 'tree'
@@ -1095,7 +1096,8 @@ const ObjectListEditor = ({
               <span className="mb-0.5 block text-[9px] font-medium uppercase tracking-wide text-slate-400">
                 {translate('::' + field.label)}
               </span>
-              <input
+              <Input
+                unstyle
                 className={inputClass}
                 placeholder={
                   field.placeholder?.startsWith('App.')
@@ -1149,7 +1151,8 @@ const PropertyEditor = ({
         <span className="text-xs text-slate-600 dark:text-slate-300">
           {value ? 'Enabled' : 'Disabled'}
         </span>
-        <input
+        <Input
+          unstyle
           checked={Boolean(value)}
           className="h-4 w-4 accent-sky-600"
           type="checkbox"
@@ -1223,7 +1226,8 @@ const PropertyEditor = ({
               onChange={(event) => onChange(event.target.value)}
             />
           ) : (
-            <input
+            <Input
+              unstyle
               className={`${inputClass} font-mono`}
               placeholder={translate('::App.DeveloperKitComponentDesigner.ClassPlaceholder')}
               type="text"
@@ -1261,7 +1265,8 @@ const PropertyEditor = ({
     )
   }
   return (
-    <input
+    <Input
+      unstyle
       className={inputClass}
       placeholder={type === 'string' ? 'Metin veya ::LanguageKey' : undefined}
       type={type === 'number' ? 'number' : name.toLowerCase().includes('color') ? 'color' : 'text'}
@@ -3223,7 +3228,8 @@ const VisualComponentDesigner = () => {
         <div className="flex flex-wrap items-center gap-2">
           <div className="relative min-w-0 flex-1">
             <FaSearch className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400" />
-            <input
+            <Input
+              unstyle
               className="w-full rounded-md border border-slate-300 bg-white py-2 pl-7 pr-2.5 text-xs dark:border-slate-700 dark:bg-slate-900"
               placeholder={translate('::App.DeveloperKitComponentDesigner.SearchEndpoint')}
               type="search"
@@ -3250,7 +3256,8 @@ const VisualComponentDesigner = () => {
             ))}
           </div>
           <label className="flex cursor-pointer items-center gap-1.5 text-[10px] font-semibold text-slate-500">
-            <input
+            <Input
+              unstyle
               checked={endpointAttachedOnly}
               className="h-3 w-3 accent-sky-600"
               type="checkbox"
@@ -3394,7 +3401,8 @@ const VisualComponentDesigner = () => {
             {staticSelectOptions.map((option, index) => (
               <div key={index} className="space-y-1">
                 <div className="grid grid-cols-[1fr_1fr_auto] gap-1">
-                <input
+                <Input
+                  unstyle
                   aria-label={translate('::App.DeveloperKitComponentDesigner.OptionLabelAria', {
                     index: index + 1,
                   })}
@@ -3409,7 +3417,8 @@ const VisualComponentDesigner = () => {
                     )
                   }
                 />
-                <input
+                <Input
+                  unstyle
                   aria-label={translate('::App.DeveloperKitComponentDesigner.OptionValueAria', {
                     index: index + 1,
                   })}
@@ -3452,7 +3461,8 @@ const VisualComponentDesigner = () => {
                   />
                 )}
                 {selectedNode?.type === 'Tabs' && (
-                  <input
+                  <Input
+                    unstyle
                     className="w-full min-w-0 rounded border border-slate-300 bg-white px-2 py-1.5 text-[10px] dark:border-slate-700 dark:bg-slate-900"
                     placeholder={translate(
                       '::App.DeveloperKitComponentDesigner.TabContentPlaceholder',
@@ -3730,7 +3740,8 @@ const VisualComponentDesigner = () => {
                 {/* The header text is independent of the lookup: a column can be
                     renamed without being resolved, and resolved without being
                     renamed. Left empty it keeps the field name. */}
-                <input
+                <Input
+                  unstyle
                   className="mt-1.5 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-[10px] dark:border-slate-700 dark:bg-slate-900"
                   placeholder={translate(
                     '::App.DeveloperKitComponentDesigner.ColumnCaptionPlaceholder',
@@ -3740,7 +3751,8 @@ const VisualComponentDesigner = () => {
                   onChange={(event) => writeColumnCaption(column, event.target.value)}
                 />
                 <label className="mt-1.5 flex cursor-pointer items-center gap-2">
-                  <input
+                  <Input
+                    unstyle
                     checked={Boolean(lookup)}
                     className="h-3 w-3 accent-sky-600"
                     type="checkbox"
@@ -3860,7 +3872,8 @@ const VisualComponentDesigner = () => {
                 key={field.path}
                 className="flex cursor-pointer items-center gap-2 rounded bg-slate-50 px-2 py-1.5 dark:bg-slate-950"
               >
-                <input
+                <Input
+                  unstyle
                   checked={selectedGridColumns.includes(field.path)}
                   className="h-3 w-3 accent-sky-600"
                   type="checkbox"
@@ -4045,7 +4058,8 @@ const VisualComponentDesigner = () => {
                       ))}
                     </select>
                   ) : (
-                    <input
+                    <Input
+                      unstyle
                       className="min-w-0 flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
                       list={listId}
                       placeholder={translate('::App.DeveloperKitComponentDesigner.FilterColumn')}
@@ -4102,7 +4116,8 @@ const VisualComponentDesigner = () => {
                       ))}
                     </select>
                     {filter.source !== 'record' && (
-                      <input
+                      <Input
+                        unstyle
                         className="min-w-0 flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
                         placeholder={translate(
                           filter.source === 'static'
@@ -4138,7 +4153,8 @@ const VisualComponentDesigner = () => {
                         </option>
                       ))}
                     </select>
-                    <input
+                    <Input
+                      unstyle
                       className="min-w-0 flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
                       list={`${listId}-${filter.id}-master`}
                       placeholder={translate(
@@ -4164,7 +4180,8 @@ const VisualComponentDesigner = () => {
                   </p>
                 )}
                 {!valueless && filter.source !== 'static' && (
-                  <input
+                  <Input
+                    unstyle
                     className="w-full rounded border border-dashed border-slate-300 bg-white px-2 py-1 text-[10px] dark:border-slate-700 dark:bg-slate-900"
                     placeholder={translate(
                       '::App.DeveloperKitComponentDesigner.FilterPreviewValue',
@@ -4176,7 +4193,8 @@ const VisualComponentDesigner = () => {
                   />
                 )}
                 <label className="flex cursor-pointer items-center gap-1.5 text-[10px] text-slate-500">
-                  <input
+                  <Input
+                    unstyle
                     checked={Boolean(filter.required)}
                     className="h-3 w-3 accent-sky-600"
                     type="checkbox"
@@ -4286,7 +4304,8 @@ const VisualComponentDesigner = () => {
             <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-slate-400">
               Key field
             </span>
-            <input
+            <Input
+              unstyle
               className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
               placeholder="id"
               value={String(selectedNode.props.keyFieldName ?? '')}
@@ -4328,7 +4347,8 @@ const VisualComponentDesigner = () => {
               </option>
             ))}
           </select>
-          <input
+          <Input
+            unstyle
             className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
             placeholder={translate('::App.DeveloperKitComponentDesigner.KeyParamPlaceholder', {
               field: getSqlDataSourceKeyField(selectedNode),
@@ -4346,7 +4366,8 @@ const VisualComponentDesigner = () => {
             <p className="mb-2 text-[10px] leading-4 text-slate-500">
               {translate('::App.DeveloperKitComponentDesigner.PreviewKeyValueHint')}
             </p>
-            <input
+            <Input
+              unstyle
               className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
               placeholder={translate(
                 '::App.DeveloperKitComponentDesigner.PreviewKeyValuePlaceholder',
@@ -4364,7 +4385,8 @@ const VisualComponentDesigner = () => {
             ] as const
           ).map(([property, label, defaultChecked]) => (
             <label key={property} className="flex cursor-pointer items-center gap-2 text-[10px]">
-              <input
+              <Input
+                unstyle
                 checked={
                   defaultChecked
                     ? selectedNode.props[property] !== false
@@ -4498,7 +4520,8 @@ const VisualComponentDesigner = () => {
           <p className="mb-2 text-[10px] leading-4 text-slate-500">
             {translate('::App.DeveloperKitComponentDesigner.RecordFieldHint')}
           </p>
-          <input
+          <Input
+            unstyle
             className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] dark:border-slate-700 dark:bg-slate-900"
             list={columnListId}
             placeholder={translate('::App.DeveloperKitComponentDesigner.DoNotBindToRecord')}
@@ -4542,7 +4565,8 @@ const VisualComponentDesigner = () => {
               <option value="false">{translate('::App.Platform.No')}</option>
             </select>
           ) : (
-            <input
+            <Input
+              unstyle
               className="w-full rounded-md border border-slate-300 bg-white px-2 py-2 text-[10px] disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900"
               disabled={!column}
               placeholder={translate('::App.DeveloperKitComponentDesigner.NoDefaultValue')}
@@ -4740,7 +4764,8 @@ const VisualComponentDesigner = () => {
               <div className="flex items-center gap-2">
                 {isTabularDataComponent(selectedNode?.type) && gridColumnFields.length > 0 && (
                   <label className="flex cursor-pointer items-center gap-1 text-[9px] font-semibold text-sky-600">
-                    <input
+                    <Input
+                      unstyle
                       checked={allGridColumnsSelected}
                       className="h-3 w-3 accent-sky-600"
                       type="checkbox"
@@ -4783,7 +4808,8 @@ const VisualComponentDesigner = () => {
                   >
                     {isTabularDataComponent(selectedNode?.type) &&
                     !['array', 'object'].includes(field.type) ? (
-                      <input
+                      <Input
+                        unstyle
                         checked={selectedGridColumns.includes(field.path)}
                         className="mt-0.5 h-3 w-3 accent-sky-600"
                         type="checkbox"
@@ -5141,7 +5167,8 @@ const VisualComponentDesigner = () => {
               </div>
               <label className="relative block">
                 <FaSearch className="absolute left-2.5 top-2.5 text-xs text-slate-400" />
-                <input
+                <Input
+                  unstyle
                   className="w-full rounded-md border border-slate-200 bg-slate-50 py-2 pl-8 pr-2 text-xs outline-none focus:border-sky-400 dark:border-slate-700 dark:bg-slate-950"
                   placeholder={translate('::App.DeveloperKitComponentDesigner.SearchComponent')}
                   value={search}
@@ -5662,7 +5689,8 @@ const VisualComponentDesigner = () => {
                           refs.{selectedNode.ref}
                         </button>
                       </span>
-                      <input
+                      <Input
+                        unstyle
                         className="mt-1 w-full rounded border border-slate-300 bg-white px-2 py-1 font-mono text-[11px] text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
                         spellCheck={false}
                         value={refDraft}
@@ -5854,7 +5882,8 @@ const VisualComponentDesigner = () => {
             </button>
           </div>
           <div className="shrink-0 border-b border-slate-200 px-4 py-3 dark:border-slate-800">
-            <input
+            <Input
+              unstyle
               className="w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200"
               placeholder={translate('::App.DeveloperKitComponentDesigner.SearchExample')}
               value={scriptApiSearch}
@@ -5981,7 +6010,8 @@ const VisualComponentDesigner = () => {
                   <span className="mb-1.5 block text-[10px] font-semibold uppercase text-slate-500">
                     Ad
                   </span>
-                  <input
+                  <Input
+                    unstyle
                     className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-xs text-slate-800 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
                     value={catalogSourceEditor.draft.name}
                     onChange={(event) => updateCatalogSourceDraft({ name: event.target.value })}
@@ -6012,7 +6042,8 @@ const VisualComponentDesigner = () => {
                 <span className="mb-1.5 block text-[10px] font-semibold uppercase text-slate-500">
                   Endpoint URL
                 </span>
-                <input
+                <Input
+                  unstyle
                   className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs text-slate-800 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
                   placeholder="/api/app/customers"
                   value={catalogSourceEditor.draft.url}
@@ -6026,7 +6057,8 @@ const VisualComponentDesigner = () => {
                     ({translate('::App.PublicCommon.Optional')})
                   </span>
                 </span>
-                <input
+                <Input
+                  unstyle
                   className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs text-slate-800 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
                   placeholder="result.items"
                   value={catalogSourceEditor.draft.responsePath}
diff --git a/ui/src/views/developerKit/sqlViewDesigner/CriteriaGrid.tsx b/ui/src/views/developerKit/sqlViewDesigner/CriteriaGrid.tsx
index 55289edf..345ebc54 100644
--- a/ui/src/views/developerKit/sqlViewDesigner/CriteriaGrid.tsx
+++ b/ui/src/views/developerKit/sqlViewDesigner/CriteriaGrid.tsx
@@ -8,6 +8,7 @@
 import { useState } from 'react'
 import { FaCode, FaGripVertical, FaMagic, FaPlus, FaTrash } from 'react-icons/fa'
 import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
+import Input from '@/components/ui/Input'
 import {
   GROUP_MODES,
   GROUP_MODE_LABEL,
@@ -191,7 +192,8 @@ export function CriteriaGrid({
 
                   <td className="border border-gray-200 px-0.5 dark:border-gray-700">
                     {isExpression ? (
-                      <input
+                      <Input
+                        unstyle
                         className={`${cellCls} font-mono text-[11px] text-indigo-700 dark:text-indigo-300`}
                         placeholder={labels.expressionPlaceholder}
                         value={row.expression ?? ''}
@@ -215,7 +217,8 @@ export function CriteriaGrid({
                   </td>
 
                   <td className="border border-gray-200 px-0.5 dark:border-gray-700">
-                    <input
+                    <Input
+                      unstyle
                       className={cellCls}
                       placeholder={row.columnName}
                       value={row.alias}
@@ -244,7 +247,8 @@ export function CriteriaGrid({
                   </td>
 
                   <td className="border border-gray-200 text-center dark:border-gray-700">
-                    <input
+                    <Input
+                      unstyle
                       type="checkbox"
                       className="h-3.5 w-3.5"
                       checked={row.output}
@@ -297,7 +301,8 @@ export function CriteriaGrid({
                   </td>
 
                   <td className="border border-gray-200 px-0.5 dark:border-gray-700">
-                    <input
+                    <Input
+                      unstyle
                       type="number"
                       min={0}
                       className={cellCls}
@@ -315,7 +320,8 @@ export function CriteriaGrid({
                       className="relative border border-gray-200 px-0.5 dark:border-gray-700"
                     >
                       <div className="flex items-center gap-0.5">
-                        <input
+                        <Input
+                          unstyle
                           className={cellCls}
                           placeholder={i === 0 ? "> 100 · = 'A' · IS NULL" : ''}
                           value={row.filters[i] ?? ''}
@@ -425,14 +431,16 @@ function FilterBuilder({
       </select>
       {needsValue && (
         <>
-          <input
+          <Input
+            unstyle
             className="mb-1 w-full rounded border px-1 py-1 text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-white"
             placeholder={labels.builderValue}
             value={value}
             onChange={(e) => setValue(e.target.value)}
           />
           {operator === 'BETWEEN' && (
-            <input
+            <Input
+              unstyle
               className="mb-1 w-full rounded border px-1 py-1 text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-white"
               placeholder={labels.builderValue}
               value={value2}
diff --git a/ui/src/views/developerKit/sqlViewDesigner/DiagramPane.tsx b/ui/src/views/developerKit/sqlViewDesigner/DiagramPane.tsx
index 865d0fbc..491ed51a 100644
--- a/ui/src/views/developerKit/sqlViewDesigner/DiagramPane.tsx
+++ b/ui/src/views/developerKit/sqlViewDesigner/DiagramPane.tsx
@@ -24,6 +24,7 @@ import {
   FaTimes,
 } from 'react-icons/fa'
 import type { DatabaseColumnDto } from '@/proxy/sql-query-manager/models'
+import Input from '@/components/ui/Input'
 import {
   BOX_FOOTER_HEIGHT,
   BOX_HEADER_HEIGHT,
@@ -573,7 +574,8 @@ function TableBox({
             {src.applyKind ? `${src.applyKind} APPLY` : 'SUB'}
           </span>
         )}
-        <input
+        <Input
+          unstyle
           className="ml-auto w-[46px] shrink-0 rounded border border-gray-300 bg-white px-1 py-0 text-[10px] text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
           value={src.alias}
           disabled={lockAliases}
@@ -650,7 +652,8 @@ function TableBox({
                     if (linkable) onCompleteLink({ sourceId: src.id, columnName: col.columnName })
                   }}
                 >
-                  <input
+                  <Input
+                    unstyle
                     type="checkbox"
                     className="h-3 w-3 shrink-0"
                     checked={selected}
diff --git a/ui/src/views/form/editors/ImageUploadEditorComponent.tsx b/ui/src/views/form/editors/ImageUploadEditorComponent.tsx
index 95c5867d..8e289345 100644
--- a/ui/src/views/form/editors/ImageUploadEditorComponent.tsx
+++ b/ui/src/views/form/editors/ImageUploadEditorComponent.tsx
@@ -9,6 +9,7 @@ import {
   showImageHoverPreview,
 } from './imageHoverPreview'
 import { normalizeImageSize } from '../../list/shared/imageValue'
+import Input from '@/components/ui/Input'
 
 const ImageUploadEditorComponent = ({
   value,
@@ -153,7 +154,8 @@ const ImageUploadEditorComponent = ({
 
       {!readOnly && (
         <>
-          <input
+          <Input
+            unstyle
             ref={inputRef}
             type="file"
             accept={resolvedOptions.accept ?? 'image/*'}
diff --git a/ui/src/views/forum/forum/SearchModal.tsx b/ui/src/views/forum/forum/SearchModal.tsx
index e796060d..9df0956e 100644
--- a/ui/src/views/forum/forum/SearchModal.tsx
+++ b/ui/src/views/forum/forum/SearchModal.tsx
@@ -5,6 +5,7 @@ import { useForumSearch } from '@/utils/hooks/useForumSearch'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import Button from '@/components/ui/Button'
 import { formatForumDate, sanitizeForumHtml } from './utils'
+import Input from '@/components/ui/Input'
 
 interface SearchModalProps {
   isOpen: boolean
@@ -118,7 +119,8 @@ export function SearchModal({
       >
         <div className="flex items-center border-b border-gray-200 p-4 dark:border-gray-700">
           <FaSearch className="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
-          <input
+          <Input
+            unstyle
             autoFocus
             type="text"
             value={searchQuery}
diff --git a/ui/src/views/intranet/SocialWall/CreatePost.tsx b/ui/src/views/intranet/SocialWall/CreatePost.tsx
index 1220e7ae..1e04f99a 100644
--- a/ui/src/views/intranet/SocialWall/CreatePost.tsx
+++ b/ui/src/views/intranet/SocialWall/CreatePost.tsx
@@ -9,6 +9,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
 import { Avatar, Button } from '@/components/ui'
 import { AVATAR_URL } from '@/constants/app.constant'
+import Input from '@/components/ui/Input'
 
 const MAX_POLL_OPTIONS = 6
 const MIN_POLL_OPTIONS = 2
@@ -270,7 +271,8 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
                   {translate('::App.Platform.Cancel')}
                 </Button>
               </div>
-              <input
+              <Input
+                unstyle
                 type="text"
                 value={pollQuestion}
                 onChange={(e) => setPollQuestion(e.target.value)}
@@ -283,7 +285,8 @@ const CreatePost: React.FC<CreatePostProps> = ({ onCreatePost }) => {
                 {pollOptions.map((option, index) => (
                   // Seçenekler stabil bir kimliğe sahip değil; sıra indeksi anahtar olarak kullanılıyor
                   <div key={index} className="flex gap-2">
-                    <input
+                    <Input
+                      unstyle
                       type="text"
                       value={option}
                       onChange={(e) => updatePollOption(index, e.target.value)}
diff --git a/ui/src/views/intranet/SocialWall/MediaManager.tsx b/ui/src/views/intranet/SocialWall/MediaManager.tsx
index 04d8a83a..a4421892 100644
--- a/ui/src/views/intranet/SocialWall/MediaManager.tsx
+++ b/ui/src/views/intranet/SocialWall/MediaManager.tsx
@@ -5,6 +5,7 @@ import { FaTimes, FaLink, FaUpload } from 'react-icons/fa'
 import classNames from 'classnames'
 import { SocialMediaDto } from '@/proxy/intranet/models'
 import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
 
 interface MediaManagerProps {
   media: SocialMediaDto[]
@@ -155,7 +156,8 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
                   {translate('::App.SocialWallMediaManager.ImageOrVideoFormats')}
                 </p>
               </div>
-              <input
+              <Input
+                unstyle
                 type="file"
                 accept={acceptedFiles}
                 multiple
@@ -193,7 +195,8 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
                 </div>
               </div>
               <div className="flex gap-2">
-                <input
+                <Input
+                  unstyle
                   type="url"
                   value={urlInput}
                   onChange={(e) => setUrlInput(e.target.value)}
diff --git a/ui/src/views/intranet/SocialWall/PostItem.tsx b/ui/src/views/intranet/SocialWall/PostItem.tsx
index fdd6c6c5..27ccdda7 100644
--- a/ui/src/views/intranet/SocialWall/PostItem.tsx
+++ b/ui/src/views/intranet/SocialWall/PostItem.tsx
@@ -19,6 +19,7 @@ import { SocialPostDto } from '@/proxy/intranet/models'
 import { useStoreState } from '@/store/store'
 import { AVATAR_URL } from '@/constants/app.constant'
 import { Avatar, Button } from '@/components/ui'
+import Input from '@/components/ui/Input'
 
 // Aktif dil `useLocale` tarafından global olarak ayarlanır; burada sabitlenmez.
 dayjs.extend(relativeTime)
@@ -379,7 +380,8 @@ const PostItem: React.FC<PostItemProps> = ({ post, onLike, onComment, onDelete,
             {/* Comment Form */}
             <form onSubmit={handleSubmitComment} className="mb-4">
               <div className="flex gap-2">
-                <input
+                <Input
+                  unstyle
                   type="text"
                   value={commentText}
                   onChange={(e) => setCommentText(e.target.value)}
diff --git a/ui/src/views/intranet/widgets/SurveyModal.tsx b/ui/src/views/intranet/widgets/SurveyModal.tsx
index 30d222f2..e9c1ecab 100644
--- a/ui/src/views/intranet/widgets/SurveyModal.tsx
+++ b/ui/src/views/intranet/widgets/SurveyModal.tsx
@@ -3,6 +3,7 @@ import { Button, Dialog, Rate } from '@/components/ui'
 import { useDialogContext } from '@/components/ui/Dialog/Dialog'
 import { SurveyAnswerDto, SurveyDto, SurveyQuestionDto } from '@/proxy/intranet/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 interface SurveyModalProps {
   survey: SurveyDto
@@ -123,7 +124,8 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
                       : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                   }`}
                 >
-                  <input
+                  <Input
+                    unstyle
                     type="radio"
                     name={`question-${question.id}`}
                     value={option.text}
@@ -157,7 +159,8 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
                       : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                   }`}
                 >
-                  <input
+                  <Input
+                    unstyle
                     type="radio"
                     name={`question-${question.id}`}
                     value={value}
@@ -183,7 +186,8 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
               {questionNumber}. {question.questionText} {question.isRequired && '*'}
             </label>
-            <input
+            <Input
+              unstyle
               type="text"
               value={answers[question.id] || ''}
               onChange={(e) => handleAnswerChange(question.id, e.target.value)}
diff --git a/ui/src/views/list/Chart.tsx b/ui/src/views/list/Chart.tsx
index d59c2711..24afa996 100644
--- a/ui/src/views/list/Chart.tsx
+++ b/ui/src/views/list/Chart.tsx
@@ -29,6 +29,7 @@ import { useListFormCustomDataSource } from './useListFormCustomDataSource'
 import { useListFormColumns } from './useListFormColumns'
 import { GridColumnData } from './GridColumnData'
 import Toolbar, { Item } from 'devextreme-react/toolbar'
+import Input from '@/components/ui/Input'
 
 interface ChartProps extends CommonProps, Meta {
   id: string
@@ -383,7 +384,8 @@ const Chart = (props: ChartProps) => {
                 render={() => (
                   <div className="relative flex items-center">
                     <FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm" />
-                    <input
+                    <Input
+                      unstyle
                       type="text"
                       placeholder={translate('::App.Platform.Search2')}
                       value={searchText}
diff --git a/ui/src/views/list/GridExtraFilterToolbar.tsx b/ui/src/views/list/GridExtraFilterToolbar.tsx
index f4efe9d4..0f9b4dcf 100644
--- a/ui/src/views/list/GridExtraFilterToolbar.tsx
+++ b/ui/src/views/list/GridExtraFilterToolbar.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { GridExtraFilterState } from './Utils'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Input from '@/components/ui/Input'
 
 export function GridExtraFilterToolbar({
   filters,
@@ -59,7 +60,8 @@ export function GridExtraFilterToolbar({
                 ))}
               </select>
             ) : (
-              <input
+              <Input
+                unstyle
                 type="text"
                 className="border rounded px-1 py-1"
                 value={inputValues[fs.fieldName] ?? current?.value ?? ''}
diff --git a/ui/src/views/list/TodoBoard.tsx b/ui/src/views/list/TodoBoard.tsx
index 3a28f103..c51d304d 100644
--- a/ui/src/views/list/TodoBoard.tsx
+++ b/ui/src/views/list/TodoBoard.tsx
@@ -37,6 +37,7 @@ import { useListFormColumns } from './useListFormColumns'
 import type { GridColumnData } from './GridColumnData'
 import { flattenGridColumns } from './shared/columns'
 import { useStoreState } from '@/store/store'
+import Input from '@/components/ui/Input'
 
 dayjs.extend(relativeTime)
 
@@ -873,7 +874,8 @@ const TodoBoardContent = ({
             {options.titleExpr && (
               <div>
                 <label className={labelClass}>{translate('::App.Listform.ListformField.Title')}</label>
-                <input
+                <Input
+                  unstyle
                   className={`${inputClass} text-lg font-semibold`}
                   disabled={!canUpdate}
                   value={String(draft[options.titleExpr] ?? '')}
@@ -976,7 +978,8 @@ const TodoBoardContent = ({
             {selectedTenantId && (
               <div>
                 <label className={labelClass}>Tenant</label>
-                <input
+                <Input
+                  unstyle
                   readOnly
                   className={`${inputClass} cursor-default`}
                   value={selectedTenantName ?? ''}
@@ -987,7 +990,8 @@ const TodoBoardContent = ({
               <label className={labelClass}>
                 {translate('::Abp.Mailing.Smtp.UserName')}
               </label>
-              <input
+              <Input
+                unstyle
                 readOnly
                 className={`${inputClass} cursor-default`}
                 value={String(draft[userNameField] ?? '')}
@@ -1018,7 +1022,8 @@ const TodoBoardContent = ({
             {options.dueDateExpr && (
               <div>
                 <label className={labelClass}>{translate('::App.ListFormTodoBoard.DueDate')}</label>
-                <input
+                <Input
+                  unstyle
                   type="datetime-local"
                   className={inputClass}
                   disabled={!canUpdate}
@@ -1069,7 +1074,8 @@ const TodoBoardContent = ({
             )}
             {options.completedExpr && (
               <label className="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm font-medium dark:border-gray-700 dark:bg-gray-800">
-                <input
+                <Input
+                  unstyle
                   type="checkbox"
                   className="h-4 w-4 accent-emerald-500"
                   disabled={!canUpdate}
@@ -1189,7 +1195,8 @@ const TodoBoardContent = ({
                         renameStatus(status)
                       }}
                     >
-                      <input
+                      <Input
+                        unstyle
                         autoFocus
                         className="min-w-0 flex-1 rounded-md border border-blue-400 bg-white px-2 py-1 text-sm font-semibold outline-none ring-2 ring-blue-500/20 dark:bg-gray-800"
                         value={statusName}
@@ -1306,7 +1313,8 @@ const TodoBoardContent = ({
                 {isAdding && (
                   <div className="mt-3 rounded border border-blue-300 bg-white p-2 dark:border-blue-700 dark:bg-gray-800">
                     <div className="flex gap-1">
-                      <input
+                      <Input
+                        unstyle
                         autoFocus
                         value={newTodoTitle}
                         className="min-w-0 flex-1 rounded border border-gray-300 bg-transparent px-2 py-1 text-sm outline-none focus:border-blue-500 dark:border-gray-600"
@@ -1576,7 +1584,8 @@ const TodoBoardContent = ({
                     <label className="mb-2 block text-sm font-semibold" htmlFor="new-kanban-name">
                       {translate('::App.ListFormTodoBoard.NewColumnName')}
                     </label>
-                    <input
+                    <Input
+                      unstyle
                       autoFocus
                       id="new-kanban-name"
                       className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800"
diff --git a/ui/src/views/list/editors/ImageUploadEditorComponent.tsx b/ui/src/views/list/editors/ImageUploadEditorComponent.tsx
index d50eeb98..dbf08b43 100644
--- a/ui/src/views/list/editors/ImageUploadEditorComponent.tsx
+++ b/ui/src/views/list/editors/ImageUploadEditorComponent.tsx
@@ -9,6 +9,7 @@ import {
   showImageHoverPreview,
 } from '../../form/editors/imageHoverPreview'
 import { normalizeImageSize, parseJsonObject } from '../shared/imageValue'
+import Input from '@/components/ui/Input'
 
 type ImageUploadOptions = {
   accept?: string
@@ -192,7 +193,8 @@ const ImageUploadEditorComponent = (cellElement: any): ReactElement => {
         </div>
       ))}
 
-      <input
+      <Input
+        unstyle
         ref={inputRef}
         type="file"
         accept={options.accept ?? 'image/*'}
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index b4a0f91e..971baa5b 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -9,6 +9,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Button } from '@/components/ui'
 import { translateLabel } from './designer'
 import { PublicPageLoader } from './shared'
+import Input from '@/components/ui/Input'
 
 const PAGE_SIZE = 10
 const PAGINATION_WINDOW = 2
@@ -132,7 +133,8 @@ const Blog: React.FC = () => {
             <div className="flex flex-col md:flex-row">
               <form className="flex-1" onSubmit={handleSearch}>
                 <div className="relative">
-                  <input
+                  <Input
+                    unstyle
                     type="search"
                     value={searchQuery}
                     placeholder={translateLabel(translate, 'App.PublicBlog.SearchPlaceholder')}
@@ -274,7 +276,8 @@ const Blog: React.FC = () => {
             {translate('::App.BlogSubscribe.SubscribeDesc')}
           </p>
           <div className="mx-auto flex max-w-md gap-4">
-            <input
+            <Input
+              unstyle
               type="email"
               placeholder={translate('::App.Listform.ListformField.Email')}
               aria-label={translate('::App.Listform.ListformField.Email')}
diff --git a/ui/src/views/public/Demo.tsx b/ui/src/views/public/Demo.tsx
index e5a1702b..1cdd6f81 100644
--- a/ui/src/views/public/Demo.tsx
+++ b/ui/src/views/public/Demo.tsx
@@ -15,6 +15,7 @@ import { createDemoAsync } from '@/services/demo.service'
 import { DemoDto } from '@/proxy/demo/models'
 import { Button, Notification, toast } from '@/components/ui'
 import { translateLabel } from './designer'
+import Input from '@/components/ui/Input'
 
 interface DemoModalProps {
   isOpen: boolean
@@ -241,7 +242,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
               error={errors.organizationName}
               icon={<FaBuilding className="h-5 w-5" />}
             >
-              <input
+              <Input
+                unstyle
                 ref={firstFieldRef}
                 type="text"
                 name="organizationName"
@@ -257,7 +259,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
               error={errors.name}
               icon={<FaUser className="h-5 w-5" />}
             >
-              <input
+              <Input
+                unstyle
                 type="text"
                 name="name"
                 value={formData.name}
@@ -273,7 +276,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                 error={errors.email}
                 icon={<FaEnvelope className="h-5 w-5" />}
               >
-                <input
+                <Input
+                  unstyle
                   type="email"
                   name="email"
                   value={formData.email}
@@ -288,7 +292,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                 error={errors.phoneNumber}
                 icon={<FaPhone className="h-5 w-5" />}
               >
-                <input
+                <Input
+                  unstyle
                   type="tel"
                   name="phoneNumber"
                   value={formData.phoneNumber}
@@ -320,7 +325,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                 error={errors.numberOfBranches}
                 icon={<FaBuilding className="h-5 w-5" />}
               >
-                <input
+                <Input
+                  unstyle
                   type="number"
                   min={0}
                   name="numberOfBranches"
@@ -336,7 +342,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                 error={errors.numberOfUsers}
                 icon={<FaUsers className="h-5 w-5" />}
               >
-                <input
+                <Input
+                  unstyle
                   type="number"
                   min={0}
                   name="numberOfUsers"
diff --git a/ui/src/views/public/designer/DesignerDrawer.tsx b/ui/src/views/public/designer/DesignerDrawer.tsx
index df89625d..b1af2799 100644
--- a/ui/src/views/public/designer/DesignerDrawer.tsx
+++ b/ui/src/views/public/designer/DesignerDrawer.tsx
@@ -128,7 +128,8 @@ const FieldEditor: React.FC<{
     case 'boolean':
       return (
         <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-600 dark:text-gray-300">
-          <input
+          <Input
+            unstyle
             type="checkbox"
             checked={field.value === true || field.value === 'true'}
             className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500 dark:border-gray-600"
diff --git a/ui/src/views/shared/MenuAddDialog.tsx b/ui/src/views/shared/MenuAddDialog.tsx
index 65d7df74..48701e85 100644
--- a/ui/src/views/shared/MenuAddDialog.tsx
+++ b/ui/src/views/shared/MenuAddDialog.tsx
@@ -8,6 +8,7 @@ import { FaChevronDown, FaEdit, FaPlus } from 'react-icons/fa'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useConfig } from '@/components/ui/ConfigProvider'
 import { useForm } from '@/components/ui/Form/context'
+import Input from '@/components/ui/Input'
 
 const menuService = new MenuService()
 
@@ -98,7 +99,8 @@ export function IconPickerField({ value, onChange, invalid }: IconPickerFieldPro
       {open && (
         <div className="absolute z-50 mt-1 left-0 w-full min-w-[220px] max-w-[min(360px,calc(100vw-2rem))] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-xl">
           <div className="p-2 border-b border-gray-100 dark:border-gray-700 flex items-center gap-2">
-            <input
+            <Input
+              unstyle
               autoFocus
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -336,7 +338,8 @@ export function MenuAddDialog({
               <span className="text-red-500">*</span>
             </label>
             {/* Ad, kodu ve dil anahtarını türetir; düzenlemede kod sabit olduğu için kilitlidir. */}
-            <input
+            <Input
+              unstyle
               autoFocus={!isEditMode}
               disabled={isEditMode}
               value={form.name}
@@ -361,7 +364,8 @@ export function MenuAddDialog({
             <label className={labelCls}>
               {translate('::App.Platform.Code')} <span className="text-red-500">*</span>
             </label>
-            <input
+            <Input
+              unstyle
               value={form.code}
               disabled
               placeholder="App.Wizard.MyMenu"
@@ -388,7 +392,8 @@ export function MenuAddDialog({
               {translate('::App.Platform.DisplayNameEnglish')}{' '}
               <span className="text-red-500">*</span>
             </label>
-            <input
+            <Input
+              unstyle
               value={form.menuTextEn}
               onChange={(e) => setForm((p) => ({ ...p, menuTextEn: e.target.value }))}
               placeholder="My Menu"
@@ -400,7 +405,8 @@ export function MenuAddDialog({
               {translate('::App.Platform.DisplayNameTurkish')}{' '}
               <span className="text-red-500">*</span>
             </label>
-            <input
+            <Input
+              unstyle
               value={form.menuTextTr}
               onChange={(e) => setForm((p) => ({ ...p, menuTextTr: e.target.value }))}
               placeholder={translate('::App.Menu.NamePlaceholder')}
@@ -427,12 +433,13 @@ export function MenuAddDialog({
                 ))}
               </select>
             ) : (
-              <input disabled value={form.parentCode} className={disabledCls} />
+              <Input unstyle disabled value={form.parentCode} className={disabledCls} />
             )}
           </div>
           <div className="flex flex-col">
             <label className={labelCls}>{translate('::App.Listform.ListformField.Order')}</label>
-            <input
+            <Input
+              unstyle
               type="number"
               value={form.order}
               onChange={(e) => setForm((p) => ({ ...p, order: Number(e.target.value) }))}
@@ -453,7 +460,8 @@ export function MenuAddDialog({
               </span>
             )}
           </label>
-          <input
+          <Input
+            unstyle
             value={form.shortName}
             onChange={(e) => setForm((p) => ({ ...p, shortName: e.target.value }))}
             placeholder="Sas, Finance, Hr…"
@@ -469,7 +477,8 @@ export function MenuAddDialog({
           <div className="grid grid-cols-2 gap-4">
             <div className="flex flex-col">
               <label className={labelCls}>{translate('::App.Platform.OpenUrl')}</label>
-              <input
+              <Input
+                unstyle
                 value={form.url}
                 onChange={(e) => setForm((p) => ({ ...p, url: e.target.value }))}
                 placeholder="/admin/list/App.Wizard.MyMenu"
@@ -479,7 +488,8 @@ export function MenuAddDialog({
             <div className="flex flex-col">
               <label className={labelCls}>{translate('::App.Platform.Status')}</label>
               <label className="flex h-9 cursor-pointer items-center gap-2">
-                <input
+                <Input
+                  unstyle
                   type="checkbox"
                   checked={!form.isDisabled}
                   onChange={(e) => setForm((p) => ({ ...p, isDisabled: !e.target.checked }))}