diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx
index 1dcace710fefa8..321e09aeb90a82 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx
@@ -1,58 +1,44 @@
 import * as React from 'react';
-import { makeStyles, shorthands, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, makeStyles, mergeClasses, shorthands, tokens, Textarea } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   base: {
     display: 'flex',
     flexDirection: 'column',
-
-    '> div': {
-      display: 'flex',
-      flexDirection: 'column',
-      marginTop: tokens.spacingVerticalMNudge,
-      ...shorthands.padding(tokens.spacingHorizontalMNudge),
-    },
-
-    '> div > label': {
-      marginBottom: tokens.spacingHorizontalXXS,
-      marginLeft: tokens.spacingHorizontalMNudge,
-    },
+    rowGap: tokens.spacingVerticalMNudge,
   },
-  filledLighter: {
+  inverted: {
     backgroundColor: tokens.colorNeutralBackgroundInverted,
-    '> label': {
-      color: tokens.colorNeutralForegroundInverted2,
-    },
   },
-  filledDarker: {
-    backgroundColor: tokens.colorNeutralBackgroundInverted,
-    '> label': {
-      color: tokens.colorNeutralForegroundInverted2,
-    },
+  invertedLabel: {
+    color: tokens.colorNeutralForegroundInverted2,
+  },
+  fieldWrapper: {
+    ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge),
   },
 });
 
 export const Appearance = () => {
-  const outlineId = useId('textarea-outline');
-  const filledDarkerId = useId('textarea-filleddarker');
-  const filledLighterId = useId('textarea-filledlighter');
   const styles = useStyles();
 
   return (
     <div className={styles.base}>
-      <div>
-        <Label htmlFor={outlineId}>Textarea with Outline appearance.</Label>
-        <Textarea id={outlineId} appearance="outline" placeholder="type here..." resize="both" />
+      <div className={styles.fieldWrapper}>
+        <Field label="Textarea with Outline appearance">
+          <Textarea appearance="outline" placeholder="type here..." resize="both" />
+        </Field>
       </div>
 
-      <div className={styles.filledDarker}>
-        <Label htmlFor={filledDarkerId}>Textarea with Filled Darker appearance.</Label>
-        <Textarea id={filledDarkerId} appearance="filled-darker" placeholder="type here..." resize="both" />
+      <div className={mergeClasses(styles.fieldWrapper, styles.inverted)}>
+        <Field label={{ children: 'Textarea with Filled Darker appearance', className: styles.invertedLabel }}>
+          <Textarea appearance="filled-darker" placeholder="type here..." resize="both" />
+        </Field>
       </div>
 
-      <div className={styles.filledLighter}>
-        <Label htmlFor={filledLighterId}>Textarea with Filled Lighter appearance.</Label>
-        <Textarea id={filledLighterId} appearance="filled-lighter" placeholder="type here..." resize="both" />
+      <div className={mergeClasses(styles.fieldWrapper, styles.inverted)}>
+        <Field label={{ children: 'Textarea with Filled Lighter appearance', className: styles.invertedLabel }}>
+          <Textarea appearance="filled-lighter" placeholder="type here..." resize="both" />
+        </Field>
       </div>
     </div>
   );
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md b/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md
index 42c17c6a3ef3da..a614e71278779e 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md
@@ -6,6 +6,7 @@
 ### Do
 
 - **Consider using `Textarea` with outline appearance.** When the contrast ratio against the immediate surrounding color is less than 3:1, consider using outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.
+- Prefer using `<Field>` instead of `<Label>` to handle accessibility automatically.
 
 ### Don't
 
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaControlled.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaControlled.stories.tsx
index 9673f7a2a85121..36a806b14426c8 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaControlled.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaControlled.stories.tsx
@@ -1,21 +1,8 @@
 import * as React from 'react';
-import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, Textarea } from '@fluentui/react-components';
 import type { TextareaProps } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > label': {
-      display: 'block',
-      marginBottom: tokens.spacingVerticalMNudge,
-    },
-  },
-});
-
 export const Controlled = () => {
-  const textareaId = useId('textarea');
-  const styles = useStyles();
   const [value, setValue] = React.useState('initial value');
 
   const onChange: TextareaProps['onChange'] = (ev, data) => {
@@ -25,9 +12,8 @@ export const Controlled = () => {
   };
 
   return (
-    <div className={styles.base}>
-      <Label htmlFor={textareaId}>Controlled Textarea limiting the value to 50 characters.</Label>
-      <Textarea value={value} onChange={onChange} id={textareaId} />
-    </div>
+    <Field label="Controlled Textarea limiting the value to 50 characters">
+      <Textarea value={value} onChange={onChange} />
+    </Field>
   );
 };
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaDefault.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaDefault.stories.tsx
index 03f7b47b5b800a..b562c4106dec40 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaDefault.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaDefault.stories.tsx
@@ -1,25 +1,9 @@
 import * as React from 'react';
-import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, Textarea } from '@fluentui/react-components';
 import type { TextareaProps } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > label': {
