diff --git a/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx
index 776b9bad4a5..fbc9ab3eadd 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx
@@ -1,30 +1,39 @@
 import React from 'react';
-import { number, text } from '@storybook/addon-knobs';
-
+import { Story } from '@storybook/react';
+import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { FormField } from './FormField';
-
-const getKnobs = () => {
-  return {
-    label: text('label', 'Test'),
-    tooltip: text('tooltip', 'This is a tooltip with information about this FormField'),
-    labelWidth: number('labelWidth', 10),
-    inputWidth: number('inputWidth', 20),
-  };
-};
+import { FormField, Props } from './FormField';
 
 export default {
   title: 'Forms/Legacy/FormField',
   component: FormField,
   decorators: [withCenteredStory],
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+  args: {
+    inputWidth: 20,
+    labelWidth: 10,
+    label: 'Test',
+  },
+  argTypes: {
+    inputWidth: { control: { type: 'range', min: 5, max: 30 } },
+    labelWidth: { control: { type: 'range', min: 5, max: 30 } },
+    tooltip: { control: { type: 'text' } },
+    inputEl: NOOP_CONTROL,
+  },
 };
 
-export const basic = () => {
-  const { inputWidth, label, labelWidth } = getKnobs();
-  return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />;
+export const Basic: Story<Props> = (args) => {
+  return <FormField {...args} />;
 };
 
-export const withTooltip = () => {
-  const { inputWidth, label, labelWidth, tooltip } = getKnobs();
-  return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} tooltip={tooltip} />;
+export const WithTooltip: Story<Props> = ({ tooltip, ...args }) => {
+  return <FormField {...args} tooltip={tooltip} />;
+};
+
+WithTooltip.args = {
+  tooltip: 'This is a tooltip with information about this FormField',
 };