diff --git a/.changeset/textarea-auto-size.md b/.changeset/textarea-auto-size.md
new file mode 100644
index 00000000000..07d34e656ae
--- /dev/null
+++ b/.changeset/textarea-auto-size.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Textarea: Add an `autoSize` option that allows the field to grow with its content
diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css
index 9397b4f8b3d..2394812c39a 100644
--- a/packages/react/src/Textarea/TextArea.module.css
+++ b/packages/react/src/Textarea/TextArea.module.css
@@ -29,6 +29,10 @@
resize: vertical;
}
+.TextArea[data-auto-size='true'] {
+ field-sizing: content;
+}
+
.TextArea:disabled {
resize: none;
}
diff --git a/packages/react/src/Textarea/Textarea.docs.json b/packages/react/src/Textarea/Textarea.docs.json
index d657b622f17..11afa62f593 100644
--- a/packages/react/src/Textarea/Textarea.docs.json
+++ b/packages/react/src/Textarea/Textarea.docs.json
@@ -67,6 +67,12 @@
"defaultValue": "'both'",
"description": "Changes the resize behavior"
},
+ {
+ "name": "autoSize",
+ "type": "boolean",
+ "defaultValue": "false",
+ "description": "Allows the textarea to grow to fit its content"
+ },
{
"name": "characterLimit",
"type": "number",
@@ -110,4 +116,4 @@
}
],
"subcomponents": []
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/Textarea/Textarea.features.stories.tsx b/packages/react/src/Textarea/Textarea.features.stories.tsx
index ccce128c3c0..f69c550a85b 100644
--- a/packages/react/src/Textarea/Textarea.features.stories.tsx
+++ b/packages/react/src/Textarea/Textarea.features.stories.tsx
@@ -108,6 +108,15 @@ export const CustomResizeBehavior = () => (
)
+export const AutoSize = () => (
+
+)
+
export const MinimumHeight = () => (