From ea33668014ab3a596a9bd651db6f867418981c78 Mon Sep 17 00:00:00 2001
From: Oana Mangiurea <oana.mangiurea@gmail.com>
Date: Wed, 8 Jul 2020 18:06:08 +0300
Subject: [PATCH] Update TextArea.mdx (#26159)

Add additional information in docs to textarea component
---
 .../src/components/TextArea/TextArea.mdx      | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.mdx b/packages/grafana-ui/src/components/TextArea/TextArea.mdx
index e31487cacd0..42e2344ec22 100644
--- a/packages/grafana-ui/src/components/TextArea/TextArea.mdx
+++ b/packages/grafana-ui/src/components/TextArea/TextArea.mdx
@@ -4,4 +4,26 @@ import { TextArea } from './TextArea';
 # TextArea
 Use for multi line inputs like descriptions.
 
+### Usage
+
+```jsx
+<TextArea invalid={invalid} placeholder={placeholder} cols={cols} disabled={disabled} />
+```
+
+### Usage in forms with Field
+
+`TextArea` 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">
+  <Textarea name="importantTextarea" required />
+</Field>
+```
+
+<Preview>
+  <Field label="Important information" description="This information is very important, so you really need to fill it in">
+    <Textarea name="importantTextarea" required />
+  </Field>
+</Preview>
+
 <Props of={TextArea} />