diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts
index 4d0aaca0925..f79088c384e 100644
--- a/packages/grafana-ui/.storybook/preview.ts
+++ b/packages/grafana-ui/.storybook/preview.ts
@@ -38,6 +38,7 @@ addParameters({
     light: GrafanaLight,
   },
   options: {
+    theme: GrafanaLight,
     showPanel: true,
     showRoots: true,
     panelPosition: 'bottom',
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.tsx
rename to packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.tsx
rename to packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.tsx
rename to packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
diff --git a/packages/grafana-ui/src/components/Input/Input.mdx b/packages/grafana-ui/src/components/Input/Input.mdx
index 8f3bb755768..60e991afcdf 100644
--- a/packages/grafana-ui/src/components/Input/Input.mdx
+++ b/packages/grafana-ui/src/components/Input/Input.mdx
@@ -1,6 +1,40 @@
-import { Props } from '@storybook/addon-docs/blocks';
-import { Input } from './Input';
+import { Props, Preview } from "@storybook/addon-docs/blocks";
+import { Input } from "./Input";
+import { Field } from "../Forms/Field";
+import { Icon } from "../Icon/Icon";
 
 # Input
 
+Used for regular text input. For an array of data or tree-structured data, consider using `Select` or `Cascader` respectively.
+
+## Prefix and suffix
+
+To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the canvas!
+
+```jsx
+<Input prefix={<Icon name="search" />} size="sm" />
+```
+
+<Preview>
+  <Input prefix={<Icon name="search" />} size="sm" />
+</Preview>
+
+## Usage in forms with Field
+
+`Input` should be used with the `Field` component to get labels and descriptions. It should also be used for validation. See the `Field` component for more information.
+
+```jsx
+<Field label="Important information" description="This information is very important, so you really need to fill it in">
+  <Input name="importantInput" required />
+</Field>
+```
+
+<Preview>
+  <Field
+    label="Important information"
+    description="This information is very important, so you really need to fill it in"
+  >
+    <Input name="importantInput" required />
+  </Field>
+</Preview>
 <Props of={Input} />
diff --git a/packages/grafana-ui/src/components/Input/Input.story.tsx b/packages/grafana-ui/src/components/Input/Input.story.tsx
index 873ebac3e7f..f588d385e60 100644
--- a/packages/grafana-ui/src/components/Input/Input.story.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.story.tsx
@@ -84,8 +84,8 @@ export const simple = () => {
     <div style={{ width: containerWidth }}>
       <Input
         disabled={disabled}
-        invalid={invalid}
         prefix={prefixEl}
+        invalid={invalid}
         suffix={suffixEl}
         loading={loading}
         addonBefore={before && addonBefore}