diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 7c6d7bf90fd..6d7c1f12fc5 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -37,6 +37,17 @@
   }
 }
 
+// mixin for the container of validation messages displayed below form-associated components
+@mixin form-validation-message() {
+  .message-container {
+    padding-block-start: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+}
+
 // mixin to provide base disabled styles for interactive components
 // additional styling can be passed via @content
 @mixin disabled() {
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index 92e9f4dd4d5..58ba3dac8df 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -206,14 +206,6 @@
   @apply sr-only;
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 .list-container {
   @apply bg-foreground-1
     max-h-menu
@@ -250,6 +242,7 @@ calcite-chip {
   @apply block;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
 
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
index 86d1a772777..f4001554e38 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -115,14 +115,6 @@
   @apply mt-0;
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 :host([range][layout="vertical"][scale="m"]) .vertical-arrow-container {
   inset-block-start: theme("spacing.6");
   padding-inline-start: theme("spacing.3");
@@ -145,6 +137,7 @@
   }
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 
 .assistive-text {
diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
index 3aaca2f425c..daf21d600ce 100755
--- a/packages/calcite-components/src/components/input-number/input-number.scss
+++ b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -122,14 +122,6 @@ input:focus {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 // ICONS
 
 // position icons
@@ -421,5 +413,6 @@ input:focus {
   padding-inline-start: 0;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index 38a7be7750e..6bf2a65951d 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -112,14 +112,6 @@ input {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 // states
 input {
   @apply text-color-1
@@ -345,5 +337,6 @@ input[type="text"]::-ms-reveal {
   padding-inline-start: 0;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
index f8aa9650095..3ad1035368b 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -29,14 +29,6 @@
   @apply relative;
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 .toggle-icon {
   @apply absolute flex cursor-pointer items-center;
   inset-inline-end: 0;
@@ -44,4 +36,5 @@
   padding-inline: var(--calcite-toggle-spacing);
 }
 
+@include form-validation-message();
 @include base-component();
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index fda9c88db35..2f52b2bd93c 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -174,14 +174,6 @@ input:focus {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 // ICONS
 
 // position icons
@@ -582,5 +574,6 @@ input {
   }
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
index 9a8cf9d589f..16616e1e915 100644
--- a/packages/calcite-components/src/components/select/select.scss
+++ b/packages/calcite-components/src/components/select/select.scss
@@ -16,14 +16,6 @@
   inline-size: var(--select-width);
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 @include disabled();
 
 :host([scale="s"]) {
@@ -134,5 +126,6 @@ select:disabled {
   @apply border-color-transparent;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index f448638835e..b561b9c5cd7 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -149,14 +149,6 @@ textarea {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 .readonly {
   @apply bg-background font-medium;
 }
@@ -198,6 +190,7 @@ textarea.block-size--full {
   @apply sr-only;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include disabled();
 @include base-component();
diff --git a/packages/calcite-components/src/demos/input-text.html b/packages/calcite-components/src/demos/input-text.html
index 296f9a4c4d5..326150ab781 100644
--- a/packages/calcite-components/src/demos/input-text.html
+++ b/packages/calcite-components/src/demos/input-text.html
@@ -182,22 +182,40 @@
         <div class="child-flex font right-aligned-text">Message Info</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input-text status="idle" placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message status="idle" scale="s" icon> Info message </calcite-input-message>
+            <calcite-input-text
+              status="idle"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text status="idle" placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message status="idle" scale="m" icon> Info message </calcite-input-message>
+            <calcite-input-text
+              status="idle"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text status="idle" placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message status="idle" scale="l" icon> Info message </calcite-input-message>
+            <calcite-input-text
+              status="idle"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>
@@ -207,22 +225,40 @@
         <div class="child-flex font right-aligned-text">Message Success</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input-text status="valid" placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message status="valid" scale="s" icon> Success message </calcite-input-message>
+            <calcite-input-text
+              status="valid"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text status="valid" placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message status="valid" scale="m" icon> Success message </calcite-input-message>
+            <calcite-input-text
+              status="valid"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text status="valid" placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message status="valid" scale="l" icon> Success message </calcite-input-message>
+            <calcite-input-text
+              status="valid"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>
@@ -231,23 +267,27 @@
       <div class="parent-flex">
         <div class="child-flex font right-aligned-text">Message Warning</div>
         <div class="child-flex">
-          <calcite-label scale="s">
-            <calcite-input-text placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message scale="s" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+          <calcite-label scale="s"
+            ><calcite-input-text
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Warning message"
+              message-icon
+            ></calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message scale="m" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+            <calcite-input-text placeholder="Placeholder" scale="m" message-text="Warning message" message-icon>
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message scale="l" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+            <calcite-input-text placeholder="Placeholder" scale="l" message-text="Warning message" message-icon>
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>
@@ -257,22 +297,40 @@
         <div class="child-flex font right-aligned-text">Message Error</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input-text status="invalid" placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message status="invalid" scale="s" icon> Error message </calcite-input-message>
+            <calcite-input-text
+              status="invalid"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Error message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text status="invalid" placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message status="invalid" scale="m" icon> Error message </calcite-input-message>
+            <calcite-input-text
+              status="invalid"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Warning message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text status="invalid" placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message status="invalid" scale="l" icon> Error message </calcite-input-message>
+            <calcite-input-text
+              status="invalid"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Warning message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>
diff --git a/packages/calcite-components/src/demos/input-time-zone.html b/packages/calcite-components/src/demos/input-time-zone.html
index 6bf9b608888..1de84ad495a 100644
--- a/packages/calcite-components/src/demos/input-time-zone.html
+++ b/packages/calcite-components/src/demos/input-time-zone.html
@@ -77,6 +77,36 @@ <h1 style="margin: 0 auto; text-align: center">Select</h1>
         </div>
       </div>
 
+      <div class="parent">
+        <div class="child right-aligned-text">Basic (offset mode) + validation message</div>
+        <div class="child">
+          <calcite-input-time-zone
+            scale="s"
+            status="invalid"
+            message-icon
+            message-text="This field is required."
+          ></calcite-input-time-zone>
+        </div>
+
+        <div class="child">
+          <calcite-input-time-zone
+            scale="m"
+            status="invalid"
+            message-icon
+            message-text="This field is required."
+          ></calcite-input-time-zone>
+        </div>
+
+        <div class="child">
+          <calcite-input-time-zone
+            scale="l"
+            status="invalid"
+            message-icon
+            message-text="This field is required."
+          ></calcite-input-time-zone>
+        </div>
+      </div>
+
       <div class="parent">
         <div class="child right-aligned-text">name mode</div>
         <div class="child">
diff --git a/packages/calcite-components/src/demos/input.html b/packages/calcite-components/src/demos/input.html
index 7cbcd3f92b7..b5704704dcf 100644
--- a/packages/calcite-components/src/demos/input.html
+++ b/packages/calcite-components/src/demos/input.html
@@ -967,22 +967,43 @@
         <div class="child-flex font right-aligned-text">Message Info</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input status="idle" type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message status="idle" scale="s" icon> Info message </calcite-input-message>
+            <calcite-input
+              status="idle"
+              type="text"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input status="idle" type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message status="idle" scale="m" icon> Info message </calcite-input-message>
+            <calcite-input
+              status="idle"
+              type="text"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input status="idle" type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message status="idle" scale="l" icon> Info message </calcite-input-message>
+            <calcite-input
+              status="idle"
+              type="text"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
       </div>
@@ -992,22 +1013,43 @@
         <div class="child-flex font right-aligned-text">Message Success</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input status="valid" type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message status="valid" scale="s" icon> Success message </calcite-input-message>
+            <calcite-input
+              status="valid"
+              type="text"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input status="valid" type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message status="valid" scale="m" icon> Success message </calcite-input-message>
+            <calcite-input
+              status="valid"
+              type="text"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input status="valid" type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message status="valid" scale="l" icon> Success message </calcite-input-message>
+            <calcite-input
+              status="valid"
+              type="text"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Warning message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
       </div>
@@ -1017,22 +1059,22 @@
         <div class="child-flex font right-aligned-text">Message Warning</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message scale="s" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+            <calcite-input type="text" placeholder="Placeholder" scale="s" message-text="Warning message" message-icon>
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message scale="m" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+            <calcite-input type="text" placeholder="Placeholder" scale="m" message-text="Warning message" message-icon>
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message scale="l" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+            <calcite-input type="text" placeholder="Placeholder" scale="l" message-text="Warning message" message-icon>
+            </calcite-input>
           </calcite-label>
         </div>
       </div>
@@ -1042,22 +1084,43 @@
         <div class="child-flex font right-aligned-text">Message Error</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input status="invalid" type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message status="invalid" scale="s" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="text"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Error message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input status="invalid" type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message status="invalid" scale="m" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="text"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Error message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input status="invalid" type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message status="invalid" scale="l" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="text"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Error message"
+              message-icon
+            >
+            </calcite-input>
           </calcite-label>
         </div>
       </div>
@@ -1188,24 +1251,42 @@
         <div class="child-flex">
           <calcite-label scale="s">
             Input Label
-            <calcite-input status="invalid" type="color" value="#0000ff" scale="s"></calcite-input>
-            <calcite-input-message status="invalid" scale="s" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="color"
+              value="#0000ff"
+              scale="s"
+              message-text="Error message"
+              message-icon
+            ></calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
             Input Label
-            <calcite-input status="invalid" type="color" value="#0000ff" scale="m"></calcite-input>
-            <calcite-input-message status="invalid" scale="m" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="color"
+              value="#0000ff"
+              scale="m"
+              message-text="Error message"
+              message-icon
+            ></calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
             Input Label
-            <calcite-input status="invalid" type="color" value="#0000ff" scale="l"></calcite-input>
-            <calcite-input-message status="invalid" scale="l" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="color"
+              value="#0000ff"
+              scale="l"
+              message-text="Error message"
+              message-icon
+            ></calcite-input>
           </calcite-label>
         </div>
       </div>
@@ -1216,27 +1297,51 @@
         <div class="child-flex">
           <calcite-label scale="s">
             Input Label
-            <calcite-input status="invalid" type="number" placeholder="Placeholder" scale="s" value="123" step="1">
+            <calcite-input
+              status="invalid"
+              type="number"
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              step="1"
+              message-text="Error message"
+              message-icon
+            >
             </calcite-input>
-            <calcite-input-message status="invalid" scale="s" icon> Error message </calcite-input-message>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
             Input Label
-            <calcite-input status="invalid" type="number" placeholder="Placeholder" scale="m" value="123" step="1">
+            <calcite-input
+              status="invalid"
+              type="number"
+              placeholder="Placeholder"
+              scale="m"
+              value="123"
+              step="1"
+              message-text="Error message"
+              message-icon
+            >
             </calcite-input>
-            <calcite-input-message status="invalid" scale="m" icon> Error message </calcite-input-message>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
             Input Label
-            <calcite-input status="invalid" type="number" placeholder="Placeholder" scale="l" value="123" step="1">
+            <calcite-input
+              status="invalid"
+              type="number"
+              placeholder="Placeholder"
+              scale="l"
+              value="123"
+              step="1"
+              message-text="Error message"
+              message-icon
+            >
             </calcite-input>
-            <calcite-input-message status="invalid" scale="l" icon> Error message </calcite-input-message>
           </calcite-label>
         </div>
       </div>
@@ -1247,24 +1352,42 @@
         <div class="child-flex">
           <calcite-label scale="s">
             File input
-            <calcite-input status="invalid" type="file" placeholder="No file chosen" scale="s"></calcite-input>
-            <calcite-input-message status="invalid" scale="s" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="file"
+              placeholder="No file chosen"
+              scale="s"
+              message-text="Error message"
+              message-icon
+            ></calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
             File input
-            <calcite-input status="invalid" type="file" placeholder="No file chosen" scale="m"></calcite-input>
-            <calcite-input-message status="invalid" scale="m" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="file"
+              placeholder="No file chosen"
+              scale="m"
+              message-text="Error message"
+              message-icon
+            ></calcite-input>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
             File input
-            <calcite-input status="invalid" type="file" placeholder="No file chosen" scale="l"></calcite-input>
-            <calcite-input-message status="invalid" scale="l" icon> Error message </calcite-input-message>
+            <calcite-input
+              status="invalid"
+              type="file"
+              placeholder="No file chosen"
+              scale="l"
+              message-text="Error message"
+              message-icon
+            ></calcite-input>
           </calcite-label>
         </div>
       </div>
diff --git a/packages/calcite-components/src/demos/text-area.html b/packages/calcite-components/src/demos/text-area.html
index 4cef862ef8e..7c4628d7c2d 100644
--- a/packages/calcite-components/src/demos/text-area.html
+++ b/packages/calcite-components/src/demos/text-area.html
@@ -68,6 +68,39 @@
         </div>
       </div>
 
+      <div class="parent">
+        <div class="child-text">Validation message</div>
+        <div class="child">
+          <calcite-text-area
+            placeholder="add notes"
+            scale="s"
+            status="invalid"
+            message-icon
+            message-text="This field is required."
+          ></calcite-text-area>
+        </div>
+        <div class="child">
+          <calcite-text-area
+            placeholder="add notes"
+            scale="m"
+            status="invalid"
+            message-icon
+            message-text="This field is required."
+          >
+          </calcite-text-area>
+        </div>
+        <div class="child">
+          <calcite-text-area
+            placeholder="add notes"
+            scale="l"
+            status="invalid"
+            message-icon
+            message-text="This field is required."
+          >
+          </calcite-text-area>
+        </div>
+      </div>
+
       <div class="parent">
         <div class="child-text">Default with Value</div>
         <div class="child">