[docs][joy-ui] Add ref usage instructions on the Textarea page

docs/data/joy/components/textarea/TextareaRef.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Textarea from '@mui/joy/Textarea';
+import Stack from '@mui/joy/Stack';
+
+export default function TextareaRef() {
+  const textareaRef = React.useRef(null);
+
+  const handleTextareaFocus = () => {
+    textareaRef.current?.focus();
+  };
+
+  return (
+    <Stack direction="row" gap={1}>
+      <Textarea
+        placeholder="Placeholder"
+        slotProps={{ textarea: { ref: textareaRef } }}
+      />
+      <Button onClick={handleTextareaFocus}>Focus textarea element</Button>
+    </Stack>
+  );
+}

docs/data/joy/components/textarea/TextareaRef.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Textarea from '@mui/joy/Textarea';
+import Stack from '@mui/joy/Stack';
+
+export default function TextareaRef() {
+  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
+
+  const handleTextareaFocus = () => {
+    textareaRef.current?.focus();
+  };
+
+  return (
+    <Stack direction="row" gap={1}>
+      <Textarea
+        placeholder="Placeholder"
+        slotProps={{ textarea: { ref: textareaRef } }}
+      />
+      <Button onClick={handleTextareaFocus}>Focus textarea element</Button>
+    </Stack>
+  );
+}

docs/data/joy/components/textarea/TextareaRef.tsx.preview

@@ -0,0 +1,5 @@
+<Textarea
+  placeholder="Placeholder"
+  slotProps={{ textarea: { ref: textareaRef } }}
+/>
+<Button onClick={handleTextareaFocus}>Focus textarea element</Button>

docs/data/joy/components/textarea/textarea.md

@@ -115,6 +115,12 @@ It's usually more common to see textarea components using decorators at the top
 
 {{"demo": "TextareaDecorators.js"}}
 
+### HTML textarea ref
+
+Use the `slotProps.textarea` attribute to pass props to the `ref` and other [supported HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) to the textarea element.
+
+{{"demo": "TextareaRef.js"}}
+
 ## Accessibility
 
 In order for the textarea to be accessible, **it should be linked to a label**.