diff --git a/projects/common-form-elements/package.json b/projects/common-form-elements/package.json
index 223bfc39416ec072af5f7a9a767000a89afab9f9..d35dc4ae753a0964358f3a82b277f24720e840f3 100644
--- a/projects/common-form-elements/package.json
+++ b/projects/common-form-elements/package.json
@@ -17,4 +17,4 @@
         "immutable": "^4.0.0-rc.12",
         "moment": "^2.29.1"
     }
-}
\ No newline at end of file
+}
diff --git a/projects/common-form-elements/src/lib/dynamic-textarea/dynamic-textarea.component.ts b/projects/common-form-elements/src/lib/dynamic-textarea/dynamic-textarea.component.ts
index fc8d390ca6fc4f5441ce08259e28e1dec4901a36..b142c083dc1c4cc1846400124206be6692fcd8cb 100644
--- a/projects/common-form-elements/src/lib/dynamic-textarea/dynamic-textarea.component.ts
+++ b/projects/common-form-elements/src/lib/dynamic-textarea/dynamic-textarea.component.ts
@@ -35,5 +35,4 @@ export class DynamicTextareaComponent implements OnInit {
       );
     }
   }
-
 }
diff --git a/projects/common-form-elements/src/lib/form/form.component.html b/projects/common-form-elements/src/lib/form/form.component.html
index 815c81107f0cbbe612d84324ea40c053a657e5dc..6dbf4ebab4d94e294cd225924d2054afe406b34e 100644
--- a/projects/common-form-elements/src/lib/form/form.component.html
+++ b/projects/common-form-elements/src/lib/form/form.component.html
@@ -14,11 +14,12 @@
         [placeHolder]="field?.templateOptions?.placeHolder"
         [isMultiple]="field.templateOptions.multiple"
         [labelHtml]="field.templateOptions.labelHtml"
-        [platform]="platform">
+        [platform]="platform"
+        [config]="field">
       </sb-multiple-dropdown>
     </div>
     <div *ngIf="field.type === FieldConfigInputType.INPUT" [hidden]="field.templateOptions?.hidden || null">
-      <sb-textbox [class]="fieldTemplateClass" tabindex="0" [formControlRef]="formGroup.get(field.code)" [asyncValidation]="field.asyncValidation" [label]="field.templateOptions.label"
+      <sb-textbox [config]="field" [class]="fieldTemplateClass" tabindex="0" [formControlRef]="formGroup.get(field.code)" [asyncValidation]="field.asyncValidation" [label]="field.templateOptions.label"
         [placeholder]="field.templateOptions.placeHolder" [validations]="field.validations" [prefix]="field.templateOptions.prefix"
         [labelHtml]="field.templateOptions.labelHtml">
       </sb-textbox>
diff --git a/projects/common-form-elements/src/lib/icon/caret-down/caret-down.component.html b/projects/common-form-elements/src/lib/icon/caret-down/caret-down.component.html
index 6f3e97253354cb58b36ea7334f187e8a9a833921..d16e899716ec3e7d0ae56ff26fc188c21ad8c29d 100644
--- a/projects/common-form-elements/src/lib/icon/caret-down/caret-down.component.html
+++ b/projects/common-form-elements/src/lib/icon/caret-down/caret-down.component.html
@@ -1,4 +1,4 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="12px" height="12px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
 	 xml:space="preserve">
 <g>
diff --git a/projects/common-form-elements/src/lib/icon/caret-up/caret-up.component.html b/projects/common-form-elements/src/lib/icon/caret-up/caret-up.component.html
index 1892fd39df6c4d84b47b98fab9bf99c41293edf9..f11328585fe4e2db9894fa59242b0c7c45f623f4 100644
--- a/projects/common-form-elements/src/lib/icon/caret-up/caret-up.component.html
+++ b/projects/common-form-elements/src/lib/icon/caret-up/caret-up.component.html
@@ -1,4 +1,4 @@
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      width="12px" height="12px" transform="rotate(180)" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
      xml:space="preserve">
 <g>
