diff --git a/.changeset/beige-mails-explain.md b/.changeset/beige-mails-explain.md
new file mode 100644
index 0000000000..4578e35604
--- /dev/null
+++ b/.changeset/beige-mails-explain.md
@@ -0,0 +1,37 @@
+---
+'@commercetools-uikit/localized-multiline-text-input': minor
+'@commercetools-uikit/localized-rich-text-input': minor
+'@commercetools-uikit/localized-money-input': minor
+'@commercetools-uikit/localized-text-input': minor
+---
+
+We've changed how we internally manage the `errors` and `warnings` properties to make it easy for consumers to style them.
+
+If you currently want to render an error for an specific language, you need to use the `WarningMessage` component to wrap the error text you provide to the component:
+
+```jsx
+<LocalizexTextInput
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  warnings={{
+    en: <WarningMessage>This is a warning</WarningMessage>,
+  }}
+>
+```
+
+With the new update, you no longer need to wrap the error text so you can provide it as it is:
+
+```jsx
+<LocalizexTextInput
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  warnings={{
+    en: 'This is a warning',
+  }}
+>
+```
+
+We still support the former, but we encourage using the new way to provide errors and warnings.
+
diff --git a/.changeset/cold-tables-search.md b/.changeset/cold-tables-search.md
new file mode 100644
index 0000000000..a44d8a4eb9
--- /dev/null
+++ b/.changeset/cold-tables-search.md
@@ -0,0 +1,34 @@
+---
+'@commercetools-uikit/localized-multiline-text-field': minor
+'@commercetools-uikit/localized-text-field': minor
+---
+
+We've changed how we internally manage the `errorsByLanguage` property to make it easy for consumers to style them.
+
+If you currently want to render an error for an specific language, you need to use the `ErrorMessage` component to wrap the error text you provide to the component:
+
+```jsx
+<LocalizedTextField
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  errorsByLanguage={{
+    en: <ErrorMessage>This is an error</ErrorMessage>,
+  }}
+/>
+```
+
+With the new update, you no longer need to wrap the error text so you can provide it as it is:
+
+```jsx
+<LocalizedTextField
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  errorsByLanguage={{
+    en: 'This is an error',
+  }}
+/>
+```
+
+We still support the former, but we encourage using the new way to provide errors.
diff --git a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js
index c7eae679b6..a1cc3ebf8c 100644
--- a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js
+++ b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js
@@ -10,7 +10,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import * as icons from '../../../icons';
@@ -120,9 +119,7 @@ storiesOf('Components|Fields', module)
               errorsByLanguage={
                 errorsByLanguage
                   ? Object.keys(value).reduce((acc, language) => {
-                      acc[language] = (
-                        <ErrorMessage>An error for language</ErrorMessage>
-                      );
+                      acc[language] = 'An error for language';
                       return acc;
                     }, {})
                   : undefined
diff --git a/packages/components/fields/localized-text-field/src/localized-text-field.story.js b/packages/components/fields/localized-text-field/src/localized-text-field.story.js
index bbb9e41c4f..c49cbdd632 100644
--- a/packages/components/fields/localized-text-field/src/localized-text-field.story.js
+++ b/packages/components/fields/localized-text-field/src/localized-text-field.story.js
@@ -10,7 +10,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import * as icons from '../../../icons';
@@ -114,9 +113,7 @@ storiesOf('Components|Fields', module)
               errorsByLanguage={
                 errorsByLanguage
                   ? Object.keys(value).reduce((acc, language) => {
-                      acc[language] = (
-                        <ErrorMessage>An error for language</ErrorMessage>
-                      );
+                      acc[language] = 'An error for language';
                       return acc;
                     }, {})
                   : undefined
diff --git a/packages/components/fields/localized-text-field/src/localized-text-field.tsx b/packages/components/fields/localized-text-field/src/localized-text-field.tsx
index 49014e640e..ed727fc785 100644
--- a/packages/components/fields/localized-text-field/src/localized-text-field.tsx
+++ b/packages/components/fields/localized-text-field/src/localized-text-field.tsx
@@ -160,7 +160,7 @@ export type TLocalizedTextFieldProps = {
   /**
    * Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`.
    */
-  errorsByLanguage?: Record<string, string>;
+  errorsByLanguage?: Record<string, ReactNode>;
 
   // LabelField
   /**
diff --git a/packages/components/inputs/localized-money-input/package.json b/packages/components/inputs/localized-money-input/package.json
index e9747a0b35..3dfa6ad726 100644
--- a/packages/components/inputs/localized-money-input/package.json
+++ b/packages/components/inputs/localized-money-input/package.json
@@ -28,6 +28,7 @@
     "@commercetools-uikit/icons": "18.2.0",
     "@commercetools-uikit/input-utils": "18.2.0",
     "@commercetools-uikit/localized-utils": "18.2.0",
+    "@commercetools-uikit/messages": "18.2.0",
     "@commercetools-uikit/money-input": "18.2.0",
     "@commercetools-uikit/select-utils": "18.2.0",
     "@commercetools-uikit/spacings-stack": "18.2.0",
diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.story.js b/packages/components/inputs/localized-money-input/src/localized-money-input.story.js
index ceb96968ad..8bcc6af297 100644
--- a/packages/components/inputs/localized-money-input/src/localized-money-input.story.js
+++ b/packages/components/inputs/localized-money-input/src/localized-money-input.story.js
@@ -9,7 +9,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import LocalizedMoneyInput from './localized-money-input';
@@ -86,7 +85,7 @@ storiesOf('Components|Inputs', module)
                 Object.values(errors).some((error) => error.length > 0)
                   ? Object.entries(errors).reduce((acc, [currency, error]) => {
                       if (error.length === 0) return acc;
-                      acc[currency] = <ErrorMessage>{error}</ErrorMessage>;
+                      acc[currency] = error;
                       return acc;
                     }, {})
                   : undefined
@@ -96,9 +95,7 @@ storiesOf('Components|Inputs', module)
                   ? Object.entries(warnings).reduce(
                       (acc, [currency, warning]) => {
                         if (warning.length === 0) return acc;
-                        acc[currency] = (
-                          <WarningMessage>{warning}</WarningMessage>
-                        );
+                        acc[currency] = warning;
                         return acc;
                       },
                       {}
diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
index ca0a635af6..2a1457e123 100644
--- a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
+++ b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
@@ -7,6 +7,7 @@ import MoneyInput, {
   type TMoneyValue,
   type TValue,
 } from '@commercetools-uikit/money-input';
+import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Stack from '@commercetools-uikit/spacings-stack';
 import Constraints from '@commercetools-uikit/constraints';
 import { CoinsIcon } from '@commercetools-uikit/icons';
@@ -254,9 +255,8 @@ const LocalizedInput = (props: TLocalizedInputProps) => {
           {...filterDataAttributes(props)}
         />
       </div>
-      {(props.error || props.warning) && (
-        <div>{props.error ? props.error : props.warning}</div>
-      )}
+      {props.error && <ErrorMessage>{props.error}</ErrorMessage>}
+      {props.warning && <WarningMessage>{props.warning}</WarningMessage>}
     </Stack>
   );
 };
diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx b/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx
index 6f05d86d30..0a775937d4 100644
--- a/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx
+++ b/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx
@@ -1,7 +1,5 @@
 import {
   LocalizedMoneyInput,
-  ErrorMessage,
-  WarningMessage,
 } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
 
@@ -99,7 +97,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        errors={{ CAD: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ CAD: 'foo' }}
       />
     </Spec>
     <Spec label="when there is an error for a specific currency (second one)">
@@ -108,7 +106,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        errors={{ EUR: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ EUR: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a warning for a specific currency (first one)">
@@ -117,7 +115,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        warnings={{ CAD: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ CAD: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a warning for a specific currency (second one)">
@@ -126,7 +124,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        warnings={{ EUR: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ EUR: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general error">
diff --git a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js
index 95338f91ba..f1bc418f2c 100644
--- a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js
+++ b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js
@@ -9,7 +9,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import LocalizedMultilineTextInput from './localized-multiline-text-input';
@@ -84,7 +83,7 @@ storiesOf('Components|Inputs', module)
                 Object.values(errors).some((error) => error.length > 0)
                   ? Object.entries(errors).reduce((acc, [language, error]) => {
                       if (error.length === 0) return acc;
-                      acc[language] = <ErrorMessage>{error}</ErrorMessage>;
+                      acc[language] = error;
                       return acc;
                     }, {})
                   : undefined
@@ -94,9 +93,7 @@ storiesOf('Components|Inputs', module)
                   ? Object.entries(warnings).reduce(
                       (acc, [language, warning]) => {
                         if (warning.length === 0) return acc;
-                        acc[language] = (
-                          <WarningMessage>{warning}</WarningMessage>
-                        );
+                        acc[language] = warning;
                         return acc;
                       },
                       {}
diff --git a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx
index 818589777b..66aba9a4a0 100644
--- a/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx
+++ b/packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx
@@ -1,7 +1,5 @@
 import {
   LocalizedMultilineTextInput,
-  ErrorMessage,
-  WarningMessage,
 } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
 
@@ -107,7 +105,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ en: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ en: 'foo' }}
       />
     </Spec>
     <Spec label="when there is an error for a specific language (second one)">
@@ -116,7 +114,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ de: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general error">
@@ -134,7 +132,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ en: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ en: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a warning for a specific language (second one)">
@@ -143,7 +141,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ de: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general warning">
@@ -171,7 +169,7 @@ export const component = () => (
         selectedLanguage="en"
         horizontalConstraint={7}
         hasError={true}
-        errors={{ en: <ErrorMessage>Error error error e e e</ErrorMessage> }}
+        errors={{ en: 'Error error error e e e' }}
         additionalInfo={{ en: 'This is a foo field' }}
       />
     </Spec>
@@ -191,7 +189,7 @@ export const component = () => (
         selectedLanguage="en"
         horizontalConstraint={7}
         additionalInfo={{ en: 'This is a foo field' }}
-        errors={{ en: <ErrorMessage>Error error error e e e</ErrorMessage> }}
+        errors={{ en: 'Error error error e e e' }}
       />
     </Spec>
   </Suite>
diff --git a/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx b/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx
index 02d202a087..25e55d8aee 100644
--- a/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx
+++ b/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx
@@ -17,7 +17,11 @@ import {
   MultilineInput,
   messagesMultilineInput,
 } from '@commercetools-uikit/input-utils';
-import { AdditionalInfoMessage } from '@commercetools-uikit/messages';
+import {
+  AdditionalInfoMessage,
+  ErrorMessage,
+  WarningMessage,
+} from '@commercetools-uikit/messages';
 import {
   getTextareaStyles,
   getLanguageLabelStyles,
@@ -205,13 +209,13 @@ const TranslationInput = (props: TranslationInputProps) => {
           if (props.error)
             return (
               <LeftColumn>
-                <div>{props.error}</div>
+                <ErrorMessage>{props.error}</ErrorMessage>
               </LeftColumn>
             );
           if (props.warning)
             return (
               <LeftColumn>
-                <div>{props.warning}</div>
+                <WarningMessage>{props.warning}</WarningMessage>
               </LeftColumn>
             );
           return null;
diff --git a/packages/components/inputs/localized-rich-text-input/src/editor.tsx b/packages/components/inputs/localized-rich-text-input/src/editor.tsx
index 68e9992612..6d4c0cac80 100644
--- a/packages/components/inputs/localized-rich-text-input/src/editor.tsx
+++ b/packages/components/inputs/localized-rich-text-input/src/editor.tsx
@@ -23,7 +23,11 @@ import { AngleUpIcon, AngleDownIcon } from '@commercetools-uikit/icons';
 import Text from '@commercetools-uikit/text';
 import FlatButton from '@commercetools-uikit/flat-button';
 import { messagesMultilineInput } from '@commercetools-uikit/input-utils';
-import { AdditionalInfoMessage } from '@commercetools-uikit/messages';
+import {
+  AdditionalInfoMessage,
+  ErrorMessage,
+  WarningMessage,
+} from '@commercetools-uikit/messages';
 import {
   RichTextBody,
   HiddenInput,
@@ -313,13 +317,13 @@ const Editor = forwardRef((props: TEditorProps, forwardedRef) => {
                 if (props.error)
                   return (
                     <LeftColumn>
-                      <div>{props.error}</div>
+                      <ErrorMessage>{props.error}</ErrorMessage>
                     </LeftColumn>
                   );
                 if (props.warning)
                   return (
                     <LeftColumn>
-                      <div>{props.warning}</div>
+                      <WarningMessage>{props.warning}</WarningMessage>
                     </LeftColumn>
                   );
                 return null;
diff --git a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.story.js b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.story.js
index 1e571f3129..48625be24c 100644
--- a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.story.js
+++ b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.story.js
@@ -14,7 +14,6 @@ import Spacings from '@commercetools-uikit/spacings';
 import PrimaryButton from '@commercetools-uikit/primary-button';
 import CollapsiblePanel from '@commercetools-uikit/collapsible-panel';
 import Text from '@commercetools-uikit/text';
-import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Readme from '../README.md';
 import LocalizedRichTextInput from './localized-rich-text-input';
 
@@ -146,7 +145,7 @@ const StoryWrapper = (props) => {
           Object.values(errors).some((error) => error.length > 0)
             ? Object.entries(errors).reduce((acc, [language, error]) => {
                 if (error.length === 0) return acc;
-                acc[language] = <ErrorMessage>{error}</ErrorMessage>;
+                acc[language] = error;
                 return acc;
               }, {})
             : undefined
@@ -155,7 +154,7 @@ const StoryWrapper = (props) => {
           Object.values(warnings).some((warning) => warning.length > 0)
             ? Object.entries(warnings).reduce((acc, [language, warning]) => {
                 if (warning.length === 0) return acc;
-                acc[language] = <WarningMessage>{warning}</WarningMessage>;
+                acc[language] = warning;
                 return acc;
               }, {})
             : undefined
diff --git a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.visualroute.jsx b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.visualroute.jsx
index ff8b14286b..39a2b7a698 100644
--- a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.visualroute.jsx
+++ b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.visualroute.jsx
@@ -2,8 +2,6 @@ import { Switch, Route } from 'react-router-dom';
 import { useState, useCallback, useRef, forwardRef } from 'react';
 import {
   LocalizedRichTextInput,
-  ErrorMessage,
-  WarningMessage,
 } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
 
@@ -189,7 +187,7 @@ const DefaultRoute = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ en: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ en: 'foo' }}
       />
     </Spec>
     <Spec
@@ -201,7 +199,7 @@ const DefaultRoute = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ de: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general error" omitPropsList>
@@ -222,7 +220,7 @@ const DefaultRoute = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ en: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ en: 'foo' }}
       />
     </Spec>
     <Spec
@@ -234,7 +232,7 @@ const DefaultRoute = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ de: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general warning" omitPropsList>
@@ -300,7 +298,7 @@ const DefaultRoute = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ en: <ErrorMessage>Error error error e e e</ErrorMessage> }}
+        errors={{ en: 'Error error error e e e' }}
         additionalInfo={{ en: 'This is a foo field' }}
       />
     </Spec>
diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.story.js b/packages/components/inputs/localized-text-input/src/localized-text-input.story.js
index ae688d77f5..73eb969dda 100644
--- a/packages/components/inputs/localized-text-input/src/localized-text-input.story.js
+++ b/packages/components/inputs/localized-text-input/src/localized-text-input.story.js
@@ -9,7 +9,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import LocalizedTextInput from './localized-text-input';
@@ -80,7 +79,7 @@ storiesOf('Components|Inputs', module)
                 Object.values(errors).some((error) => error.length > 0)
                   ? Object.entries(errors).reduce((acc, [language, error]) => {
                       if (error.length === 0) return acc;
-                      acc[language] = <ErrorMessage>{error}</ErrorMessage>;
+                      acc[language] = error;
                       return acc;
                     }, {})
                   : undefined
@@ -90,9 +89,7 @@ storiesOf('Components|Inputs', module)
                   ? Object.entries(warnings).reduce(
                       (acc, [language, warning]) => {
                         if (warning.length === 0) return acc;
-                        acc[language] = (
-                          <WarningMessage>{warning}</WarningMessage>
-                        );
+                        acc[language] = warning;
                         return acc;
                       },
                       {}
diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.tsx b/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
index 23f63e3603..97f6483e6b 100644
--- a/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
+++ b/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
@@ -10,6 +10,7 @@ import { useFieldId, useToggleState } from '@commercetools-uikit/hooks';
 import {
   ErrorMessage,
   AdditionalInfoMessage,
+  WarningMessage,
 } from '@commercetools-uikit/messages';
 import Stack from '@commercetools-uikit/spacings-stack';
 import Constraints from '@commercetools-uikit/constraints';
@@ -131,7 +132,7 @@ export type TLocalizedTextInputProps = {
   /**
    * Used to show errors underneath the inputs of specific locales. Pass an object whose key is a locale and whose value is the error to show for that key.
    */
-  errors?: Record<string, string>;
+  errors?: Record<string, ReactNode>;
   /**
    * A map of warnings.
    */
@@ -344,9 +345,13 @@ const LocalizedTextInput = (props: TLocalizedTextInputProps) => {
                     aria-invalid={props['aria-invalid']}
                     aria-errormessage={props['aria-errormessage']}
                   />
-                  {props.errors && props.errors[language]}
-                  {props.warnings && props.warnings[language]}
-                  {props.additionalInfo && (
+                  {props.errors?.[language] && (
+                    <ErrorMessage>{props.errors[language]}</ErrorMessage>
+                  )}
+                  {props.warnings?.[language] && (
+                    <WarningMessage>{props.warnings[language]}</WarningMessage>
+                  )}
+                  {props.additionalInfo?.[language] && (
                     <AdditionalInfoMessage
                       message={props.additionalInfo[language]}
                     />
diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.visualroute.jsx b/packages/components/inputs/localized-text-input/src/localized-text-input.visualroute.jsx
index de4f7423ac..c1434a825f 100644
--- a/packages/components/inputs/localized-text-input/src/localized-text-input.visualroute.jsx
+++ b/packages/components/inputs/localized-text-input/src/localized-text-input.visualroute.jsx
@@ -1,7 +1,5 @@
 import {
   LocalizedTextInput,
-  ErrorMessage,
-  WarningMessage,
 } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
 
@@ -84,7 +82,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ en: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ en: 'foo' }}
       />
     </Spec>
     <Spec label="when there is an error for a specific language (second one)">
@@ -93,7 +91,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ de: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general error">
@@ -111,7 +109,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ en: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ en: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a warning for a specific language (second one)">
@@ -120,7 +118,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ de: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general warning">
diff --git a/yarn.lock b/yarn.lock
index ff7d96e711..494b2482a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3182,6 +3182,7 @@ __metadata:
     "@commercetools-uikit/icons": 18.2.0
     "@commercetools-uikit/input-utils": 18.2.0
     "@commercetools-uikit/localized-utils": 18.2.0
+    "@commercetools-uikit/messages": 18.2.0
     "@commercetools-uikit/money-input": 18.2.0
     "@commercetools-uikit/select-utils": 18.2.0
     "@commercetools-uikit/spacings-stack": 18.2.0