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

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+import { useRef } from 'react';
+
+export default function TextareaRef() {
+  const textareaRef = useRef(null);
+
+  const handleTextareaFocus = () => {
+    textareaRef.current.focus();
+  };
+
+  return (
+    <Box>
+      <Textarea ref={textareaRef} placeholder="Textarea" />
+      <button onClick={handleTextareaFocus}>Focus Textarea</button>
+    </Box>
+  );
+}
+

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+import { useRef } from 'react';
+
+export default function TextareaRef() {
+  const textareaRef = useRef(null);
+
+  const handleTextareaFocus = () => {
+    textareaRef.current.focus();
+  };
+
+  return (
+    <Box>
+      <Textarea ref={textareaRef} placeholder="Textarea" />
+      <button onClick={handleTextareaFocus}>Focus Textarea</button>
+    </Box>
+  );
+}
+

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

@@ -115,6 +115,21 @@ It's usually more common to see textarea components using decorators at the top
 
 {{"demo": "TextareaDecorators.js"}}
 
+### Textarea ref
+
+`useRef` in React is typically used to reference a DOM element or a component. In the case of form inputs like Input or TextArea in Joy UI, you can use useRef to access and interact with the underlying DOM node directly without causing re-renders.
+
+{{"demo": "TextareaRef.js"}}
+
+Input:
+```js
+<Input slotProps={{ input: { ref } }} />
+```
+Textarea:
+```js
+<Textarea slotProps={{ input: { ref } }} />
+```
+
 ## Accessibility
 
 In order for the textarea to be accessible, **it should be linked to a label**.