diff --git a/packages/grafana-ui/src/components/Forms/Legend.mdx b/packages/grafana-ui/src/components/Forms/Legend.mdx
new file mode 100644
index 00000000000..43715552f37
--- /dev/null
+++ b/packages/grafana-ui/src/components/Forms/Legend.mdx
@@ -0,0 +1,23 @@
+import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Legend } from './Legend';
+
+<Meta title="MDX|Legend" component={Legend} />
+
+# Legend
+
+
+### When to use
+
+Legend should be used to add a caption to a group of related form elements that have been grouped toegheter into a `FieldSet`. 
+
+
+### Usage
+
+```jsx
+import { Forms } from '@grafana/ui';
+
+<Legend>{label}</Legend>
+```
+
+### Props
+<Props of={Legend} />
diff --git a/packages/grafana-ui/src/components/Forms/Legend.story.tsx b/packages/grafana-ui/src/components/Forms/Legend.story.tsx
index f119641deda..5708da1fccb 100644
--- a/packages/grafana-ui/src/components/Forms/Legend.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legend.story.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { text } from '@storybook/addon-knobs';
 
 import { Legend } from './Legend';
+import mdx from './Legend.mdx';
 
 const getKnobs = () => {
   return {
@@ -12,6 +13,11 @@ const getKnobs = () => {
 export default {
   title: 'Forms/Legend',
   component: Legend,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {