diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 86a540d2387..3bf5bc706e8 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -2403,11 +2403,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/settings/form/components/basic-info-section.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/settings/option-card.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
diff --git a/web/app/components/datasets/settings/form/components/__tests__/basic-info-section.spec.tsx b/web/app/components/datasets/settings/form/components/__tests__/basic-info-section.spec.tsx
index 63926bcbcfc..cf8ecbb2928 100644
--- a/web/app/components/datasets/settings/form/components/__tests__/basic-info-section.spec.tsx
+++ b/web/app/components/datasets/settings/form/components/__tests__/basic-info-section.spec.tsx
@@ -202,8 +202,11 @@ describe('BasicInfoSection', () => {
 
     it('should render name input with correct value', () => {
       render(<BasicInfoSection {...defaultProps} />)
-      const nameInput = screen.getByDisplayValue('Test Dataset')
+      const nameInput = screen.getByRole('textbox', {
+        name: 'datasetSettings.form.name',
+      })
       expect(nameInput)!.toBeInTheDocument()
+      expect(nameInput).toHaveValue('Test Dataset')
     })
 
     it('should render description textarea with correct value', () => {
@@ -225,7 +228,9 @@ describe('BasicInfoSection', () => {
       const setName = vi.fn()
       render(<BasicInfoSection {...defaultProps} setName={setName} />)
 
-      const nameInput = screen.getByDisplayValue('Test Dataset')
+      const nameInput = screen.getByRole('textbox', {
+        name: 'datasetSettings.form.name',
+      })
       fireEvent.change(nameInput, { target: { value: 'New Name' } })
 
       expect(setName).toHaveBeenCalledWith('New Name')
@@ -457,8 +462,7 @@ describe('BasicInfoSection', () => {
     it('should have accessible name input', () => {
       render(<BasicInfoSection {...defaultProps} />)
 
-      const nameInput = screen.getByDisplayValue('Test Dataset')
-      expect(nameInput.tagName.toLowerCase()).toBe('input')
+      expect(screen.getByRole('textbox', { name: 'datasetSettings.form.name' })).toBeInTheDocument()
     })
 
     it('should have accessible description textarea', () => {
diff --git a/web/app/components/datasets/settings/form/components/basic-info-section.tsx b/web/app/components/datasets/settings/form/components/basic-info-section.tsx
index c604ba5f97b..b85e9e22631 100644
--- a/web/app/components/datasets/settings/form/components/basic-info-section.tsx
+++ b/web/app/components/datasets/settings/form/components/basic-info-section.tsx
@@ -3,11 +3,11 @@ import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { Member } from '@/models/common'
 import type { DataSet, DatasetPermission, IconInfo } from '@/models/datasets'
 import type { AppIconType } from '@/types/app'
+import { Input } from '@langgenius/dify-ui/input'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Input from '@/app/components/base/input'
 import PermissionSelector from '../../permission-selector'
 
 const rowClass = 'flex gap-x-1'
@@ -73,9 +73,10 @@ const BasicInfoSection = ({
             showEditIcon={!readonly}
           />
           <Input
+            aria-label={t(($) => $['form.name'], { ns: 'datasetSettings' })}
             disabled={!currentDataset?.embedding_available || readonly}
             value={name}
-            onChange={(e) => setName(e.target.value)}
+            onValueChange={(nextValue) => setName(nextValue)}
           />
         </div>
       </div>