diff --git a/packages/textarea/stories/index.stories.mdx b/packages/textarea/stories/index.stories.mdx
index 4680ab27f..809577cdd 100644
--- a/packages/textarea/stories/index.stories.mdx
+++ b/packages/textarea/stories/index.stories.mdx
@@ -24,6 +24,7 @@ Default rows is 2 and it will grow to max-rows of 6.
 
 - `max-rows` attribute to set the amount of rows it should resize to, before it will scroll
 - `rows` attribute to set the minimum amount of rows
+- `readonly` attribute to prevent changing the content
 
 ## How to use
 
@@ -66,6 +67,22 @@ The textarea can be disabled with the `disabled` attribute.
   </Story>
 </Preview>
 
+### Readonly
+
+`readonly` attribute indicate that you can't change the content. Compared with `disabled` attribute, the `readonly` attribute doesn't prevent clicking or selecting the element.
+
+<Preview>
+  <Story name="Readonly">
+    {html`
+      <lion-textarea 
+        label="Readonly" 
+        readonly
+        .modelValue=${['batman', 'and', 'robin'].join('\n')}
+      ></lion-textarea>
+    `}
+  </Story>
+</Preview>
+
 ### Stop growing
 
 Use the `max-rows` attribute to make it stop growing after a certain amount of lines.