diff --git a/fakemui/fakemui/inputs/TextField.tsx b/fakemui/fakemui/inputs/TextField.tsx
index 16d2c8da2..1ae7e2b0f 100644
--- a/fakemui/fakemui/inputs/TextField.tsx
+++ b/fakemui/fakemui/inputs/TextField.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useId } from 'react'
 import { FormLabel } from './FormLabel'
 import { FormHelperText } from './FormHelperText'
 import { Input, InputProps } from './Input'
@@ -10,13 +10,18 @@ export interface TextFieldProps extends InputProps {
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  ({ label, helperText, error, className = '', ...props }, ref) => (
-    <div className={`text-field ${error ? 'text-field--error' : ''} ${className}`}>
-      {label && <FormLabel>{label}</FormLabel>}
-      <Input ref={ref} error={error} {...props} />
-      {helperText && <FormHelperText error={error}>{helperText}</FormHelperText>}
-    </div>
-  )
+  ({ label, helperText, error, className = '', id: providedId, ...props }, ref) => {
+    const generatedId = useId()
+    const id = providedId ?? generatedId
+    
+    return (
+      <div className={`text-field ${error ? 'text-field--error' : ''} ${className}`}>
+        {label && <FormLabel htmlFor={id}>{label}</FormLabel>}
+        <Input ref={ref} id={id} error={error} {...props} />
+        {helperText && <FormHelperText error={error}>{helperText}</FormHelperText>}
+      </div>
+    )
+  }
 )
 
 TextField.displayName = 'TextField'