diff --git a/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.html b/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.html
index e53bc8d9caa9c1392ac8a4f31e907beeb3079694..14755d92fb19186e19ab5165ce4194be83ddecaa 100644
--- a/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.html
+++ b/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.html
@@ -1,8 +1,8 @@
 <div class="cfe-multiselect-container multi-select-section-app" [ngClass]="{'open': showModalStateDirty && showModal, 'closed': showModalStateDirty && !showModal}">
-  <label class="cfe-multiselect-label input-label" tabindex="0" *ngIf="label">{{label}}</label>
-  <div class="cfe-multiselect-label" *ngIf="labelHtml" [innerHTML]="labelHtml | transposeHtml"></div>
+  <label class="cfe-multiselect-label input-label" tabindex="0" *ngIf="label" for="{{config?.code}}">{{label}}</label>
+  <label class="cfe-multiselect-label" *ngIf="labelHtml" for="{{config?.code}}" [innerHTML]="labelHtml | transposeHtml"></label>
   <ng-container *ngIf="extras?.type === 'dropdown'">
-    <div class="cfe-multiselect-field multi-select-container">
+    <div class="cfe-multiselect-field multi-select-container" id="{{config?.code}}">
       <sb-caret-up *ngIf="showModal" class="cfe-multiselect-field-caret caret-down"  tabindex="0"
                    [attr.disabled]="disabled ? true : ( context ? (context.invalid ? true : null) : null )" (click)="openModal($event)">
       </sb-caret-up>
@@ -75,7 +75,7 @@
   </ng-container>
 
   <ng-container *ngIf="extras?.type === 'pills'">
-    <div class="cfe-multiselect-pills-container">
+    <div class="cfe-multiselect-pills-container" id="{{config?.code}}">
       <div class="cfe-multiselect-pills-item" tabindex="0"
            *ngFor="let option of resolvedOptions; let i=index"
            [ngClass]="{'selected-option':tempValue.includes(option.get('value'))}"