-      marginBottom: tokens.spacingVerticalMNudge,
-    },
-  },
-});
-
-export const Default = (props: Partial<TextareaProps>) => {
-  const textareaId = useId('textarea');
-  const styles = useStyles();
-
-  return (
-    <div className={styles.base}>
-      <Label htmlFor={textareaId}>Default Textarea</Label>
-      <Textarea id={textareaId} {...props} />
-    </div>
-  );
-};
+export const Default = (props: Partial<TextareaProps>) => (
+  <Field label="Default Textarea">
+    <Textarea {...props} />
+  </Field>
+);
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaDisabled.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaDisabled.stories.tsx
index 469a388031bf21..6a339b1324a688 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaDisabled.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaDisabled.stories.tsx
@@ -1,24 +1,8 @@
 import * as React from 'react';
-import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, Textarea } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > label': {
-      marginBottom: tokens.spacingVerticalMNudge,
-    },
-  },
-});
-
-export const Disabled = () => {
-  const disabledId = useId('textarea-disabled');
-  const styles = useStyles();
-
-  return (
-    <div className={styles.base}>
-      <Label htmlFor={disabledId}>Disabled Textarea.</Label>
-      <Textarea id={disabledId} disabled />
-    </div>
-  );
-};
+export const Disabled = () => (
+  <Field label="Disabled Textarea">
+    <Textarea disabled />
+  </Field>
+);
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaHeight.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaHeight.stories.tsx
deleted file mode 100644
index 90f4492c33a173..00000000000000
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaHeight.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
-
-const useStyles = makeStyles({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > label': {
-      display: 'block',
-      marginBottom: tokens.spacingVerticalMNudge,
-    },
-  },
-  textarea: {
-    height: '200px',
-  },
-});
-
-export const Height = () => {
-  const textareaId = useId('textarea');
-  const styles = useStyles();
-
-  return (
-    <div className={styles.base}>
-      <Label htmlFor={textareaId}>Textarea with a height of 200px</Label>
-      <Textarea resize="both" textarea={{ className: styles.textarea }} id={textareaId} />
-    </div>
-  );
-};
-
-Height.parameters = {
-  docs: {
-    description: {
-      story: `When changing a Textarea's height, the classname with the styling should be given to the textarea element.
-      Textarea has a wrapper that adds all the styling for the borders and an inner textarea element that handles all
-      the interaction, the wrapper is only in charge of surrounding the textarea element.`,
-    },
-  },
-};
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaPlaceholder.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaPlaceholder.stories.tsx
index d44d2fefa8d2f4..72223e794a5a5d 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaPlaceholder.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaPlaceholder.stories.tsx
@@ -1,23 +1,8 @@
 import * as React from 'react';
-import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, Textarea } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > label': {
-      marginBottom: tokens.spacingVerticalMNudge,
-    },
-  },
-});
-
-export const Placeholder = () => {
-  const styles = useStyles();
-  const textareaId = useId('textarea');
-  return (
-    <div className={styles.base}>
-      <Label htmlFor={textareaId}>Textarea with placeholder.</Label>
-      <Textarea id={textareaId} placeholder="type here..." />
-    </div>
-  );
-};
+export const Placeholder = () => (
+  <Field label="Textarea with placeholder">
+    <Textarea placeholder="type here..." />
+  </Field>
+);
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaResize.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaResize.stories.tsx
index 8de8e0bd6364b3..f48c510d1b74fc 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaResize.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaResize.stories.tsx
@@ -1,60 +1,34 @@
 import * as React from 'react';
-import { makeStyles, shorthands, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, makeStyles, Textarea, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   base: {
-    '& > div': {
-      marginTop: tokens.spacingVerticalMNudge,
-    },
-    '& > div > div': {
-      display: 'flex',
-      flexDirection: 'column',
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      ...shorthands.padding(tokens.spacingHorizontalMNudge),
-    },
-    '& > div > label': {
-      marginBottom: tokens.spacingHorizontalXXS,
-      marginLeft: tokens.spacingHorizontalMNudge,
-    },
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: tokens.spacingVerticalMNudge,
   },
 });
 
 export const Resize = () => {
-  const noneId = useId('textarea-none');
-  const verticalId = useId('textarea-vertical');
-  const horizontalId = useId('textarea-horizontal');
-  const bothId = useId('textarea-both');
   const styles = useStyles();
 
   return (
     <div className={styles.base}>
-      <div>
-        <Label htmlFor={noneId}>Textarea with resize set to "none".</Label>
-        <div>
-          <Textarea id={noneId} resize="none" />
-        </div>
-      </div>
+      <Field label='Textarea with resize set to "none"'>
+        <Textarea resize="none" />
+      </Field>
 
-      <div>
-        <Label htmlFor={verticalId}>Textarea with resize set to "vertical".</Label>
-        <div>
-          <Textarea id={verticalId} resize="vertical" />
-        </div>
-      </div>
+      <Field label='Textarea with resize set to "vertical"'>
+        <Textarea resize="vertical" />
+      </Field>
 
-      <div>
-        <Label htmlFor={horizontalId}>Textarea with resize set to "horizontal".</Label>
-        <div>
-          <Textarea id={horizontalId} resize="horizontal" />
-        </div>
-      </div>
+      <Field label='Textarea with resize set to "horizontal"'>
+        <Textarea resize="horizontal" />
+      </Field>
 
-      <div>
-        <Label htmlFor={bothId}>Textarea with resize set to "both".</Label>
-        <div>
-          <Textarea id={bothId} resize="both" />
-        </div>
-      </div>
+      <Field label='Textarea with resize set to "both"'>
+        <Textarea resize="both" />
+      </Field>
     </div>
   );
 };
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaSize.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaSize.stories.tsx
index ae66a91821af8e..9ff2b3be8003bc 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaSize.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaSize.stories.tsx
@@ -1,52 +1,30 @@
 import * as React from 'react';
