diff --git a/CHANGELOG.md b/CHANGELOG.md
index 482dcd0d..0b0815e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,17 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
 
+## [11.2.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-09)
+
+
+### Added
+
+* **TextInputs:** add showError, showWarn props to MoneyInput, TextArea and TextField ([c143895](https://github.com/silinternational/ui-components/commit/c143895280c354e586e20c614919b1130d3e66e6))
+
+### Fixed
+
+* **TextInputs:** use latest material docs to fix icon spacing issues on TextField and MoneyInput ([2df920b](https://github.com/silinternational/ui-components/commit/2df920bf89df513213bc99067a565112850d5439))
+
 ### [11.1.2](https://github.com/silinternational/ui-components/compare/v11.1.1...v11.1.2) (2024-04-08)
 
 
diff --git a/components/mdc/TextInput/MoneyInput.svelte b/components/mdc/TextInput/MoneyInput.svelte
index a854ce0b..f1710aa1 100644
--- a/components/mdc/TextInput/MoneyInput.svelte
+++ b/components/mdc/TextInput/MoneyInput.svelte
@@ -1,7 +1,7 @@
 <!-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield -->
 <script>
 /** A Svelte component that represents a text input for money values. */
-import { getDecimalPlacesLength } from './helpers'
+import { addOrRemoveInvalidClass, getDecimalPlacesLength } from './helpers'
 import { generateRandomID } from '../../../random'
 import { MDCTextField } from '@material/textfield'
 import { afterUpdate, onMount } from 'svelte'
@@ -28,6 +28,10 @@ export let disabled = false
 export let required = false
 /** @type {string} The description to display below the input. */
 export let description = ''
+/** @type {boolean} lets the component know to use error class. */
+export let showError = false
+/** @type {boolean} lets the component know to use warn class. */
+export let showWarn = false
 
 const labelID = generateRandomID('text-label-')
 
@@ -49,6 +53,9 @@ $: valueHasTooManyDecPlaces = getDecimalPlacesLength(internalValue) > getDecimal
 $: valueNotDivisibleByStep =
   (internalValue && (internalValue / Number(step)).toFixed(2) % 1 !== 0) || valueHasTooManyDecPlaces
 $: internalValue = Number(value) || 0
+$: warn = showWarn
+$: value, addOrRemoveInvalidClass(error, element)
+$: addOrRemoveInvalidClass(showError || showWarn, element)
 
 onMount(() => {
   mdcTextField = new MDCTextField(element)
@@ -60,29 +67,29 @@ afterUpdate(() => (width = `${element?.offsetWidth}px`))
 const focus = (node) => autofocus && node.focus()
 </script>
 
-<style>
-.material-icons {
-  color: rgb(133, 140, 148);
-  position: relative;
-  top: 0.4rem;
-  right: 0.6rem;
-}
-.label-margin {
-  margin-left: 1.1rem;
-}
-.mdc-text-field--label-floating .mdc-floating-label {
-  margin-left: 0;
-}
-</style>
-
 <label
-  class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
+  class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon {$$props.class ||
+    ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
-  class:mdc-text-field--invalid={error}
+  class:warn
+  class:showError
   bind:this={element}
 >
-  <i class="material-icons" class:error aria-hidden="true">attach_money</i>
+  <span class="mdc-notched-outline">
+    <span class="mdc-notched-outline__leading" />
+    {#if label}
+      <span class="mdc-notched-outline__notch">
+        <span class="mdc-floating-label" class:error id={labelID}>
+          {label}
+        </span>
+      </span>
+    {/if}
+    <span class="mdc-notched-outline__trailing" />
+  </span>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" class:error aria-hidden="true">
+    attach_money
+  </i>
   <input
     {step}
     type="number"
@@ -107,21 +114,8 @@ const focus = (node) => autofocus && node.focus()
     {required}
   />
   {#if showErrorIcon}
-    <span class="mdc-text-field__affix mdc-text-field__affix--suffix">
-      <i class="material-icons error" aria-hidden="true"> error</i>
-    </span>
+    <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing error" aria-hidden="true"> error</i>
   {/if}
-  <span class="mdc-notched-outline">
-    <span class="mdc-notched-outline__leading" />
-    {#if label}
-      <span class="mdc-notched-outline__notch">
-        <span class="mdc-floating-label label-margin" class:error id={labelID}>
-          {label}
-        </span>
-      </span>
-    {/if}
-    <span class="mdc-notched-outline__trailing" />
-  </span>
 </label>
 <div class="mdc-text-field-helper-line" style="width: {width};">
   <div
diff --git a/components/mdc/TextInput/TextArea.svelte b/components/mdc/TextInput/TextArea.svelte
index 39aac053..f3ddc0e7 100644
--- a/components/mdc/TextInput/TextArea.svelte
+++ b/components/mdc/TextInput/TextArea.svelte
@@ -25,6 +25,10 @@ export let required = false
 export let description = ''
 /** @type {string} The name of the textarea field. */
 export let name = ''
+/** @type {boolean} lets the component know to use error class. */
+export let showError = false
+/** @type {boolean} lets the component know to use warn class. */
+export let showWarn = false
 
 const labelID = generateRandomID('textarea-label-')
 
@@ -37,7 +41,9 @@ let hasBlurred = false
 $: hasExceededMaxLength = maxlength && value.length > maxlength
 $: error = hasExceededMaxLength || (hasFocused && hasBlurred && required && valueIsEmpty)
 $: valueIsEmpty = value === ' ' || !value
+$: warn = showWarn
 $: !valueIsEmpty && addOrRemoveInvalidClass(error, element)
+$: addOrRemoveInvalidClass(showError || showWarn, element)
 
 onMount(() => {
   resize()
@@ -78,6 +84,8 @@ label {
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--label-floating={label}
   class:mdc-text-field--with-internal-counter={maxlength}
+  class:warn
+  class:showError
   bind:this={element}
 >
   <textarea
diff --git a/components/mdc/TextInput/TextField.svelte b/components/mdc/TextInput/TextField.svelte
index a0c54484..b98c2f03 100644
--- a/components/mdc/TextInput/TextField.svelte
+++ b/components/mdc/TextInput/TextField.svelte
@@ -25,6 +25,10 @@ export let icon = ''
 export let description = ''
 /** @type {string} The name of the text input field. */
 export let name = ''
+/** @type {boolean} lets the component know to use error class. */
+export let showError = false
+/** @type {boolean} lets the component know to use warn class. */
+export let showWarn = false
 
 const labelID = generateRandomID('text-label-')
 
@@ -37,8 +41,10 @@ let hasBlurred = false
 $: mdcTextField.value = value
 $: hasExceededMaxLength = maxlength && value.length > maxlength
 $: error = hasExceededMaxLength || (hasFocused && hasBlurred && required && !value)
+$: warn = showWarn
 $: showCounter = maxlength && value.length / maxlength > 0.85
-$: value && addOrRemoveInvalidClass(error, element)
+$: value, addOrRemoveInvalidClass(error, element)
+$: addOrRemoveInvalidClass(showError || showWarn, element)
 
 onMount(() => {
   mdcTextField = new MDCTextField(element)
@@ -52,28 +58,31 @@ afterUpdate(() => {
 const focus = (node) => autofocus && node.focus()
 </script>
 
-<style>
-.material-icons {
-  color: rgb(133, 140, 148);
-  position: relative;
-  top: 0.4rem;
-  right: 0.6rem;
-}
-.label-margin {
-  margin-left: 1.1rem;
-}
-.mdc-text-field--label-floating .mdc-floating-label {
-  margin-left: 0;
-}
-</style>
-
 <label
   class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
+  class:warn
+  class:showError
+  class:mdc-text-field--with-leading-icon={icon}
   bind:this={element}
 >
-  <i class="material-icons" class:error aria-hidden="true">{icon}</i>
+  <span class="mdc-notched-outline">
+    <span class="mdc-notched-outline__leading" />
+    {#if label}
+      <span class="mdc-notched-outline__notch">
+        <span class="mdc-floating-label" class:error id={labelID}>
+          {label}
+        </span>
+      </span>
+    {/if}
+    <span class="mdc-notched-outline__trailing" />
+  </span>
+  {#if icon}
+    <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" class:error aria-hidden="true">
+      {icon}</i
+    >
+  {/if}
   <input
     type="text"
     class="mdc-text-field__input"
@@ -96,22 +105,8 @@ const focus = (node) => autofocus && node.focus()
     {placeholder}
   />
   {#if hasExceededMaxLength}
-    <span class="mdc-text-field__affix mdc-text-field__affix--suffix"
-      ><i class="material-icons error" aria-hidden="true">error</i></span
-    >
+    <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing error" aria-hidden="true">error</i>
   {/if}
-
-  <span class="mdc-notched-outline">
-    <span class="mdc-notched-outline__leading" />
-    {#if label}
-      <span class="mdc-notched-outline__notch">
-        <span class="mdc-floating-label" class:label-margin={icon} class:error id={labelID}>
-          {label}
-        </span>
-      </span>
-    {/if}
-    <span class="mdc-notched-outline__trailing" />
-  </span>
 </label>
 <div class="mdc-text-field-helper-line" style="width: {width};">
   <div
diff --git a/components/mdc/TextInput/_index.scss b/components/mdc/TextInput/_index.scss
index e93a4915..9960e005 100644
--- a/components/mdc/TextInput/_index.scss
+++ b/components/mdc/TextInput/_index.scss
@@ -2,10 +2,19 @@
 //@use "@material/line-ripple/mdc-line-ripple"; // Only needed if using ripple.
 @use '@material/notched-outline/mdc-notched-outline';
 @use '@material/textfield';
+@use '@material/textfield/icon';
 
 @include textfield.core-styles;
+@include icon.icon-core-styles;
+
+:root {
+  --mdc-theme-error: #c30000;
+  --mdc-theme-warn: #f48c03;
+}
 
 $radius: 8px !default;
+$error: var(--mdc-theme-status-error, var(--mdc-theme-error)) !default;
+$warn: var(--mdc-theme-status-warn, var(--mdc-theme-warn)) !default;
 
 /* TODO should be cleaned up later, this code is in multiple files but only needs to be in the master css*/
 
@@ -20,6 +29,30 @@ $radius: 8px !default;
 .error {
   color: var(--mdc-theme-status-error, var(--mdc-theme-error)) !important;
 }
+.showError.mdc-text-field--invalid {
+  @include textfield.outline-color($error);
+  @include textfield.hover-outline-color($error);
+  @include textfield.ink-color($error);
+  @include textfield.placeholder-color($error);
+  @include textfield.label-color($error);
+  @include icon.leading-icon-color($error);
+  @include icon.trailing-icon-color($error);
+  @include textfield.caret-color($error);
+  @include textfield.prefix-color($error);
+  @include textfield.suffix-color($error);
+}
+.warn.mdc-text-field--invalid {
+  @include textfield.outline-color($warn);
+  @include textfield.hover-outline-color($warn);
+  @include textfield.ink-color($warn);
+  @include textfield.placeholder-color($warn);
+  @include textfield.label-color($warn);
+  @include icon.leading-icon-color($warn);
+  @include icon.trailing-icon-color($warn);
+  @include textfield.caret-color($warn);
+  @include textfield.prefix-color($warn);
+  @include textfield.suffix-color($warn);
+}
 .required {
   color: var(--mdc-required-input, rgba(0, 0, 0, 0.6));
 }
diff --git a/index.d.ts b/index.d.ts
index 063b07b2..9eaf73b0 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -217,6 +217,8 @@ declare module '@silintl/ui-components' {
     step?: number | string
     description?: string
     class?: string
+    showWarn?: boolean
+    showError?: boolean
   }
   export class MoneyInput extends SvelteComponentTyped<MoneyInputProps> {}
 
@@ -285,6 +287,8 @@ declare module '@silintl/ui-components' {
     rtl?: boolean
     description?: string
     class?: string
+    showWarn?: boolean
+    showError?: boolean
   }
   export class TextArea extends SvelteComponentTyped<TextAreaProps> {}
 
@@ -300,6 +304,8 @@ declare module '@silintl/ui-components' {
     required?: boolean
     description?: string
     class?: string
+    showWarn?: boolean
+    showError?: boolean
   }
   export class TextField extends SvelteComponentTyped<TextFieldProps> {}
 
diff --git a/package-lock.json b/package-lock.json
index 7ad6125c..f1e5f8f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@silintl/ui-components",
-  "version": "11.1.2",
+  "version": "11.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@silintl/ui-components",
-      "version": "11.1.2",
+      "version": "11.2.0",
       "license": "MIT",
       "dependencies": {
         "material-components-web": "^14.0.0",
@@ -15463,7 +15463,7 @@
       }
     },
     "node_modules/npm/node_modules/glob": {
-      "version": "8.0.3",
+      "version": "8.1.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15526,6 +15526,15 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/npm/node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "dev": true,
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/npm/node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "dev": true,
@@ -15961,7 +15970,7 @@
       }
     },
     "node_modules/npm/node_modules/minimatch": {
-      "version": "5.1.0",
+      "version": "5.1.6",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15973,7 +15982,7 @@
       }
     },
     "node_modules/npm/node_modules/minipass": {
-      "version": "3.3.4",
+      "version": "3.3.6",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
diff --git a/package.json b/package.json
index 11f3bc76..bd9ce4fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@silintl/ui-components",
-  "version": "11.1.2",
+  "version": "11.2.0",
   "description": "Reusable Svelte components for some internal applications",
   "main": "index.mjs",
   "module": "index.mjs",
diff --git a/stories/MoneyInput.stories.svelte b/stories/MoneyInput.stories.svelte
index 6f2e9a85..64e2da01 100644
--- a/stories/MoneyInput.stories.svelte
+++ b/stories/MoneyInput.stories.svelte
@@ -15,7 +15,6 @@ const args = {
   'on:keypress': (event) => (lastKey = event.key),
   'on:keyup': (event) => console.log('keyup', event),
   class: '', //will only work with global class
-  maxValue: 100,
   step: '.01',
 }
 $: arrayOfValues.forEach((v) =>
@@ -84,3 +83,7 @@ function setValues(max, step) {
 <Story name="Test step" args={{ ...args, label: '' }} />
 
 <Story name="Name" args={copyAndModifyArgs(args, { name: 'money' })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="showWarn" args={copyAndModifyArgs(args, { showWarn: true })} />
diff --git a/stories/TextArea.stories.svelte b/stories/TextArea.stories.svelte
index d11b588f..85207d65 100644
--- a/stories/TextArea.stories.svelte
+++ b/stories/TextArea.stories.svelte
@@ -38,3 +38,7 @@ const args = {
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
 
 <Story name="Name" args={copyAndModifyArgs(args, { name: 'area' })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="showWarn" args={copyAndModifyArgs(args, { showWarn: true })} />
diff --git a/stories/TextField.stories.svelte b/stories/TextField.stories.svelte
index f431e8ee..342afe4f 100644
--- a/stories/TextField.stories.svelte
+++ b/stories/TextField.stories.svelte
@@ -51,3 +51,7 @@ let lastKey = ''
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
 
 <Story name="Name" args={copyAndModifyArgs(args, { name: 'field' })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="showWarn" args={copyAndModifyArgs(args, { showWarn: true })} />
diff --git a/stories/_theme.scss b/stories/_theme.scss
index 152f724f..3203af95 100644
--- a/stories/_theme.scss
+++ b/stories/_theme.scss
@@ -5,6 +5,7 @@
   --mdc-theme-primary-variant: #0078af;
   --mdc-theme-secondary: #ff4800;
   --mdc-theme-error: #c30000;
+  --mdc-theme-warn: #f48c03;
   --mdc-theme-neutral: #6d7580;
   --mdc-required-input: gray;
   --progress-bar-color: #005cb9;