diff --git a/src/tedi/components/form/textfield/textfield.module.scss b/src/tedi/components/form/textfield/textfield.module.scss
index fa91f068..a53bbf14 100644
--- a/src/tedi/components/form/textfield/textfield.module.scss
+++ b/src/tedi/components/form/textfield/textfield.module.scss
@@ -54,6 +54,10 @@ $input-padding-right-map: (
 
 .tedi-textfield__inner {
   position: relative;
+
+  &:focus-within {
+    @include mixins.focus-element;
+  }
 }
 
 .tedi-textfield__input {
diff --git a/src/tedi/components/form/textfield/textfield.tsx b/src/tedi/components/form/textfield/textfield.tsx
index ff1de6a5..5366c1c0 100644
--- a/src/tedi/components/form/textfield/textfield.tsx
+++ b/src/tedi/components/form/textfield/textfield.tsx
@@ -305,11 +305,23 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
     };
 
     if (isTextAreaRef(props, inputRef)) {
-      return <textarea {...(sharedProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)} ref={inputRef} />;
+      return (
+        <textarea
+          {...(sharedProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          ref={inputRef}
+          tabIndex={disabled ? -1 : 0}
+        />
+      );
     }
 
     if (isInputRef(props, inputRef)) {
-      return <input {...(sharedProps as React.InputHTMLAttributes<HTMLInputElement>)} ref={inputRef} />;
+      return (
+        <input
+          {...(sharedProps as React.InputHTMLAttributes<HTMLInputElement>)}
+          ref={inputRef}
+          tabIndex={disabled ? -1 : 0}
+        />
+      );
     }
 
     return null;
@@ -395,7 +407,6 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
         onKeyDown={onKeyDown}
         onKeyUp={onKeyUp}
         onClick={onClick}
-        tabIndex={disabled ? -1 : 0}
         ref={innerRef}
       >
         {renderInputElement}