diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
index 92d0649a8b4..5184fd3c434 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
@@ -1,11 +1,11 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Props } from '@storybook/addon-docs/blocks';
 import { TagsInput } from './TagsInput';
 
 <Meta title="MDX|TagsInput" component={TagsInput} />
 
 # TagsInput
 
-A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed under the input and can be removed there by clicking the "X" icon. You can customize the width of the input.
+A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed next to the input and can be removed by clicking the "X" icon. You can customize the width of the input.
 
 ### Props
 <Props of={TagsInput} />
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
index b425f65fea2..3d99ba401d5 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import { TagsInput, Props } from './TagsInput';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { TagsInput } from '@grafana/ui';
-import mdx from './TagsInput.mdx';
 import { StoryExample } from '../../utils/storybook/StoryExample';
 import { VerticalGroup } from '../Layout/Layout';
+import mdx from './TagsInput.mdx';
 
 export default {
   title: 'Forms/TagsInput',
@@ -13,12 +14,20 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+    controls: {
+      exclude: ['onChange', 'className', 'tags'],
+    },
   },
-};
+} as Meta;
 
-export const Basic = () => {
+type StoryProps = Omit<Props, 'onChange' | 'className' | 'tags'>;
+
+export const Basic: Story<StoryProps> = (props) => {
   const [tags, setTags] = useState<string[]>([]);
-  return <TagsInput tags={tags} onChange={setTags} />;
+  return <TagsInput {...props} tags={tags} onChange={setTags} />;
 };
 
 export const WithManyTags = () => {
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index b81c8955e9e..cda23da174a 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -8,12 +8,17 @@ import { Input } from '../Input/Input';
 
 export interface Props {
   placeholder?: string;
+  /** Array of selected tags */
   tags?: string[];
   onChange: (tags: string[]) => void;
   width?: number;
   className?: string;
+  /** Toggle disabled state */
   disabled?: boolean;
+  /** Enable adding new tags when input loses focus */
   addOnBlur?: boolean;
+  /** Toggle invalid state */
+  invalid?: boolean;
 }
 
 export const TagsInput: FC<Props> = ({
@@ -24,6 +29,7 @@ export const TagsInput: FC<Props> = ({
   className,
   disabled,
   addOnBlur,
+  invalid,
 }) => {
   const [newTagName, setNewName] = useState('');
   const styles = useStyles(getStyles);
@@ -77,6 +83,7 @@ export const TagsInput: FC<Props> = ({
           value={newTagName}
           onKeyUp={onKeyboardAdd}
           onBlur={onBlur}
+          invalid={invalid}
           suffix={
             newTagName.length > 0 && (
               <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">