-import { makeStyles, shorthands, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, makeStyles, Textarea, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   base: {
-    '& > div': {
-      marginTop: tokens.spacingVerticalMNudge,
-    },
-    '& > div > div': {
-      display: 'flex',
-      flexDirection: 'column',
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      ...shorthands.padding(tokens.spacingHorizontalMNudge),
-    },
-    '& > div > label': {
-      marginBottom: tokens.spacingHorizontalXXS,
-      marginLeft: tokens.spacingHorizontalMNudge,
-    },
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: tokens.spacingVerticalMNudge,
   },
 });
 
 export const Size = () => {
-  const smallId = useId('textarea-small');
-  const mediumId = useId('textarea-medium');
-  const largeId = useId('textarea-large');
   const styles = useStyles();
 
   return (
     <div className={styles.base}>
-      <div>
-        <Label htmlFor={smallId}>Small Textarea.</Label>
-        <div>
-          <Textarea id={smallId} size="small" />
-        </div>
-      </div>
+      <Field size="small" label="Small Textarea">
+        <Textarea />
+      </Field>
 
-      <div>
-        <Label htmlFor={mediumId}>Medium Textarea.</Label>
-        <div>
-          <Textarea id={mediumId} size="medium" />
-        </div>
-      </div>
+      <Field size="medium" label="Medium Textarea">
+        <Textarea />
+      </Field>
 
-      <div>
-        <Label htmlFor={largeId}>Large Textarea.</Label>
-        <div>
-          <Textarea id={largeId} size="large" />
-        </div>
-      </div>
+      <Field size="large" label="Large Textarea">
+        <Textarea />
+      </Field>
     </div>
   );
 };
diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaUncontrolled.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaUncontrolled.stories.tsx
index ead1c71649dd30..3ceed4b6c57536 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaUncontrolled.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaUncontrolled.stories.tsx
@@ -1,31 +1,14 @@
 import * as React from 'react';
-import { makeStyles, tokens, useId, Label, Textarea } from '@fluentui/react-components';
+import { Field, Textarea } from '@fluentui/react-components';
 import type { TextareaProps } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > label': {
-      marginBottom: tokens.spacingVerticalMNudge,
-    },
-  },
-});
-
 const onChange: TextareaProps['onChange'] = (ev, data) => {
   // Uncontrolled inputs can be notified of changes to the value
   console.log(`New value: "${data.value}"`);
 };
 
-export const Uncontrolled = () => {
-  const textareaId = useId('textarea');
-  const styles = useStyles();
-
-  return (
-    <div className={styles.base}>
-      <Label htmlFor={textareaId}>Uncontrolled Textarea.</Label>
-      <Textarea id={textareaId} aria-describedby="desc" onChange={onChange} placeholder="type here..." />
-      <span id="desc">Check console for new value.</span>
-    </div>
-  );
-};
+export const Uncontrolled = () => (
+  <Field label="Uncontrolled Textarea" hint="Check console for new value">
+    <Textarea onChange={onChange} placeholder="type here..." />
+  </Field>
+);
diff --git a/packages/react-components/react-textarea/stories/Textarea/index.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/index.stories.tsx
index 1aaf340a0d6319..ad03268d830d2b 100644
--- a/packages/react-components/react-textarea/stories/Textarea/index.stories.tsx
+++ b/packages/react-components/react-textarea/stories/Textarea/index.stories.tsx
@@ -11,7 +11,6 @@ export { Resize } from './TextareaResize.stories';
 export { Size } from './TextareaSize.stories';
 export { Uncontrolled } from './TextareaUncontrolled.stories';
 export { Controlled } from './TextareaControlled.stories';
-export { Height } from './TextareaHeight.stories';
 
 export default {
   title: 'Components/Textarea',