diff --git a/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.scss b/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.scss
index b6adf84e879222a9f6a51049fe5ac6d9f2b44234..38e629581bd5a52dae9a9f1e7115651f3a8873e3 100644
--- a/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.scss
+++ b/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.scss
@@ -3,20 +3,20 @@
 
 :host(:not(.normalize)) {
   label{
-    font-size: 14px;
+    font-size: 0.875rem;
     font-weight: normal;
     margin: 0
   }
 
   .multi-select-container {
     position: relative;
-    margin-bottom: 8px;
+    margin-bottom: 0.5rem;
   }
 
   .multi-select-container .caret-down {
     position: absolute;
-    top: 12px;
-    right: 19px;
+    top: 0.75rem;
+    right: 1.125rem;
     z-index: 0;
   }
 
@@ -34,25 +34,26 @@
     list-style-type: none;
     position: absolute;
     margin: 0;
-    font-size: 14px;
+    font-size: 0.875rem;
     font-weight: bold;
   }
 
   .multi-select-container .list-border {
-    border: 0.5px solid var(--gray-400);
+    border: 0.03125rem solid var(--gray-400);
     padding: 1.3rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     left: 0;
-    height: 40px;
+    height: 2.5rem;
+    background-color: #fff;
   }
 
   .multi-select-container .list-border li {
     float: left;
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 700;
-    margin-left: 4px;
+    margin-left: 0.25rem;
   }
 
   .multi-select-container .dropdown ul {
@@ -61,8 +62,8 @@
 
   .multi-select-container .dropdown li {
     cursor: pointer;
-    padding: 8px;
-    border: 1px solid var(--white);
+    padding: 0.5rem;
+    border: 0.0625rem solid var(--white);
   }
 
   .multi-select-container .dropdown ul {
@@ -80,9 +81,9 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 0rem;
-    padding-left: 8px;
-    padding-bottom: 8px;
-    padding-top: 8px;
+    padding-left: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
   }
 
   .multi-select-container .sb-modal-container {
@@ -126,71 +127,66 @@
 
   .multi-select-container .sb-modal li {
     cursor: pointer;
-    padding-bottom: 8px;
-    padding-top: 8px;
-    padding-left: 16px;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+    padding-left: 1rem;
 
   }
 
   .value-label {
-    width: 270px;
+    width: 16.875rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   .multi-select-container .sb-forms-radio {
-    margin-top: 6px;
+    margin-top: 0.375rem;
   }
 
   .multi-select-container .sb-form-button {
     display: inline;
-    padding: 10px;
+    padding: 0.625rem;
+  }
+  .multi-select-container .sb-btn-primary-outline,.multi-select-container .sb-btn-primary {
+    border: 0.03125rem solid var(--primary-color);
+    border-radius: 0.25rem;
+    padding: 0.625rem 2.5rem;
+    font-size: 1rem;
+    text-transform: uppercase;
+    width: 100%;
   }
-
   .multi-select-container .sb-btn-primary-outline {
     color: var(--primary-color);
     background-color: transparent;
-    border: 0.5px solid var(--primary-color);
-    border-radius: 4px;
-    padding: 10px 40px;
-    font-size: 16px;
-    text-transform: uppercase;
-    width: 100%;
   }
 
   .multi-select-container .sb-btn-primary {
     color: var(--white);
     background-color: var(--primary-color);
-    border: 0.5px solid var(--primary-color);
-    border-radius: 4px;
-    padding: 10px 40px;
-    font-size: 16px;
-    text-transform: uppercase;
-    width: 100%;
   }
 
   .multi-select-container .header {
-    padding: 16px;
-    margin-left: 8px;
+    padding: 1rem;
+    margin-left: 0.5rem;
     font-weight: bold;
   }
 
   .multi-select-container .body {
-    padding-top: 8px;
-    border-bottom: 0.5px solid var(--gray-100);
+    padding-top: 0.5rem;
+    border-bottom: 0.03125rem solid var(--gray-100);
   ;
-    border-top: 0.5px solid var(--gray-100);
-    max-height: 300px;
+    border-top: 0.03125rem solid var(--gray-100);
+    max-height: 18.75rem;
     overflow: scroll;
   }
 
   .list-with-ellipsis:nth-child(3) {
     float: left;
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 700;
-    margin-left: 4px;
-    width: 50px;
+    margin-left: 0.25rem;
+    width: 3.125rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -204,10 +200,10 @@
   .multi-select-container .container {
     display: block;
     position: relative;
-    padding-left: 35px;
-    margin-bottom: 12px;
+    padding-left: 2.1875rem;
+    margin-bottom: 0.75rem;
     cursor: pointer;
-    font-size: 22px;
+    font-size: 1.375rem;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -226,11 +222,11 @@
   /* Create a custom checkbox */
   .checkmark {
     position: absolute;
-    top: 3px;
+    top: 0.1875rem;
     left: 0;
-    height: 15px;
-    width: 15px;
-    border: 0.4px solid var(--black);
+    height: 0.9375rem;
+    width: 0.9375rem;
+    border: 0.03125rem solid var(--black);
   }
 
   /* On mouse-over, add a grey background color */
@@ -257,12 +253,12 @@
 
   /* Style the checkmark/indicator */
   .container .checkmark:after {
-    left: 5px;
+    left: 0.3125rem;
     top: 0px;
-    width: 5px;
-    height: 10px;
+    width: 0.3125rem;
+    height: 0.625rem;
     border: solid var(--white);
-    border-width: 0 2px 2px 0;
+    border-width: 0 0.125rem 0.125rem 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
@@ -272,22 +268,22 @@
     list-style-type: none;
     display: block;
     position: absolute;
-    top: 38px;
+    top: 2.375rem;
     left: 0;
     background-color: white;
     width: 100%;
     z-index: 999;
-    box-shadow: 2px 2px 2px 2px aliceblue;
-    border: 2px solid #80a7ce;
-    max-height: 314px;
+    box-shadow: 0.125rem 0.125rem 0.125rem 0.125rem aliceblue;
+    border: 0.125rem solid #80a7ce;
+    max-height: 19.625rem;
     overflow: scroll;
   }
 
   .sb-modal-dropdown-web ul li {
-    margin-top: 10px;
-    margin-bottom: 8px;
-    padding: 8px;
-    font-size: 13px;
+    margin-top: 0.625rem;
+    margin-bottom: 0.5rem;
+    padding: 0.5rem;
+    font-size: 0.8125rem;
   }
 
   .sb-modal-dropdown-web .selected-option {
@@ -298,7 +294,7 @@
 
   /* width */
   ::-webkit-scrollbar {
-    width: 6px;
+    width: 0.375rem;
   }
 
   /* Track */
diff --git a/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.ts b/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.ts
index fe186b854097e2792566e093f0a56b0e23120d1c..de42f9fe0289fcd4b3e1283303415a204df42378 100644
--- a/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.ts
+++ b/projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.ts
@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {from, Subject} from 'rxjs';
-import {FieldConfigInputType, FieldConfigInputTypeOptionsModelMap, FieldConfigOptionsBuilder} from '../common-form-config';
+import {FieldConfig, FieldConfigInputType, FieldConfigInputTypeOptionsModelMap, FieldConfigOptionsBuilder} from '../common-form-config';
 import {takeUntil, tap} from 'rxjs/operators';
 import {fromJS, List, Map, Set} from 'immutable';
 
@@ -38,6 +38,7 @@ export class MultipleDropdownComponent implements OnInit, OnChanges, OnDestroy {
   @Input() default?: any;
   @Input() contextData: any;
   @Input() dataLoadStatusDelegate: Subject<'LOADING' | 'LOADED'>;
+  @Input() config: FieldConfig<String>;
   showModalStateDirty = false;
   showModal = false;
   tempValue = Set<any>();
@@ -89,7 +90,6 @@ export class MultipleDropdownComponent implements OnInit, OnChanges, OnDestroy {
 
     this.setupOptions();
   }
-
   onSubmit() {
     const finalValue = this.tempValue.toList().toJS();
     this.formControlRef.patchValue(this.isMultiple ? finalValue : finalValue[0]);
diff --git a/projects/common-form-elements/src/lib/textarea/textarea.component.css b/projects/common-form-elements/src/lib/textarea/textarea.component.css
index 30d46a8e54c13fdcbf49ff75a401e1d26407b227..da0abb9b382bd13466459e013b40c372c0b49f94 100644
--- a/projects/common-form-elements/src/lib/textarea/textarea.component.css
+++ b/projects/common-form-elements/src/lib/textarea/textarea.component.css
@@ -1,7 +1,7 @@
 label {
   display: block;
   padding: 8px 0px 0px 0px;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .sb-textarea {
@@ -35,4 +35,4 @@ label {
   font-size: 14px;
   letter-spacing: 0;
   line-height: 20px;
-}
+}
\ No newline at end of file
diff --git a/projects/common-form-elements/src/lib/textarea/textarea.component.html b/projects/common-form-elements/src/lib/textarea/textarea.component.html
index e6df74c98b753855527381283440a2b0ca60b6cd..6343f830c273514f1986cade230f7b20faa6ad86 100644
--- a/projects/common-form-elements/src/lib/textarea/textarea.component.html
+++ b/projects/common-form-elements/src/lib/textarea/textarea.component.html
@@ -1,6 +1,6 @@
 <div class="sb-textarea-container">
-  <label>{{label}}</label>
-  <textarea class="sb-textarea" [formControl]="formControlRef" rows="5" name="sb-textarea" placeholder={{placeholder}}>
+  <label for="{{config?.code}}">{{label}}</label>
+  <textarea id="{{config?.code}}" class="sb-textarea" [formControl]="formControlRef" rows="5" name="sb-textarea" placeholder={{placeholder}}>
   </textarea>
   <div class="remaining-length" *ngIf="remainderValidLength$">
      {{remainderValidLength$ | async}} Characters left
diff --git a/projects/common-form-elements/src/lib/textarea/textarea.component.ts b/projects/common-form-elements/src/lib/textarea/textarea.component.ts
index 3b59cd69b625327be7a7b350faf73685158b94da..f5788a56e0337a493d7097b27ef034aaec65ea86 100644
--- a/projects/common-form-elements/src/lib/textarea/textarea.component.ts
+++ b/projects/common-form-elements/src/lib/textarea/textarea.component.ts
@@ -30,5 +30,4 @@ export class TextareaComponent implements OnInit {
       );
     }
   }
-
 }
diff --git a/projects/common-form-elements/src/lib/textbox/textbox.component.css b/projects/common-form-elements/src/lib/textbox/textbox.component.css
index 39ff0f21cdd9c62fd3189f41a7a0671250cae38b..360abfe8fda406550fd8c59be2f7b6982f1956b4 100644
--- a/projects/common-form-elements/src/lib/textbox/textbox.component.css
+++ b/projects/common-form-elements/src/lib/textbox/textbox.component.css
@@ -1,9 +1,8 @@
 label {
   display: block;
-  font-size: 1rem;
+  font-size: 0.875rem;
   margin: 0;
 }
-
 .sb-textbox {
   width: 100%;
   padding: 8px 16px;
@@ -29,7 +28,6 @@ label {
   font-family: "Noto Sans";
   font-size: 12px;
 }
-
 .async-container{
   text-align: center;
 }
diff --git a/projects/common-form-elements/src/lib/textbox/textbox.component.html b/projects/common-form-elements/src/lib/textbox/textbox.component.html
index 9d38f26bfde330305afa8eb85921edc297662ac4..6a7441389970dfb47bf4349a9c5a15e0f5e26500 100644
--- a/projects/common-form-elements/src/lib/textbox/textbox.component.html
+++ b/projects/common-form-elements/src/lib/textbox/textbox.component.html
@@ -1,12 +1,12 @@
 <div class="sb-input">
-  <label *ngIf="label">{{label}}</label>
-  <div *ngIf="labelHtml" [innerHTML]="labelHtml | transposeHtml"></div>
+  <label for="{{config?.code}}" *ngIf="label">{{label}}</label>
+  <label *ngIf="labelHtml" for="{{config?.code}}" [innerHTML]="labelHtml | transposeHtml"></label>
 
   <div [ngClass]="{'async-text': (asyncValidation && asyncValidation?.trigger), '': (!asyncValidation || !asyncValidation?.trigger)}">
     <div class="prefix" *ngIf="prefix">
       <span>{{prefix}}</span>
     </div>
-    <input [formControl]="formControlRef" class="sb-textbox" placeholder={{placeholder}} type="text">
+    <input id="{{config?.code}}" [formControl]="formControlRef" class="sb-textbox" placeholder={{placeholder}} type="text">
     <div class="async-icons" *ngIf="asyncValidation && asyncValidation?.trigger">
       <sb-green-tick *ngIf="formControlRef.value && formControlRef.status === 'VALID'"></sb-green-tick>
       <sb-red-exclamation *ngIf="formControlRef.value && formControlRef.status !== 'VALID'"></sb-red-exclamation>
diff --git a/projects/common-form-elements/src/lib/textbox/textbox.component.ts b/projects/common-form-elements/src/lib/textbox/textbox.component.ts
index 5c8f0f6c356036951fbfeac259fbfdbfb6d1a932..5f5e8745af51211c216493eaad0cd1be3a2201e0 100644
--- a/projects/common-form-elements/src/lib/textbox/textbox.component.ts
+++ b/projects/common-form-elements/src/lib/textbox/textbox.component.ts
@@ -1,6 +1,6 @@
 import {Component, Input, OnInit, AfterViewInit, OnChanges, ViewChild, ElementRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import { FieldConfigAsyncValidation } from '../common-form-config';
+import { FieldConfig, FieldConfigAsyncValidation } from '../common-form-config';
 
 @Component({
   selector: 'sb-textbox',
@@ -15,6 +15,7 @@ export class TextboxComponent implements OnInit, AfterViewInit, OnChanges {
   @Input() validations?: any;
   @Input() formControlRef?: FormControl;
   @Input() prefix?: String;
+  @Input() config: FieldConfig<String>;
   @ViewChild('validationTrigger') validationTrigger: ElementRef;
 
   constructor() {