diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx
index 5f8efe8de66..faf94ab4a26 100644
--- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx
@@ -1,13 +1,8 @@
 import React from 'react';
-import { text } from '@storybook/addon-knobs';
-import { FieldValidationMessage } from './FieldValidationMessage';
+import { Story } from '@storybook/react';
+import { FieldValidationMessage, FieldValidationMessageProps } from './FieldValidationMessage';
 import mdx from './FieldValidationMessage.mdx';
-
-const getKnobs = () => {
-  return {
-    message: text('message', 'Invalid input message'),
-  };
-};
+import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/FieldValidationMessage',
@@ -16,17 +11,20 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+  },
+  args: {
+    horizontal: false,
+    children: 'Invalid input message',
+  },
+  argTypes: {
+    children: { name: 'message' },
+    className: NOOP_CONTROL,
   },
 };
 
-export const vertical = () => {
-  const { message } = getKnobs();
-
-  return <FieldValidationMessage>{message}</FieldValidationMessage>;
-};
-
-export const horizontal = () => {
-  const { message } = getKnobs();
-
-  return <FieldValidationMessage horizontal>{message}</FieldValidationMessage>;
+export const Basic: Story<FieldValidationMessageProps> = (args) => {
+  return <FieldValidationMessage horizontal={args.horizontal}>{args.children}</FieldValidationMessage>;
 };