diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html
index d2a3e2db4b87f2903f924a9264fa432e2a519852..c11e2cfdb73de1e35a9eb09c2e32846a8cbe4265 100644
--- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html
+++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html
@@ -1,4 +1,8 @@
-<div class="grid grid-cols-2">
-  <label [for]="inputId">{{ label }}</label>
-  <input type="text" [id]="inputId" [name]="inputId" [formControl]="fieldControl" />
-</div>
+<label class="grid grid-cols-2">
+  <span [attr.data-test-id]="'text-field-span-' + label | convertForDataTest">{{ label }}</span>
+  <input
+    [attr.data-test-id]="'text-field-input-' + label | convertForDataTest"
+    type="text"
+    [formControl]="fieldControl"
+  />
+</label>
diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts
index a625d9aa249c5c740313245f0cfce23275fe1ba9..27baea4a3893bd7107800d210579220e9c621f93 100644
--- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts
+++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts
@@ -2,22 +2,26 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TextFieldComponent } from './text-field.component';
 import { getElementFromFixture } from '@alfa-client/test-utils';
 import { ReactiveFormsModule } from '@angular/forms';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
 
 describe('TextFieldComponent', () => {
   let component: TextFieldComponent;
   let fixture: ComponentFixture<TextFieldComponent>;
 
-  const inputId = 'testInputId';
+  const label = 'custom';
+  const span = getDataTestIdOf('text-field-span-' + label);
+  const input = getDataTestIdOf('text-field-input-' + label);
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TextFieldComponent],
+      declarations: [TextFieldComponent, ConvertForDataTestPipe],
       imports: [ReactiveFormsModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TextFieldComponent);
     component = fixture.componentInstance;
-    component.inputId = inputId;
+    component.label = label;
     fixture.detectChanges();
   });
 
@@ -26,12 +30,7 @@ describe('TextFieldComponent', () => {
   });
 
   it('should use label', () => {
-    const label = 'custom';
-    component.label = label;
-
-    fixture.detectChanges();
-
-    const labelElement = getElementFromFixture(fixture, `label[for=${inputId}]`);
+    const labelElement = getElementFromFixture(fixture, span);
     expect(labelElement.textContent).toBe(label);
   });
 
@@ -41,7 +40,7 @@ describe('TextFieldComponent', () => {
 
     fixture.detectChanges();
 
-    const inputElement = getElementFromFixture(fixture, `#${inputId}`);
+    const inputElement = getElementFromFixture(fixture, input);
     expect(inputElement.value).toBe(fieldText);
   });
 });
diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts
index 8cb8bebe63f632f1b3f78dd873291cfa52734065..92abc83d9409865ee79be841d06d3b255c57ff3a 100644
--- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts
+++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts
@@ -6,8 +6,6 @@ import { FormControlEditorAbstractComponent } from 'libs/ui/src/lib/ui/editor/fo
   templateUrl: './text-field.component.html',
 })
 export class TextFieldComponent extends FormControlEditorAbstractComponent {
-  @Input()
-  inputId: string;
   @Input()
   label: string;
 }