diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 40932a2f2d2cac47179e678265aea7d8612bcecc..f7121802cc7617dc5fcef79c7e4aa1b57d02e7ae 100644
--- a/projects/common/app.module.ts
+++ b/projects/common/app.module.ts
@@ -39,7 +39,9 @@ import { DropdownComponent } from './element-components/dropdown.component';
     MatRadioModule,
     MatCheckboxModule,
     ReactiveFormsModule,
-    FormsModule
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule
   ],
   declarations: [
     ButtonComponent,
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index d83f27c0303a36b2cedaa03536ea49bebed312af..1ea51cd9d577f7dbd1e2c51e0d95db1b47829567 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -5,22 +5,24 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-text-field',
   template: `
-      <input *ngIf="elementModel.multiline === false" matInput
-             placeholder="{{elementModel.placeholder}}"
-             [formControl]="formElementControl">
-      <textarea *ngIf="elementModel.multiline === true" matInput
-                placeholder="{{elementModel.placeholder}}"
-                [formControl]="formElementControl"
-                [style.width.px]="elementModel.width"
-                [style.height.px]="elementModel.height"
-                [style.background-color]="elementModel.backgroundColor"
-                [style.color]="elementModel.fontColor"
-                [style.font-family]="elementModel.font"
-                [style.font-size.px]="elementModel.fontSize"
-                [style.font-weight]="elementModel.bold ? 'bold' : ''"
-                [style.font-style]="elementModel.italic ? 'italic' : ''"
-                [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-    </textarea>
+      <mat-form-field>
+        <input *ngIf="elementModel.multiline === false" matInput
+               placeholder="{{elementModel.placeholder}}"
+               [formControl]="formElementControl">
+        <textarea *ngIf="elementModel.multiline === true" matInput
+                  placeholder="{{elementModel.placeholder}}"
+                  [formControl]="formElementControl"
+                  [style.width.px]="elementModel.width"
+                  [style.height.px]="elementModel.height"
+                  [style.background-color]="elementModel.backgroundColor"
+                  [style.color]="elementModel.fontColor"
+                  [style.font-family]="elementModel.font"
+                  [style.font-size.px]="elementModel.fontSize"
+                  [style.font-weight]="elementModel.bold ? 'bold' : ''"
+                  [style.font-style]="elementModel.italic ? 'italic' : ''"
+                  [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+        </textarea>
+      </mat-form-field>
   `
 })
 export class TextFieldComponent extends FormElementComponent {