diff --git a/packages/react/src/components/money-input/money-input.test.tsx.snap b/packages/react/src/components/money-input/money-input.test.tsx.snap
index 8f48aa6938..1a7338f42d 100644
--- a/packages/react/src/components/money-input/money-input.test.tsx.snap
+++ b/packages/react/src/components/money-input/money-input.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c2 {
+.c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -33,56 +33,79 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
 }
 
-.c2::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c2::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #60666E;
 }
 
-.c2:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c2::placeholder {
+.c3::placeholder {
   color: #60666E;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-webkit-input-placeholder {
+.c3:disabled,
+.c3:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-moz-placeholder {
+.c3:disabled,
+.c3:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled:-ms-input-placeholder {
+.c3:disabled,
+.c3:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::placeholder {
+.c3:disabled,
+.c3:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c3:focus,
+.c3:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c2 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -100,15 +123,19 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
     class="c1"
     data-testid="field-container"
   >
-    <input
+    <div
       class="c2"
-      data-testid="text-input"
-      id="uuid1"
-      inputmode="numeric"
-      placeholder="$"
-      type="text"
-      value="$100.00"
-    />
+    >
+      <input
+        class="c3"
+        data-testid="text-input"
+        id="uuid1"
+        inputmode="numeric"
+        placeholder="$"
+        type="text"
+        value="$100.00"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -128,7 +155,7 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c2 {
+.c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -146,56 +173,79 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
 }
 
-.c2::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c2::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #60666E;
 }
 
-.c2:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c2::placeholder {
+.c3::placeholder {
   color: #60666E;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-webkit-input-placeholder {
+.c3:disabled,
+.c3:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-moz-placeholder {
+.c3:disabled,
+.c3:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled:-ms-input-placeholder {
+.c3:disabled,
+.c3:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::placeholder {
+.c3:disabled,
+.c3:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c3:focus,
+.c3:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c2 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -213,15 +263,19 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
     class="c1"
     data-testid="field-container"
   >
-    <input
+    <div
       class="c2"
-      data-testid="text-input"
-      id="uuid1"
-      inputmode="numeric"
-      placeholder="$"
-      type="text"
-      value="$100.00"
-    />
+    >
+      <input
+        class="c3"
+        data-testid="text-input"
+        id="uuid1"
+        inputmode="numeric"
+        placeholder="$"
+        type="text"
+        value="$100.00"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -241,7 +295,7 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c2 {
+.c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -259,56 +313,79 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
 }
 
-.c2::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c2::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #60666E;
 }
 
-.c2:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c2::placeholder {
+.c3::placeholder {
   color: #60666E;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-webkit-input-placeholder {
+.c3:disabled,
+.c3:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-moz-placeholder {
+.c3:disabled,
+.c3:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled:-ms-input-placeholder {
+.c3:disabled,
+.c3:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::placeholder {
+.c3:disabled,
+.c3:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c3:focus,
+.c3:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c2 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -326,15 +403,19 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
     class="c1"
     data-testid="field-container"
   >
-    <input
+    <div
       class="c2"
-      data-testid="text-input"
-      id="uuid1"
-      inputmode="numeric"
-      placeholder="$"
-      type="text"
-      value="100,00 $"
-    />
+    >
+      <input
+        class="c3"
+        data-testid="text-input"
+        id="uuid1"
+        inputmode="numeric"
+        placeholder="$"
+        type="text"
+        value="100,00 $"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index 6f0219ddc3..86bcb8e333 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { IconButton } from '../buttons/icon-button';
 import { FieldContainer } from '../field-container/field-container';
-import { Input } from '../text-input/text-input';
 import { useTranslation } from '../../i18n/use-translation';
 import { Tooltip } from '../tooltip/tooltip';
 import { getPasswordStrength } from './password-strength';
@@ -12,6 +11,7 @@ import { getDefaultValidationConditions, ValidationCondition } from './validatio
 import { v4 as uuid } from '../../utils/uuid';
 import { PasswordStrengthContainer } from './password-strength-container';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { inputsStyle } from '../text-input/styles/inputs';
 
 const StyledUl = styled.ul`
     font-size: 0.75rem;
@@ -26,7 +26,8 @@ const PasswordInputContainer = styled.div`
     position: relative;
 `;
 
-const StyledInput = styled(Input)`
+const StyledInput = styled.input<{ isMobile: boolean }>`
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile, isFocusable: false })};
     padding-right: var(--size-2x);
 `;
 
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 459d17d005..69c406502f 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,23 +41,23 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   user-select: none;
 }
 
-.c6 {
+.c5 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c6:focus {
+.c5:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c6 > svg {
+.c5 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c7 {
+.c6 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
@@ -66,43 +66,43 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: var(--size-1halfx);
 }
 
-.c7 {
+.c6 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus {
+.c6:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c7:hover,
-.c7[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c7[aria-disabled='true'] {
+.c6[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
   cursor: not-allowed;
 }
 
-.c7 > svg {
+.c6 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c10 {
+.c9 {
   height: 1.25rem;
   position: absolute;
   width: 1rem;
 }
 
-.c10::before {
+.c9::before {
   border-style: solid;
   content: '';
   display: block;
@@ -111,7 +111,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 0;
 }
 
-.c10::after {
+.c9::after {
   border-style: solid;
   content: '';
   display: block;
@@ -121,7 +121,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 0;
 }
 
-.c8 {
+.c7 {
   background-color: #60666E;
   border: 1px solid #FFFFFF;
   border-radius: var(--border-radius-half);
@@ -147,7 +147,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   z-index: 1000;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9 {
+.c7[data-popper-placement*="bottom"] > .c8 {
   height: 1rem;
   left: 0;
   margin-top: -0.375rem;
@@ -155,19 +155,19 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::before {
+.c7[data-popper-placement*="bottom"] > .c8::before {
   border-color: transparent transparent #FFFFFF transparent;
   border-width: 0 0.5rem 0.5rem;
   position: absolute;
   top: -2px;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::after {
+.c7[data-popper-placement*="bottom"] > .c8::after {
   border-color: transparent transparent #60666E transparent;
   border-width: 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9 {
+.c7[data-popper-placement*="top"] > .c8 {
   bottom: 0;
   height: 0;
   left: 0;
@@ -175,58 +175,58 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9::before {
+.c7[data-popper-placement*="top"] > .c8::before {
   border-color: #FFFFFF transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   position: absolute;
   top: 0;
 }
 
-.c8[data-popper-placement*="top"] > .c9::after {
+.c7[data-popper-placement*="top"] > .c8::after {
   border-color: #60666E transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   top: -0.1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9 {
+.c7[data-popper-placement*="right"] > .c8 {
   height: 1rem;
   left: 0;
   margin-left: -0.8rem;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9::before {
+.c7[data-popper-placement*="right"] > .c8::before {
   border-color: transparent #FFFFFF transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
 }
 
-.c8[data-popper-placement*="right"] > .c9::after {
+.c7[data-popper-placement*="right"] > .c8::after {
   border-color: transparent #60666E transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
   left: 0.375rem;
   top: 0;
 }
 
-.c8[data-popper-placement*="left"] > .c9 {
+.c7[data-popper-placement*="left"] > .c8 {
   height: 1rem;
   margin-right: -0.7rem;
   right: -1px;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::before {
+.c7[data-popper-placement*="left"] > .c8::before {
   border-color: transparent transparent transparent #FFFFFF;
   border-width: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::after {
+.c7[data-popper-placement*="left"] > .c8::after {
   border-color: transparent transparent transparent #60666E;
   border-width: 0.5rem 0 0.5rem 0.5rem;
   left: 0.17rem;
   top: 0;
 }
 
-.c11 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -237,7 +237,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   display: flex;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -251,12 +251,12 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: fit-content;
 }
 
-.c5 {
+.c4 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c5:focus {
+.c4:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -276,6 +276,18 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
 .c2 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -294,6 +306,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  padding-right: var(--size-2x);
 }
 
 .c2::-webkit-input-placeholder {
@@ -338,34 +351,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   color: #B7BBC2;
 }
 
-.c2 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c2:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
 .c3 {
-  padding-right: var(--size-2x);
-}
-
-.c4 {
   position: absolute;
   right: 0.25rem;
 }
@@ -379,7 +365,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
     <input
       aria-invalid="false"
       autocomplete="current-password"
-      class="c2 c3"
+      class="c2"
       data-testid="password-input"
       disabled=""
       id="uuid1"
@@ -388,11 +374,11 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
       value="Pass123"
     />
     <div
-      class="c4"
+      class="c3"
     >
       <span
         aria-describedby="uuid2"
-        class="c5"
+        class="c4"
         data-testid="tooltip"
         id="tooltip-trigger-uuid2"
         tabindex="-1"
@@ -400,7 +386,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
         <button
           aria-label="Show password in plain text."
           aria-pressed="false"
-          class="c6 c7"
+          class="c5 c6"
           data-testid="show-password-button"
           disabled=""
           type="button"
@@ -416,7 +402,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
       </span>
       <div
         aria-hidden="true"
-        class="c8"
+        class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
         id="uuid2"
@@ -424,12 +410,12 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
         style="position:absolute;left:0;top:0"
       >
         <div
-          class="c9 c10"
+          class="c8 c9"
           data-popper-arrow="true"
           style="position:absolute"
         />
         <div
-          class="c11"
+          class="c10"
         >
           Show password in plain text.
         </div>
@@ -440,7 +426,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 `;
 
 exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -480,23 +466,23 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   user-select: none;
 }
 
-.c8 {
+.c7 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c8:focus {
+.c7:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c8 > svg {
+.c7 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c9 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
@@ -505,32 +491,32 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: var(--size-1halfx);
 }
 
-.c9 {
+.c8 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c9:focus {
+.c8:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c9:hover,
-.c9[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c9[aria-disabled='true'] {
+.c8[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
   cursor: not-allowed;
 }
 
-.c9 > svg {
+.c8 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -561,13 +547,13 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   margin-right: var(--spacing-base);
 }
 
-.c12 {
+.c11 {
   height: 1.25rem;
   position: absolute;
   width: 1rem;
 }
 
-.c12::before {
+.c11::before {
   border-style: solid;
   content: '';
   display: block;
@@ -576,7 +562,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 0;
 }
 
-.c12::after {
+.c11::after {
   border-style: solid;
   content: '';
   display: block;
@@ -586,7 +572,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 0;
 }
 
-.c10 {
+.c9 {
   background-color: #60666E;
   border: 1px solid #FFFFFF;
   border-radius: var(--border-radius-half);
@@ -612,7 +598,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   z-index: 1000;
 }
 
-.c10[data-popper-placement*="bottom"] > .c11 {
+.c9[data-popper-placement*="bottom"] > .c10 {
   height: 1rem;
   left: 0;
   margin-top: -0.375rem;
@@ -620,19 +606,19 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 1rem;
 }
 
-.c10[data-popper-placement*="bottom"] > .c11::before {
+.c9[data-popper-placement*="bottom"] > .c10::before {
   border-color: transparent transparent #FFFFFF transparent;
   border-width: 0 0.5rem 0.5rem;
   position: absolute;
   top: -2px;
 }
 
-.c10[data-popper-placement*="bottom"] > .c11::after {
+.c9[data-popper-placement*="bottom"] > .c10::after {
   border-color: transparent transparent #60666E transparent;
   border-width: 0 0.5rem 0.5rem;
 }
 
-.c10[data-popper-placement*="top"] > .c11 {
+.c9[data-popper-placement*="top"] > .c10 {
   bottom: 0;
   height: 0;
   left: 0;
@@ -640,58 +626,58 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 1rem;
 }
 
-.c10[data-popper-placement*="top"] > .c11::before {
+.c9[data-popper-placement*="top"] > .c10::before {
   border-color: #FFFFFF transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   position: absolute;
   top: 0;
 }
 
-.c10[data-popper-placement*="top"] > .c11::after {
+.c9[data-popper-placement*="top"] > .c10::after {
   border-color: #60666E transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   top: -0.1rem;
 }
 
-.c10[data-popper-placement*="right"] > .c11 {
+.c9[data-popper-placement*="right"] > .c10 {
   height: 1rem;
   left: 0;
   margin-left: -0.8rem;
   width: 1rem;
 }
 
-.c10[data-popper-placement*="right"] > .c11::before {
+.c9[data-popper-placement*="right"] > .c10::before {
   border-color: transparent #FFFFFF transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
 }
 
-.c10[data-popper-placement*="right"] > .c11::after {
+.c9[data-popper-placement*="right"] > .c10::after {
   border-color: transparent #60666E transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
   left: 0.375rem;
   top: 0;
 }
 
-.c10[data-popper-placement*="left"] > .c11 {
+.c9[data-popper-placement*="left"] > .c10 {
   height: 1rem;
   margin-right: -0.7rem;
   right: -1px;
   width: 1rem;
 }
 
-.c10[data-popper-placement*="left"] > .c11::before {
+.c9[data-popper-placement*="left"] > .c10::before {
   border-color: transparent transparent transparent #FFFFFF;
   border-width: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.c10[data-popper-placement*="left"] > .c11::after {
+.c9[data-popper-placement*="left"] > .c10::after {
   border-color: transparent transparent transparent #60666E;
   border-width: 0.5rem 0 0.5rem 0.5rem;
   left: 0.17rem;
   top: 0;
 }
 
-.c13 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -702,7 +688,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   display: flex;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -716,12 +702,12 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: fit-content;
 }
 
-.c7 {
+.c6 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus {
+.c6:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -741,6 +727,18 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
 .c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -759,6 +757,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  padding-right: var(--size-2x);
 }
 
 .c4::-webkit-input-placeholder {
@@ -803,34 +802,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   color: #B7BBC2;
 }
 
-.c4 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c4:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c3 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
 .c5 {
-  padding-right: var(--size-2x);
-}
-
-.c6 {
   position: absolute;
   right: 0.25rem;
 }
@@ -860,7 +832,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
     <input
       aria-invalid="true"
       autocomplete="current-password"
-      class="c4 c5"
+      class="c4"
       data-testid="password-input"
       id="uuid1"
       name="password"
@@ -868,11 +840,11 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       value="Pass123"
     />
     <div
-      class="c6"
+      class="c5"
     >
       <span
         aria-describedby="uuid2"
-        class="c7"
+        class="c6"
         data-testid="tooltip"
         id="tooltip-trigger-uuid2"
         tabindex="-1"
@@ -880,7 +852,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
         <button
           aria-label="Show password in plain text."
           aria-pressed="false"
-          class="c8 c9"
+          class="c7 c8"
           data-testid="show-password-button"
           type="button"
         >
@@ -895,7 +867,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       </span>
       <div
         aria-hidden="true"
-        class="c10"
+        class="c9"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
         id="uuid2"
@@ -903,12 +875,12 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
         style="position:absolute;left:0;top:0"
       >
         <div
-          class="c11 c12"
+          class="c10 c11"
           data-popper-arrow="true"
           style="position:absolute"
         />
         <div
-          class="c13"
+          class="c12"
         >
           Show password in plain text.
         </div>
@@ -919,7 +891,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 `;
 
 exports[`PasswordInput matches the snapshot (Normal) 1`] = `
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -959,23 +931,23 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   user-select: none;
 }
 
-.c6 {
+.c5 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c6:focus {
+.c5:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c6 > svg {
+.c5 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c7 {
+.c6 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
@@ -984,43 +956,43 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: var(--size-1halfx);
 }
 
-.c7 {
+.c6 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus {
+.c6:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c7:hover,
-.c7[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c7[aria-disabled='true'] {
+.c6[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
   cursor: not-allowed;
 }
 
-.c7 > svg {
+.c6 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c10 {
+.c9 {
   height: 1.25rem;
   position: absolute;
   width: 1rem;
 }
 
-.c10::before {
+.c9::before {
   border-style: solid;
   content: '';
   display: block;
@@ -1029,7 +1001,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 0;
 }
 
-.c10::after {
+.c9::after {
   border-style: solid;
   content: '';
   display: block;
@@ -1039,7 +1011,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 0;
 }
 
-.c8 {
+.c7 {
   background-color: #60666E;
   border: 1px solid #FFFFFF;
   border-radius: var(--border-radius-half);
@@ -1065,7 +1037,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   z-index: 1000;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9 {
+.c7[data-popper-placement*="bottom"] > .c8 {
   height: 1rem;
   left: 0;
   margin-top: -0.375rem;
@@ -1073,19 +1045,19 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::before {
+.c7[data-popper-placement*="bottom"] > .c8::before {
   border-color: transparent transparent #FFFFFF transparent;
   border-width: 0 0.5rem 0.5rem;
   position: absolute;
   top: -2px;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::after {
+.c7[data-popper-placement*="bottom"] > .c8::after {
   border-color: transparent transparent #60666E transparent;
   border-width: 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9 {
+.c7[data-popper-placement*="top"] > .c8 {
   bottom: 0;
   height: 0;
   left: 0;
@@ -1093,58 +1065,58 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9::before {
+.c7[data-popper-placement*="top"] > .c8::before {
   border-color: #FFFFFF transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   position: absolute;
   top: 0;
 }
 
-.c8[data-popper-placement*="top"] > .c9::after {
+.c7[data-popper-placement*="top"] > .c8::after {
   border-color: #60666E transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   top: -0.1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9 {
+.c7[data-popper-placement*="right"] > .c8 {
   height: 1rem;
   left: 0;
   margin-left: -0.8rem;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9::before {
+.c7[data-popper-placement*="right"] > .c8::before {
   border-color: transparent #FFFFFF transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
 }
 
-.c8[data-popper-placement*="right"] > .c9::after {
+.c7[data-popper-placement*="right"] > .c8::after {
   border-color: transparent #60666E transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
   left: 0.375rem;
   top: 0;
 }
 
-.c8[data-popper-placement*="left"] > .c9 {
+.c7[data-popper-placement*="left"] > .c8 {
   height: 1rem;
   margin-right: -0.7rem;
   right: -1px;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::before {
+.c7[data-popper-placement*="left"] > .c8::before {
   border-color: transparent transparent transparent #FFFFFF;
   border-width: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::after {
+.c7[data-popper-placement*="left"] > .c8::after {
   border-color: transparent transparent transparent #60666E;
   border-width: 0.5rem 0 0.5rem 0.5rem;
   left: 0.17rem;
   top: 0;
 }
 
-.c11 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1155,7 +1127,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   display: flex;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1169,12 +1141,12 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: fit-content;
 }
 
-.c5 {
+.c4 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c5:focus {
+.c4:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -1194,6 +1166,18 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
 .c2 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -1212,6 +1196,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  padding-right: var(--size-2x);
 }
 
 .c2::-webkit-input-placeholder {
@@ -1256,34 +1241,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   color: #B7BBC2;
 }
 
-.c2 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c2:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
 .c3 {
-  padding-right: var(--size-2x);
-}
-
-.c4 {
   position: absolute;
   right: 0.25rem;
 }
@@ -1297,7 +1255,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
     <input
       aria-invalid="false"
       autocomplete="current-password"
-      class="c2 c3"
+      class="c2"
       data-testid="password-input"
       id="uuid1"
       name="password"
@@ -1305,11 +1263,11 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
       value="Pass123"
     />
     <div
-      class="c4"
+      class="c3"
     >
       <span
         aria-describedby="uuid2"
-        class="c5"
+        class="c4"
         data-testid="tooltip"
         id="tooltip-trigger-uuid2"
         tabindex="-1"
@@ -1317,7 +1275,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
         <button
           aria-label="Show password in plain text."
           aria-pressed="false"
-          class="c6 c7"
+          class="c5 c6"
           data-testid="show-password-button"
           type="button"
         >
@@ -1332,7 +1290,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
       </span>
       <div
         aria-hidden="true"
-        class="c8"
+        class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
         id="uuid2"
@@ -1340,12 +1298,12 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
         style="position:absolute;left:0;top:0"
       >
         <div
-          class="c9 c10"
+          class="c8 c9"
           data-popper-arrow="true"
           style="position:absolute"
         />
         <div
-          class="c11"
+          class="c10"
         >
           Show password in plain text.
         </div>
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index 483adb9c03..995f9eefdb 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -13,8 +13,8 @@ import { v4 as uuid } from '../../utils/uuid';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
-import { Input } from '../text-input/text-input';
 import { Tooltip } from '../tooltip/tooltip';
+import { inputsStyle } from '../text-input/styles/inputs';
 
 interface PasswordInputProps {
     id?: string;
@@ -37,7 +37,8 @@ const PasswordInputContainer = styled.div`
     position: relative;
 `;
 
-const StyledInput = styled(Input)`
+const StyledInput = styled.input<{ isMobile: boolean }>`
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile, isFocusable: false })};
     padding-right: var(--size-2x);
 `;
 
diff --git a/packages/react/src/components/text-input/text-input.test.tsx b/packages/react/src/components/text-input/text-input.test.tsx
index fd47712801..ccff23e80a 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx
+++ b/packages/react/src/components/text-input/text-input.test.tsx
@@ -4,6 +4,7 @@ import { doNothing } from '../../test-utils/callbacks';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithTheme, renderWithTheme } from '../../test-utils/renderer';
 import { TextInput } from './text-input';
+import { Icon } from '../icon/icon';
 
 describe('TextInput', () => {
     const initialProps = {
@@ -186,6 +187,55 @@ describe('TextInput', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    test('Matches the snapshot adornment text', () => {
+        const tree = renderWithTheme(
+            <TextInput
+                label="Telephone"
+                pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+                placeholder="Ex.: 555-123-4567"
+                type="tel"
+                validationErrorMessage="Please enter a valid phone number"
+                defaultValue="foo"
+                leftAdornment='#'
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Matches the snapshot adornment icon', () => {
+        const tree = renderWithTheme(
+            <TextInput
+                label="Telephone"
+                pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+                placeholder="Ex.: 555-123-4567"
+                type="tel"
+                validationErrorMessage="Please enter a valid phone number"
+                defaultValue="foo"
+                leftAdornment={<Icon name='phone' />}
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('matches the snapshot (Normal - Adornment at end)', () => {
+        const tree = renderWithTheme(
+            <TextInput
+                label="Telephone"
+                pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+                placeholder="Ex.: 555-123-4567"
+                type="tel"
+                validationErrorMessage="Please enter a valid phone number"
+                defaultValue="foo"
+                leftAdornment='#'
+                rightAdornment='end'
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+
     test('Matches the snapshot [disabled = true]', () => {
         const tree = renderWithTheme(
             <TextInput
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 1974734edd..56cf4e0e81 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -35,7 +35,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c3 {
+.c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -53,56 +53,81 @@ input + .c1 {
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
 }
 
-.c3::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c3::-moz-placeholder {
+.c4::-moz-placeholder {
   color: #60666E;
 }
 
-.c3:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c3::placeholder {
+.c4::placeholder {
   color: #60666E;
 }
 
-.c3:disabled {
+.c4:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-webkit-input-placeholder {
+.c4:disabled,
+.c4:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-moz-placeholder {
+.c4:disabled,
+.c4:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled:-ms-input-placeholder {
+.c4:disabled,
+.c4:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::placeholder {
+.c4:disabled,
+.c4:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c4:focus,
+.c4:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+}
+
 .c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c3:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -119,16 +144,20 @@ input + .c1 {
   >
     Telephone
   </label>
-  <input
+  <div
     class="c3"
-    data-testid="text-input"
-    disabled=""
-    id="uuid1"
-    pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
-    placeholder="Ex.: 555-123-4567"
-    type="tel"
-    value="foo"
-  />
+  >
+    <input
+      class="c4"
+      data-testid="text-input"
+      disabled=""
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
 </div>
 `;
 
@@ -167,7 +196,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c3 {
+.c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -185,56 +214,79 @@ input + .c1 {
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
 }
 
-.c3::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c3::-moz-placeholder {
+.c4::-moz-placeholder {
   color: #60666E;
 }
 
-.c3:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c3::placeholder {
+.c4::placeholder {
   color: #60666E;
 }
 
-.c3:disabled {
+.c4:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-webkit-input-placeholder {
+.c4:disabled,
+.c4:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-moz-placeholder {
+.c4:disabled,
+.c4:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled:-ms-input-placeholder {
+.c4:disabled,
+.c4:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::placeholder {
+.c4:disabled,
+.c4:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c4:focus,
+.c4:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c3:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -251,16 +303,20 @@ input + .c1 {
   >
     Telephone (required)
   </label>
-  <input
+  <div
     class="c3"
-    data-testid="text-input"
-    id="uuid1"
-    pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
-    placeholder="Ex.: 555-123-4567"
-    required=""
-    type="tel"
-    value="foo"
-  />
+  >
+    <input
+      class="c4"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      required=""
+      type="tel"
+      value="foo"
+    />
+  </div>
 </div>
 `;
 
@@ -299,7 +355,165 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
+.c4 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  color: #1B1C1E;
+  font-family: inherit;
+  font-size: 0.875rem;
+  -webkit-letter-spacing: 0.015rem;
+  -moz-letter-spacing: 0.015rem;
+  -ms-letter-spacing: 0.015rem;
+  letter-spacing: 0.015rem;
+  line-height: 1.5rem;
+  margin: 0;
+  min-height: var(--size-2x);
+  outline: none;
+  padding: 0 var(--spacing-1x);
+  width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+}
+
+.c4::-webkit-input-placeholder {
+  color: #60666E;
+}
+
+.c4::-moz-placeholder {
+  color: #60666E;
+}
+
+.c4:-ms-input-placeholder {
+  color: #60666E;
+}
+
+.c4::placeholder {
+  color: #60666E;
+}
+
+.c4:disabled {
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled::-webkit-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled::-moz-placeholder {
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled:-ms-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled::placeholder {
+  color: #B7BBC2;
+}
+
+.c4:focus,
+.c4:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
 .c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus-within {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<div
+  class="c0"
+  data-testid="field-container"
+>
+  <label
+    class="c1 c2"
+    for="uuid1"
+    id="uuid1_label"
+  >
+    Telephone
+  </label>
+  <div
+    class="c3"
+  >
+    <input
+      class="c4"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput Matches the snapshot adornment icon 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+.c6 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -317,56 +531,102 @@ input + .c1 {
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
 }
 
-.c3::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c3::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #60666E;
 }
 
-.c3:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c3::placeholder {
+.c6::placeholder {
   color: #60666E;
 }
 
-.c3:disabled {
+.c6:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-webkit-input-placeholder {
+.c6:disabled,
+.c6:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-moz-placeholder {
+.c6:disabled,
+.c6:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled:-ms-input-placeholder {
+.c6:disabled,
+.c6:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::placeholder {
+.c6:disabled,
+.c6:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c6:focus,
+.c6:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.c5 {
+  padding-left: var(--spacing-1x);
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c3:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -383,14 +643,409 @@ input + .c1 {
   >
     Telephone
   </label>
-  <input
+  <div
     class="c3"
-    data-testid="text-input"
-    id="uuid1"
-    pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
-    placeholder="Ex.: 555-123-4567"
-    type="tel"
-    value="foo"
-  />
+  >
+    <span
+      class="c4 c5"
+    >
+      <svg
+        color="currentColor"
+        focusable="false"
+        height="24"
+        width="24"
+      />
+    </span>
+    <input
+      class="c6"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput Matches the snapshot adornment text 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+.c6 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  color: #1B1C1E;
+  font-family: inherit;
+  font-size: 0.875rem;
+  -webkit-letter-spacing: 0.015rem;
+  -moz-letter-spacing: 0.015rem;
+  -ms-letter-spacing: 0.015rem;
+  letter-spacing: 0.015rem;
+  line-height: 1.5rem;
+  margin: 0;
+  min-height: var(--size-2x);
+  outline: none;
+  padding: 0 var(--spacing-1x);
+  width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+}
+
+.c6::-webkit-input-placeholder {
+  color: #60666E;
+}
+
+.c6::-moz-placeholder {
+  color: #60666E;
+}
+
+.c6:-ms-input-placeholder {
+  color: #60666E;
+}
+
+.c6::placeholder {
+  color: #60666E;
+}
+
+.c6:disabled {
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled::-webkit-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled::-moz-placeholder {
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled:-ms-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled::placeholder {
+  color: #B7BBC2;
+}
+
+.c6:focus,
+.c6:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.c5 {
+  padding-left: var(--spacing-1x);
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus-within {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<div
+  class="c0"
+  data-testid="field-container"
+>
+  <label
+    class="c1 c2"
+    for="uuid1"
+    id="uuid1_label"
+  >
+    Telephone
+  </label>
+  <div
+    class="c3"
+  >
+    <span
+      class="c4 c5"
+    >
+      #
+    </span>
+    <input
+      class="c6"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput matches the snapshot (Normal - Adornment at end) 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+.c6 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  color: #1B1C1E;
+  font-family: inherit;
+  font-size: 0.875rem;
+  -webkit-letter-spacing: 0.015rem;
+  -moz-letter-spacing: 0.015rem;
+  -ms-letter-spacing: 0.015rem;
+  letter-spacing: 0.015rem;
+  line-height: 1.5rem;
+  margin: 0;
+  min-height: var(--size-2x);
+  outline: none;
+  padding: 0 var(--spacing-1x);
+  width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+}
+
+.c6::-webkit-input-placeholder {
+  color: #60666E;
+}
+
+.c6::-moz-placeholder {
+  color: #60666E;
+}
+
+.c6:-ms-input-placeholder {
+  color: #60666E;
+}
+
+.c6::placeholder {
+  color: #60666E;
+}
+
+.c6:disabled {
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled::-webkit-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled::-moz-placeholder {
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled:-ms-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c6:disabled,
+.c6:disabled::placeholder {
+  color: #B7BBC2;
+}
+
+.c6:focus,
+.c6:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.c5 {
+  padding-left: var(--spacing-1x);
+}
+
+.c7 {
+  padding-right: var(--spacing-1x);
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus-within {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<div
+  class="c0"
+  data-testid="field-container"
+>
+  <label
+    class="c1 c2"
+    for="uuid1"
+    id="uuid1_label"
+  >
+    Telephone
+  </label>
+  <div
+    class="c3"
+  >
+    <span
+      class="c4 c5"
+    >
+      #
+    </span>
+    <input
+      class="c6"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+    <span
+      class="c4 c7"
+    >
+      end
+    </span>
+  </div>
 </div>
 `;
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index 731ee6cc6b..4fd0e5e5ab 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -8,12 +8,15 @@ import {
     KeyboardEvent,
     MouseEvent,
     ReactElement,
+    ReactNode,
     Ref,
     useCallback,
     useEffect,
+    useImperativeHandle,
+    useRef,
     useState,
 } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
@@ -22,9 +25,69 @@ import { TooltipProps } from '../tooltip/tooltip';
 import { inputsStyle } from './styles/inputs';
 import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';
 import { useId } from '../../hooks/use-id';
+import { focus } from '../../utils/css-state';
 
-export const Input = styled.input<{ isMobile: boolean; }>`
-    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile })}
+const StyleInput = styled.input<{ isMobile: boolean }>`
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile, isFocusable: false })};
+    border: 0;
+    flex: 1 1 auto;
+    min-height: 100%;
+    &:focus,
+    &:disabled {
+        border: 0;
+        box-shadow: none;
+    }
+`;
+
+interface AdornmentProps {
+    $isMobile: boolean;
+}
+
+const Adornment = styled.span<AdornmentProps>`
+    align-self: center;
+    color: ${({ theme }) => theme.component['text-input-adornment-color']};
+    display: flex;
+    flex-shrink: 0;
+
+    > svg {
+        height: ${({ $isMobile }) => ($isMobile ? '24px' : '16px')};
+        width: ${({ $isMobile }) => ($isMobile ? '24px' : '16px')};
+    }
+`;
+
+const LeftAdornment = styled(Adornment)`
+    padding-left: var(--spacing-1x);
+`;
+const RightAdornment = styled(Adornment)`
+    padding-right: var(--spacing-1x);
+`;
+
+interface StyledWrapperProps {
+    $disabled?: boolean;
+    $valid?: boolean;
+}
+
+const StyleWrapper = styled.div<StyledWrapperProps>`
+    background: ${({ theme }) => theme.component['text-input-background-color']};
+    border: 1px solid ${({ theme }) => theme.component['text-input-border-color']};
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    display: flex;
+    height: var(--size-2x);
+
+    ${({ theme }) => focus({ theme }, { focusType: 'focus-within' })};
+
+    ${({ $valid, theme }) => !$valid && css`
+        border-color: ${theme.component['text-input-error-border-color']};
+`};
+    ${({ $disabled, theme }) => $disabled && css`
+        background-color: ${theme.component['text-input-disabled-background-color']};
+        border-color: ${theme.component['text-input-disabled-border-color']};
+
+        ${Adornment} {
+            color: ${theme.component['text-input-disabled-adornment-text-color']};
+        }
+    `};
 `;
 
 type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
@@ -40,10 +103,12 @@ interface TextInputProps extends PartialInputProps {
     noMargin?: boolean;
     id?: string;
     label?: string;
+    leftAdornment?: ReactNode;
     tooltip?: TooltipProps;
     pattern?: string;
     placeholder?: string;
     required?: boolean;
+    rightAdornment?: ReactNode;
     type?: string;
     valid?: boolean;
     validationErrorMessage?: string;
@@ -72,12 +137,14 @@ export const TextInput = forwardRef(({
     id: providedId,
     inputMode,
     label,
+    leftAdornment,
     tooltip,
     name,
     noMargin,
     pattern,
     placeholder,
     required,
+    rightAdornment,
     type,
     valid,
     validationErrorMessage,
@@ -96,6 +163,7 @@ export const TextInput = forwardRef(({
     const [{ validity }, setValidity] = useState({ validity: valid ?? true });
     const fieldId = useId(providedId);
     const dataAttributes = useDataAttributes(otherProps);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     const processedAriaDescribedBy = useAriaConditionalIds([
         { id: ariaDescribedBy },
@@ -131,6 +199,11 @@ export const TextInput = forwardRef(({
         }
     }, [onFocus]);
 
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+    const handleAdornmentClick = (): void => {
+        inputRef.current?.focus();
+    };
+
     useEffect(() => {
         if (valid !== undefined) {
             setValidity({ validity: valid });
@@ -150,32 +223,52 @@ export const TextInput = forwardRef(({
             hint={hint}
             data-testid="field-container"
         >
-            <Input
-                aria-describedby={processedAriaDescribedBy || undefined}
-                aria-invalid={ariaInvalid}
-                autoComplete={autoComplete}
-                data-testid="text-input"
-                isMobile={isMobile}
-                defaultValue={defaultValue}
-                disabled={disabled}
-                id={fieldId}
-                inputMode={inputMode}
-                name={name}
-                ref={ref}
-                onBlur={handleBlur}
-                onChange={handleChange}
-                onFocus={handleFocus}
-                onMouseUp={onMouseUp}
-                onKeyUp={onKeyUp}
-                onKeyDown={onKeyDown}
-                onInvalid={handleOnInvalid}
-                pattern={pattern}
-                placeholder={placeholder}
-                required={required}
-                type={type || 'text'}
-                value={value}
-                {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
-            />
+            <StyleWrapper $disabled={disabled} $valid={validity}>
+                {leftAdornment && (
+                    <LeftAdornment
+                        onClick={handleAdornmentClick}
+                        $isMobile={isMobile}
+                    >
+                        {leftAdornment}
+                    </LeftAdornment>
+                )}
+
+                <StyleInput
+                    aria-describedby={processedAriaDescribedBy || undefined}
+                    aria-invalid={ariaInvalid}
+                    autoComplete={autoComplete}
+                    data-testid="text-input"
+                    isMobile={isMobile}
+                    defaultValue={defaultValue}
+                    disabled={disabled}
+                    id={fieldId}
+                    inputMode={inputMode}
+                    name={name}
+                    ref={inputRef}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    onFocus={handleFocus}
+                    onMouseUp={onMouseUp}
+                    onKeyUp={onKeyUp}
+                    onKeyDown={onKeyDown}
+                    onInvalid={handleOnInvalid}
+                    pattern={pattern}
+                    placeholder={placeholder}
+                    required={required}
+                    type={type || 'text'}
+                    value={value}
+                    {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
+                />
+                {rightAdornment && (
+                    <RightAdornment
+                        onClick={handleAdornmentClick}
+                        $isMobile={isMobile}
+                    >
+                        {rightAdornment}
+                    </RightAdornment>
+                )}
+
+            </StyleWrapper>
         </FieldContainer>
     );
 });
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index c28cf83442..e1e4d6b8c3 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -10,7 +10,9 @@ export type TextInputTokens =
     | 'text-input-disabled-background-color'
     | 'text-input-disabled-border-color'
     | 'text-input-disabled-text-color'
-    | 'text-input-placeholder-disabled-text-color';
+    | 'text-input-placeholder-disabled-text-color'
+    | 'text-input-disabled-adornment-text-color'
+    | 'text-input-adornment-color';
 
 export type TextInputTokenValue = AliasTokens | RefTokens;
 
@@ -32,4 +34,8 @@ export const defaultTextInputTokens: TextInputTokenMap = {
 
     'text-input-placeholder-text-color': 'color-control-auxiliary',
     'text-input-placeholder-disabled-text-color': 'color-control-auxiliary-disabled',
+
+    'text-input-disabled-adornment-text-color': 'color-control-auxiliary-disabled',
+
+    'text-input-adornment-color': 'color-control-auxiliary',
 };
diff --git a/packages/storybook/stories/text-input.mdx b/packages/storybook/stories/text-input.mdx
index c59edce886..6852ef5801 100644
--- a/packages/storybook/stories/text-input.mdx
+++ b/packages/storybook/stories/text-input.mdx
@@ -11,25 +11,31 @@ import * as TextInputStories  from './text-input.stories';
 4. [Properties](#properties)
 
 ## Definition
-Text input allows users to enter a single line of text into a form. 
+- Text input allows users to enter a single line of text into a form.
 <Canvas of={TextInputStories.Default} />
 
 ## Usage
-### When to use 
+### When to use
 - Use to enter a short text (usually one or two words) [1].
     - E.g. Name, Last Name, Role, Organization, etc.
 - Use for input that needs unique information that cannot be predicted with a preset of options [2]
 - Use to input data that can be entered more quickly in a free-hand format versus a more complex control [2].
 
-### When not to use 
+### When not to use
 - Do not use for numeric inputs, date input, passwords or long text strings.
     - For long text strings, consider using the text area component.
 - Do not use if a user can only enter an option from a predefined list as it is likely to result in an error. Consider using a control component such as a dropdown, select, or radio button group instead [2].
 
-## Variants 
+## Variants
 ### Default
 <Canvas of={TextInputStories.Default} />
 
+### With icon as adornment
+<Canvas of={TextInputStories.IconAsAdornment} />
+
+### With text as adornment
+<Canvas of={TextInputStories.TextAsAdornment} />
+
 ## Properties
 <ArgTypes of={TextInput} />
 
diff --git a/packages/storybook/stories/text-input.stories.tsx b/packages/storybook/stories/text-input.stories.tsx
index 236cf54b16..d40d53397e 100644
--- a/packages/storybook/stories/text-input.stories.tsx
+++ b/packages/storybook/stories/text-input.stories.tsx
@@ -1,4 +1,4 @@
-import { TextInput } from '@equisoft/design-elements-react';
+import { Icon, TextInput } from '@equisoft/design-elements-react';
 import { Meta, StoryObj } from '@storybook/react';
 import { rawCodeParameters } from './utils/parameters';
 
@@ -45,6 +45,26 @@ export const Default: Story = {
     },
 };
 
+export const IconAsAdornment: Story = {
+    ...TextInputMeta,
+    args: {
+        label: 'First Name',
+        validationErrorMessage: 'Error message',
+        leftAdornment: <Icon name='user' />,
+        hint: 'Hint',
+    },
+};
+
+export const TextAsAdornment: Story = {
+    ...TextInputMeta,
+    args: {
+        label: 'First Name',
+        validationErrorMessage: 'Error message',
+        rightAdornment: '%',
+        hint: 'Hint',
+    },
+};
+
 export const EventCallbacks: Story = {
     ...TextInputMeta,
     parameters: rawCodeParameters,