diff --git a/app/javascript/widget/components/Form/TextArea.stories.js b/app/javascript/widget/components/Form/TextArea.stories.js
new file mode 100644
index 000000000..3f47c3323
--- /dev/null
+++ b/app/javascript/widget/components/Form/TextArea.stories.js
@@ -0,0 +1,51 @@
+import { action } from '@storybook/addon-actions';
+import wootTextArea from './TextArea';
+
+export default {
+  title: 'Components/Form/Text Area',
+  component: wootTextArea,
+  argTypes: {
+    label: {
+      defaultValue: 'Message',
+      control: {
+        type: 'text',
+      },
+    },
+    type: {
+      defaultValue: '',
+      control: {
+        type: 'text',
+      },
+    },
+    placeholder: {
+      defaultValue: 'Please enter your message',
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      defaultValue: 'Lorem ipsum is a placeholder text commonly used',
+      control: {
+        type: 'text ,number',
+      },
+    },
+    error: {
+      defaultValue: '',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { wootTextArea },
+  template:
+    '<woot-text-area v-bind="$props" @input="onClick"></woot-text-area>',
+});
+
+export const TextArea = Template.bind({});
+TextArea.args = {
+  onClick: action('Added'),
+};