diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx
index 8b6a40c2e8a..490a0d0f09e 100644
--- a/packages/grafana-ui/src/components/Forms/Field.tsx
+++ b/packages/grafana-ui/src/components/Forms/Field.tsx
@@ -22,7 +22,7 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   /** Indicates if field is required */
   required?: boolean;
   /** Error message to display */
-  error?: string | null;
+  error?: React.ReactNode;
   /** Indicates horizontal layout of the field */
   horizontal?: boolean;
   /** make validation message overflow horizontally. Prevents pushing out adjacent inline components */
diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx
index 15ab04e1b06..d5d162062d8 100644
--- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { FieldValidationMessage, FieldValidationMessageProps } from './FieldValidationMessage';
+import { FieldValidationMessage } from './FieldValidationMessage';
 import mdx from './FieldValidationMessage.mdx';
 
-export default {
+const story = {
   title: 'Forms/FieldValidationMessage',
   component: FieldValidationMessage,
   parameters: {
@@ -21,8 +21,12 @@ export default {
   argTypes: {
     children: { name: 'message' },
   },
-} as Meta;
+};
 
-export const Basic: Story<FieldValidationMessageProps> = (args) => {
+export default story as Meta;
+
+type Args = typeof story['args'];
+
+export const Basic: Story<Args> = (args) => {
   return <FieldValidationMessage horizontal={args.horizontal}>{args.children}</FieldValidationMessage>;
 };
diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
index 5cf178469ec..2e551d7b764 100644
--- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
@@ -5,7 +5,6 @@ import { Icon } from '../Icon/Icon';
 import { stylesFactory, useTheme2 } from '../../themes';
 
 export interface FieldValidationMessageProps {
-  children: string;
   /** Override component style */
   className?: string;
   horizontal?: boolean;
diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
index 14b0fc8f086..233a14020a3 100644
--- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
+++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
@@ -8,7 +8,7 @@ import { useStyles } from '../../themes';
  * @public
  */
 export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
-  text: string;
+  text: React.ReactNode;
 }
 
 /**