diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
index 92d0649a8b4b3..5184fd3c43492 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 b425f65fea2ae..3d99ba401d5b3 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;
+
+type StoryProps = Omit<Props, 'onChange' | 'className' | 'tags'>;
 
-export const Basic = () => {
+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 b81c8955e9e93..cda23da174a84 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">