diff --git a/packages/design-system-react-native/src/components/Textarea/README.md b/packages/design-system-react-native/src/components/Textarea/README.md
new file mode 100644
index 000000000..6356e3edf
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/README.md
@@ -0,0 +1,149 @@
+# Textarea
+
+Textarea is a light-weight, controlled-only borderless multi-line text input component.
+
+```tsx
+import { Textarea, TextVariant } from '@metamask/design-system-react-native';
+
+<Textarea value="" placeholder="Enter text" textVariant={TextVariant.BodyMd} />;
+```
+
+## Props
+
+This component extends React Native's [TextInput](https://reactnative.dev/docs/textinput) component with `multiline` enabled.
+
+### `value`
+
+Required controlled value for the Textarea.
+
+| TYPE     | REQUIRED | DEFAULT |
+| -------- | -------- | ------- |
+| `string` | Yes      | N/A     |
+
+### `textVariant`
+
+Optional enum to select between Typography variants.
+
+| TYPE          | REQUIRED | DEFAULT              |
+| ------------- | -------- | -------------------- |
+| `TextVariant` | No       | `TextVariant.BodyMd` |
+
+```tsx
+import { Textarea, TextVariant } from '@metamask/design-system-react-native';
+
+<Textarea value="" placeholder="BodyMd (default)" textVariant={TextVariant.BodyMd} />
+<Textarea value="" placeholder="BodySm" textVariant={TextVariant.BodySm} />
+```
+
+### `isDisabled`
+
+Optional boolean to disable the Textarea.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+<Textarea value="Not editable" isDisabled />
+```
+
+### `isReadOnly`
+
+Optional boolean to make the Textarea read-only.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+<Textarea value="Read-only value" isReadOnly />
+```
+
+### `isError`
+
+Optional boolean to indicate an error state. Applies error border styling.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+<Textarea value="" placeholder="Invalid input" isError />
+```
+
+### `numberOfLines`
+
+Optional number of visible lines. Controls the minimum height of the textarea.
+
+| TYPE     | REQUIRED | DEFAULT |
+| -------- | -------- | ------- |
+| `number` | No       | `4`     |
+
+```tsx
+<Textarea value="" placeholder="4 lines (default)" numberOfLines={4} />
+<Textarea value="" placeholder="8 lines" numberOfLines={8} />
+```
+
+### `isStateStylesDisabled`
+
+Optional boolean to disable state styles (focus border, disabled opacity).
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+import { Textarea } from '@metamask/design-system-react-native';
+
+<Textarea value="Disabled, full opacity" isDisabled isStateStylesDisabled />;
+```
+
+### `twClassName`
+
+Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to:
+
+- Add new styles that don't exist in the default component
+- Override the component's default styles when needed
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+```tsx
+import { Textarea } from '@metamask/design-system-react-native';
+
+// Add additional styles
+<Textarea value="" twClassName="mt-4" placeholder="With margin" />
+
+// Override default styles
+<Textarea value="" twClassName="bg-error-muted" placeholder="Override background" />
+```
+
+### `style`
+
+Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible. Use `style` with `tw.style()` for conditionals or dynamic values.
+
+| TYPE                   | REQUIRED | DEFAULT     |
+| ---------------------- | -------- | ----------- |
+| `StyleProp<TextStyle>` | No       | `undefined` |
+
+```tsx
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { Textarea } from '@metamask/design-system-react-native';
+
+export const ConditionalExample = ({ isActive }: { isActive: boolean }) => {
+  const tw = useTailwind();
+
+  return (
+    <Textarea
+      value=""
+      placeholder="Conditional styling"
+      style={tw.style('text-default', isActive && 'border-primary-default')}
+    />
+  );
+};
+```
+
+## References
+
+[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940)
diff --git a/packages/design-system-react-native/src/components/Textarea/Textarea.constants.ts b/packages/design-system-react-native/src/components/Textarea/Textarea.constants.ts
new file mode 100644
index 000000000..e4a048532
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/Textarea.constants.ts
@@ -0,0 +1,75 @@
+import { typography } from '@metamask/design-tokens';
+
+import { TextVariant } from '../../types';
+
+/**
+ * Typographic metrics for Textarea: same tokens as `text-*` utilities but **without** `lineHeight`.
+ * React Native `TextInput` with multiline aligns text more predictably when line height is not set
+ * from the design-system paragraph specs.
+ */
+export const MAP_TEXT_VARIANT_TEXTAREA_METRICS: Record<
+  TextVariant,
+  { fontSize: number; letterSpacing: number }
+> = {
+  [TextVariant.DisplayLg]: {
+    fontSize: typography.sDisplayLG.fontSize,
+    letterSpacing: typography.sDisplayLG.letterSpacing,
+  },
+  [TextVariant.DisplayMd]: {
+    fontSize: typography.sDisplayMD.fontSize,
+    letterSpacing: typography.sDisplayMD.letterSpacing,
+  },
+  [TextVariant.HeadingLg]: {
+    fontSize: typography.sHeadingLG.fontSize,
+    letterSpacing: typography.sHeadingLG.letterSpacing,
+  },
+  [TextVariant.HeadingMd]: {
+    fontSize: typography.sHeadingMD.fontSize,
+    letterSpacing: typography.sHeadingMD.letterSpacing,
+  },
+  [TextVariant.HeadingSm]: {
+    fontSize: typography.sHeadingSM.fontSize,
+    letterSpacing: typography.sHeadingSM.letterSpacing,
+  },
+  [TextVariant.BodyLg]: {
+    fontSize: typography.sBodyLGMedium.fontSize,
+    letterSpacing: typography.sBodyLGMedium.letterSpacing,
+  },
+  [TextVariant.BodyMd]: {
+    fontSize: typography.sBodyMD.fontSize,
+    letterSpacing: typography.sBodyMD.letterSpacing,
+  },
+  [TextVariant.BodySm]: {
+    fontSize: typography.sBodySM.fontSize,
+    letterSpacing: typography.sBodySM.letterSpacing,
+  },
+  [TextVariant.BodyXs]: {
+    fontSize: typography.sBodyXS.fontSize,
+    letterSpacing: typography.sBodyXS.letterSpacing,
+  },
+  [TextVariant.PageHeading]: {
+    fontSize: typography.sPageHeading.fontSize,
+    letterSpacing: typography.sPageHeading.letterSpacing,
+  },
+  [TextVariant.SectionHeading]: {
+    fontSize: typography.sSectionHeading.fontSize,
+    letterSpacing: typography.sSectionHeading.letterSpacing,
+  },
+  [TextVariant.ButtonLabelMd]: {
+    fontSize: typography.sButtonLabelMd.fontSize,
+    letterSpacing: typography.sButtonLabelMd.letterSpacing,
+  },
+  [TextVariant.ButtonLabelLg]: {
+    fontSize: typography.sButtonLabelLg.fontSize,
+    letterSpacing: typography.sButtonLabelLg.letterSpacing,
+  },
+  [TextVariant.AmountDisplayLg]: {
+    fontSize: typography.sAmountDisplayLg.fontSize,
+    letterSpacing: typography.sAmountDisplayLg.letterSpacing,
+  },
+};
+
+/**
+ * Default number of lines displayed in the Textarea.
+ */
+export const TEXTAREA_DEFAULT_NUMBER_OF_LINES = 4;
diff --git a/packages/design-system-react-native/src/components/Textarea/Textarea.figma.tsx b/packages/design-system-react-native/src/components/Textarea/Textarea.figma.tsx
new file mode 100644
index 000000000..761b709ce
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/Textarea.figma.tsx
@@ -0,0 +1,37 @@
+// import figma needs to remain as figma otherwise it breaks code connect
+// eslint-disable-next-line import-x/no-named-as-default
+import figma from '@figma/code-connect';
+import React from 'react';
+
+import { Textarea } from './Textarea';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * React Native implementation of Textarea component
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A-WIP--MMDS-Components?node-id=12091%3A104',
+  {
+    props: {
+      isDisabled: figma.boolean('isDisabled'),
+      isError: figma.boolean('isError'),
+      isReadOnly: figma.boolean('isReadOnly'),
+      placeholder: figma.string('placeholder'),
+    },
+    example: ({ isDisabled, isError, isReadOnly, placeholder }) => (
+      <Textarea
+        value=""
+        isDisabled={isDisabled}
+        isError={isError}
+        isReadOnly={isReadOnly}
+        placeholder={placeholder ?? 'Enter text'}
+      />
+    ),
+  },
+);
diff --git a/packages/design-system-react-native/src/components/Textarea/Textarea.stories.tsx b/packages/design-system-react-native/src/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 000000000..a1eddf33f
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/Textarea.stories.tsx
@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+import { TextVariant } from '../../types';
+
+import { Textarea } from './Textarea';
+import type { TextareaProps } from './Textarea.types';
+
+function ControlledTextarea(props: TextareaProps) {
+  const [value, setValue] = useState(props.value ?? '');
+  useEffect(() => {
+    setValue(props.value ?? '');
+  }, [props.value]);
+
+  return <Textarea {...props} value={value} onChangeText={setValue} />;
+}
+
+const meta: Meta<TextareaProps> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  argTypes: {
+    textVariant: {
+      control: 'select',
+      options: Object.values(TextVariant),
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    isReadOnly: {
+      control: 'boolean',
+    },
+    isError: {
+      control: 'boolean',
+    },
+    isStateStylesDisabled: {
+      control: 'boolean',
+    },
+    numberOfLines: {
+      control: 'number',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    twClassName: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TextareaProps>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+    placeholder: 'Sample Placeholder',
+  },
+  render: (args) => <ControlledTextarea {...args} />,
+};
+
+export const Variant: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <ControlledTextarea
+        placeholder="BodyMd (default)"
+        textVariant={TextVariant.BodyMd}
+        value="Sample text"
+      />
+      <ControlledTextarea
+        placeholder="BodySm"
+        textVariant={TextVariant.BodySm}
+        value="Sample text"
+      />
+      <ControlledTextarea
+        placeholder="HeadingSm"
+        textVariant={TextVariant.HeadingSm}
+        value="Sample text"
+      />
+    </View>
+  ),
+};
+
+export const IsDisabled: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <ControlledTextarea placeholder="Enabled" value="Editable" />
+      <Textarea placeholder="Disabled" value="Not editable" isDisabled />
+    </View>
+  ),
+};
+
+export const IsReadOnly: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <ControlledTextarea placeholder="Editable" value="" />
+      <Textarea placeholder="Read-only" value="Read-only value" isReadOnly />
+    </View>
+  ),
+};
+
+export const IsError: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <ControlledTextarea placeholder="Default state" value="Normal textarea" />
+      <Textarea
+        placeholder="Error state"
+        value="This field has an error"
+        isError
+      />
+    </View>
+  ),
+};
+
+export const NumberOfLines: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <ControlledTextarea
+        placeholder="4 lines (default)"
+        numberOfLines={4}
+        value="Default 4-line textarea"
+      />
+      <ControlledTextarea
+        placeholder="8 lines"
+        numberOfLines={8}
+        value="Taller 8-line textarea for longer content"
+      />
+    </View>
+  ),
+};
+
+export const IsStateStylesDisabled: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Textarea
+        placeholder="With state styles (default)"
+        value="Disabled with opacity"
+        isDisabled
+      />
+      <Textarea
+        placeholder="State styles disabled"
+        value="Disabled, full opacity"
+        isDisabled
+        isStateStylesDisabled
+      />
+    </View>
+  ),
+};
diff --git a/packages/design-system-react-native/src/components/Textarea/Textarea.test.tsx b/packages/design-system-react-native/src/components/Textarea/Textarea.test.tsx
new file mode 100644
index 000000000..e78a4cc86
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/Textarea.test.tsx
@@ -0,0 +1,302 @@
+import {
+  Theme,
+  ThemeProvider,
+  useTailwind,
+} from '@metamask/design-system-twrnc-preset';
+import { darkTheme } from '@metamask/design-tokens';
+import { renderHook } from '@testing-library/react-hooks';
+import { act, render, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { TextInput } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
+import { create } from 'react-test-renderer';
+
+import { TextVariant } from '../../types';
+
+import { Textarea } from './Textarea';
+
+const TEST_ID = 'textarea';
+
+function flattenStyle(style: StyleProp<TextStyle>): TextStyle[] {
+  if (style === null || style === undefined) {
+    return [];
+  }
+  if (Array.isArray(style)) {
+    return style.flatMap((s) => flattenStyle(s as StyleProp<TextStyle>));
+  }
+  return [style as TextStyle];
+}
+
+describe('Textarea', () => {
+  const tw = renderHook(() => useTailwind()).result.current;
+
+  it('renders with multiline enabled', () => {
+    const { getByTestId } = render(<Textarea testID={TEST_ID} value="" />);
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea).toBeOnTheScreen();
+    expect(textarea.props.multiline).toBe(true);
+  });
+
+  it('sets textAlignVertical to top', () => {
+    const { getByTestId } = render(<Textarea testID={TEST_ID} value="" />);
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.textAlignVertical).toBe('top');
+  });
+
+  it('renders with the correct default numberOfLines', () => {
+    const { getByTestId } = render(<Textarea testID={TEST_ID} value="" />);
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.numberOfLines).toBe(4);
+  });
+
+  it('renders with a custom numberOfLines', () => {
+    const { getByTestId } = render(
+      <Textarea testID={TEST_ID} value="" numberOfLines={8} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.numberOfLines).toBe(8);
+  });
+
+  it('renders with the correct TextVariant', () => {
+    const { getByTestId } = render(
+      <Textarea
+        testID={TEST_ID}
+        textVariant={TextVariant.HeadingSm}
+        value="Sample"
+      />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea).toBeDefined();
+    const styles = flattenStyle(textarea.props.style);
+    const expectedFontSize = (tw.style('text-heading-sm') as TextStyle)
+      .fontSize;
+    expect(styles).toContainEqual(
+      expect.objectContaining({ fontSize: expectedFontSize }),
+    );
+  });
+
+  it('renders correct disabled state when isDisabled is true', () => {
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} isDisabled placeholder="Disabled" />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.editable).toBe(false);
+    const styles = flattenStyle(textarea.props.style);
+    expect(styles).toContainEqual(
+      expect.objectContaining({ opacity: tw`opacity-50`.opacity }),
+    );
+  });
+
+  it('renders correct readonly state when isReadOnly is true', () => {
+    const { getByTestId } = render(
+      <Textarea value="Read-only content" testID={TEST_ID} isReadOnly />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.editable).toBe(false);
+  });
+
+  it('applies error border when isError is true', () => {
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} isError />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    const styles = flattenStyle(textarea.props.style);
+    const expectedBorderColor = (tw.style('border-error-default') as TextStyle)
+      .borderColor;
+    expect(styles).toContainEqual(
+      expect.objectContaining({ borderColor: expectedBorderColor }),
+    );
+  });
+
+  it('maintains error border when focused and isError is true', () => {
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} isError />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    fireEvent(textarea, 'focus');
+    const styles = flattenStyle(textarea.props.style);
+    const expectedBorderColor = (tw.style('border-error-default') as TextStyle)
+      .borderColor;
+    expect(styles).toContainEqual(
+      expect.objectContaining({ borderColor: expectedBorderColor }),
+    );
+  });
+
+  it('does not apply state styles when isStateStylesDisabled is true', () => {
+    const { getByTestId } = render(
+      <Textarea
+        value=""
+        testID={TEST_ID}
+        isDisabled
+        isStateStylesDisabled
+        placeholder="Disabled"
+      />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.editable).toBe(false);
+    const styles = flattenStyle(textarea.props.style);
+    expect(styles).not.toContainEqual(
+      expect.objectContaining({ opacity: 0.5 }),
+    );
+  });
+
+  it('calls onBlur when input loses focus', () => {
+    const onBlur = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} onBlur={onBlur} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    fireEvent(textarea, 'focus');
+    fireEvent(textarea, 'blur');
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it('calls onFocus when input receives focus', () => {
+    const onFocus = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} onFocus={onFocus} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    fireEvent(textarea, 'focus');
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('defaults autoFocus to false', () => {
+    const { getByTestId } = render(<Textarea value="" testID={TEST_ID} />);
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.autoFocus).toBe(false);
+  });
+
+  it('respects autoFocus when set to true', () => {
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} autoFocus />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.autoFocus).toBe(true);
+  });
+
+  it('uses dark theme placeholder color when ThemeProvider has theme dark', () => {
+    const { getByTestId } = render(
+      <ThemeProvider theme={Theme.Dark}>
+        <Textarea value="" testID={TEST_ID} placeholder="Dark theme" />
+      </ThemeProvider>,
+    );
+    const textarea = getByTestId(TEST_ID);
+    expect(textarea.props.placeholderTextColor).toBe(
+      darkTheme.colors.text.alternative,
+    );
+  });
+
+  it('does not call onBlur when disabled and blur fires', () => {
+    const onBlur = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} isDisabled onBlur={onBlur} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    fireEvent(textarea, 'focus');
+    fireEvent(textarea, 'blur');
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('does not call onFocus when disabled and focus fires', () => {
+    const onFocus = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} isDisabled onFocus={onFocus} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    fireEvent(textarea, 'focus');
+    expect(onFocus).not.toHaveBeenCalled();
+  });
+
+  it('invokes onBlur with event when not disabled', () => {
+    const onBlur = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} onBlur={onBlur} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    fireEvent(textarea, 'focus');
+    fireEvent(textarea, 'blur', { nativeEvent: {} });
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledWith(
+      expect.objectContaining({ nativeEvent: {} }),
+    );
+  });
+
+  it('invokes onFocus with event when not disabled', () => {
+    const onFocus = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} onFocus={onFocus} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    fireEvent(textarea, 'focus', { nativeEvent: {} });
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onFocus).toHaveBeenCalledWith(
+      expect.objectContaining({ nativeEvent: {} }),
+    );
+  });
+
+  it('calls onBlur handler when TextInput onBlur prop is invoked', () => {
+    const onBlur = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} onBlur={onBlur} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    const blurEvent = { nativeEvent: { text: '' } };
+    act(() => {
+      textarea.props.onBlur(blurEvent);
+    });
+    expect(onBlur).toHaveBeenCalledWith(blurEvent);
+  });
+
+  it('calls onFocus handler when TextInput onFocus prop is invoked', () => {
+    const onFocus = jest.fn();
+    const { getByTestId } = render(
+      <Textarea value="" testID={TEST_ID} onFocus={onFocus} />,
+    );
+    const textarea = getByTestId(TEST_ID);
+    const focusEvent = { nativeEvent: { text: '' } };
+    act(() => {
+      textarea.props.onFocus(focusEvent);
+    });
+    expect(onFocus).toHaveBeenCalledWith(focusEvent);
+  });
+
+  it('onBlurHandler and onFocusHandler run when invoked via test renderer', () => {
+    const onBlur = jest.fn();
+    const onFocus = jest.fn();
+    const tree = create(
+      <ThemeProvider theme={Theme.Light}>
+        <Textarea value="" testID={TEST_ID} onBlur={onBlur} onFocus={onFocus} />
+      </ThemeProvider>,
+    );
+    const textarea = tree.root.findByProps({ testID: TEST_ID });
+    const blurEvent = { nativeEvent: { text: '' } };
+    const focusEvent = { nativeEvent: { text: '' } };
+    act(() => {
+      textarea.props.onBlur(blurEvent);
+    });
+    expect(onBlur).toHaveBeenCalledWith(blurEvent);
+    act(() => {
+      textarea.props.onFocus(focusEvent);
+    });
+    expect(onFocus).toHaveBeenCalledWith(focusEvent);
+  });
+
+  it('handlers run without callbacks (optional chaining branches)', () => {
+    const tree = create(
+      <ThemeProvider theme={Theme.Light}>
+        <Textarea value="" testID={TEST_ID} />
+      </ThemeProvider>,
+    );
+    const textarea = tree.root.findByType(TextInput);
+    const event = { nativeEvent: { text: '' } };
+    act(() => {
+      textarea.props.onBlur(event);
+    });
+    act(() => {
+      textarea.props.onFocus(event);
+    });
+    expect(textarea.props.onBlur).toBeDefined();
+    expect(textarea.props.onFocus).toBeDefined();
+  });
+});
diff --git a/packages/design-system-react-native/src/components/Textarea/Textarea.tsx b/packages/design-system-react-native/src/components/Textarea/Textarea.tsx
new file mode 100644
index 000000000..1ae160705
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,138 @@
+import {
+  Theme,
+  useTailwind,
+  useTheme,
+} from '@metamask/design-system-twrnc-preset';
+import { darkTheme, lightTheme } from '@metamask/design-tokens';
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { TextInput } from 'react-native';
+
+import { FontFamily, TextVariant } from '../../types';
+import {
+  MAP_TEXT_VARIANT_FONTWEIGHT,
+  TWCLASSMAP_TEXT_FONTWEIGHT,
+} from '../Text/Text.constants';
+
+import {
+  MAP_TEXT_VARIANT_TEXTAREA_METRICS,
+  TEXTAREA_DEFAULT_NUMBER_OF_LINES,
+} from './Textarea.constants';
+import type { TextareaProps } from './Textarea.types';
+
+export const Textarea = forwardRef<TextInput, TextareaProps>(
+  (
+    {
+      style,
+      textVariant = TextVariant.BodyMd,
+      isStateStylesDisabled,
+      isDisabled = false,
+      isReadOnly = false,
+      isError = false,
+      numberOfLines = TEXTAREA_DEFAULT_NUMBER_OF_LINES,
+      value,
+      placeholder,
+      twClassName,
+      onBlur,
+      onFocus,
+      autoFocus = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(autoFocus);
+    const tw = useTailwind();
+    const theme = useTheme();
+
+    const placeholderTextColor = useMemo(
+      () =>
+        theme === Theme.Light
+          ? lightTheme.colors.text.alternative
+          : darkTheme.colors.text.alternative,
+      [theme],
+    );
+
+    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];
+    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];
+    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;
+
+    const textareaStyle = useMemo(
+      () =>
+        tw.style(
+          fontClass,
+          'text-default',
+          'bg-default',
+          'border',
+          !isError && 'border-transparent',
+          isError && 'border-error-default',
+          !isStateStylesDisabled && isDisabled && 'opacity-50',
+          !isStateStylesDisabled &&
+            !isDisabled &&
+            isFocused &&
+            !isError &&
+            'border-primary-default',
+          !isStateStylesDisabled &&
+            !isDisabled &&
+            isFocused &&
+            isError &&
+            'border-error-default',
+          twClassName,
+        ),
+      [
+        fontClass,
+        isError,
+        isStateStylesDisabled,
+        isDisabled,
+        isFocused,
+        twClassName,
+        tw,
+      ],
+    );
+
+    const variantTextStyle = useMemo(
+      () => MAP_TEXT_VARIANT_TEXTAREA_METRICS[textVariant],
+      [textVariant],
+    );
+
+    /* istanbul ignore next: handler body covered by focus/blur tests */
+    const onBlurHandler = useCallback(
+      (e: Parameters<NonNullable<TextareaProps['onBlur']>>[0]) => {
+        if (!isDisabled) {
+          setIsFocused(false);
+          onBlur?.(e);
+        }
+      },
+      [isDisabled, onBlur],
+    );
+
+    /* istanbul ignore next: handler body covered by focus/blur tests */
+    const onFocusHandler = useCallback(
+      (e: Parameters<NonNullable<TextareaProps['onFocus']>>[0]) => {
+        if (!isDisabled) {
+          setIsFocused(true);
+          onFocus?.(e);
+        }
+      },
+      [isDisabled, onFocus],
+    );
+
+    return (
+      <TextInput
+        ref={ref}
+        placeholderTextColor={placeholderTextColor}
+        {...props}
+        placeholder={placeholder}
+        value={value}
+        style={[textareaStyle, variantTextStyle, style]}
+        editable={!isDisabled && !isReadOnly}
+        autoFocus={autoFocus}
+        multiline
+        numberOfLines={numberOfLines}
+        textAlignVertical="top"
+        onBlur={onBlurHandler}
+        onFocus={onFocusHandler}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';
diff --git a/packages/design-system-react-native/src/components/Textarea/Textarea.types.ts b/packages/design-system-react-native/src/components/Textarea/Textarea.types.ts
new file mode 100644
index 000000000..36905ad17
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/Textarea.types.ts
@@ -0,0 +1,38 @@
+import type { TextareaPropsShared } from '@metamask/design-system-shared';
+import type { TextInputProps } from 'react-native';
+
+import type { TextVariant } from '../../types';
+
+/**
+ * Textarea component props (React Native platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React Native specific platform concerns
+ */
+export type TextareaProps = Omit<TextInputProps, 'editable' | 'value'> &
+  TextareaPropsShared & {
+    /**
+     * Controlled value for Textarea.
+     */
+    value: string;
+    /**
+     * Optional enum to select between Typography variants.
+     *
+     * @default TextVariant.BodyMd
+     */
+    textVariant?: TextVariant;
+    /**
+     * Optional number of lines to display. Controls the minimum height of the textarea.
+     *
+     * @default 4
+     */
+    numberOfLines?: number;
+    /**
+     * Optional boolean to disable state styles (focus border, disabled opacity).
+     *
+     * @default false
+     */
+    isStateStylesDisabled?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+  };
diff --git a/packages/design-system-react-native/src/components/Textarea/index.ts b/packages/design-system-react-native/src/components/Textarea/index.ts
new file mode 100644
index 000000000..5d277aef0
--- /dev/null
+++ b/packages/design-system-react-native/src/components/Textarea/index.ts
@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.types';
diff --git a/packages/design-system-react-native/src/components/index.ts b/packages/design-system-react-native/src/components/index.ts
index 64fcf61c0..f691bd7aa 100644
--- a/packages/design-system-react-native/src/components/index.ts
+++ b/packages/design-system-react-native/src/components/index.ts
@@ -139,6 +139,9 @@ export type { IconProps } from './Icon';
 export { Input } from './Input';
 export type { InputProps } from './Input';
 
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+
 export { Label } from './Label';
 export type { LabelProps } from './Label';
 
diff --git a/packages/design-system-react/src/components/Textarea/README.mdx b/packages/design-system-react/src/components/Textarea/README.mdx
new file mode 100644
index 000000000..a35d997bf
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/README.mdx
@@ -0,0 +1,247 @@
+import { Controls, Canvas } from '@storybook/addon-docs/blocks';
+
+import * as TextareaStories from './Textarea.stories';
+
+# Textarea
+
+Textarea is a light-weight borderless multi-line text input component.
+
+```tsx
+import { Textarea } from '@metamask/design-system-react';
+
+<Textarea placeholder="Enter text" />;
+```
+
+<Canvas of={TextareaStories.Default} />
+
+## Props
+
+### `textVariant`
+
+Optional enum to select between Typography variants.
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>TextVariant</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>TextVariant.BodyMd</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={TextareaStories.Variant} />
+
+### `resize`
+
+Controls the resize behavior of the textarea. Uses the CSS `resize` property.
+
+Available values:
+
+- `TextareaResize.Vertical` (default) — resizable vertically only
+- `TextareaResize.Horizontal` — resizable horizontally only
+- `TextareaResize.Both` — resizable in both directions
+- `TextareaResize.None` — not resizable
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>TextareaResize</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>TextareaResize.Vertical</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={TextareaStories.Resize} />
+
+### `isDisabled`
+
+Optional boolean to disable the textarea.
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>boolean</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>false</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={TextareaStories.IsDisabled} />
+
+### `isReadOnly`
+
+Optional boolean to make the textarea read-only.
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>boolean</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>false</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={TextareaStories.IsReadOnly} />
+
+### `isError`
+
+Optional boolean to indicate an error state. Applies error border styling and sets `aria-invalid`.
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>boolean</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>false</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={TextareaStories.IsError} />
+
+### `rows`
+
+Number of visible text lines. Controls the default height of the textarea.
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>number</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>undefined</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Canvas of={TextareaStories.Rows} />
+
+### `className`
+
+Use the `className` prop to add custom CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to:
+
+- Add new styles that don't exist in the default component
+- Override the component's default styles when needed
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>string</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>undefined</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### `style`
+
+The `style` prop should primarily be used for dynamic inline styles that cannot be achieved with `className` alone. For static styles, prefer using `className` with Tailwind classes.
+
+<table>
+  <thead>
+    <tr>
+      <th align="left">TYPE</th>
+      <th align="left">REQUIRED</th>
+      <th align="left">DEFAULT</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td align="left">
+        <code>object</code>
+      </td>
+      <td align="left">No</td>
+      <td align="left">
+        <code>undefined</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Component API
+
+<Controls of={TextareaStories.Default} />
+
+## References
+
+[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940)
diff --git a/packages/design-system-react/src/components/Textarea/Textarea.constants.ts b/packages/design-system-react/src/components/Textarea/Textarea.constants.ts
new file mode 100644
index 000000000..660dcc0a2
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/Textarea.constants.ts
@@ -0,0 +1,34 @@
+/**
+ * TextareaResize - resize
+ * Controls the resize behavior of the textarea element.
+ */
+export const TextareaResize = {
+  /**
+   * The textarea cannot be resized.
+   */
+  None: 'none',
+  /**
+   * The textarea can be resized both horizontally and vertically.
+   */
+  Both: 'both',
+  /**
+   * The textarea can only be resized horizontally.
+   */
+  Horizontal: 'horizontal',
+  /**
+   * The textarea can only be resized vertically.
+   */
+  Vertical: 'vertical',
+} as const;
+export type TextareaResize =
+  (typeof TextareaResize)[keyof typeof TextareaResize];
+
+/**
+ * Maps TextareaResize values to Tailwind CSS resize classes.
+ */
+export const CLASSMAP_TEXTAREA_RESIZE: Record<TextareaResize, string> = {
+  [TextareaResize.None]: 'resize-none',
+  [TextareaResize.Both]: 'resize',
+  [TextareaResize.Horizontal]: 'resize-x',
+  [TextareaResize.Vertical]: 'resize-y',
+};
diff --git a/packages/design-system-react/src/components/Textarea/Textarea.figma.tsx b/packages/design-system-react/src/components/Textarea/Textarea.figma.tsx
new file mode 100644
index 000000000..964a6d440
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/Textarea.figma.tsx
@@ -0,0 +1,45 @@
+// import figma needs to remain as figma otherwise it breaks code connect
+// eslint-disable-next-line import-x/no-named-as-default
+import figma from '@figma/code-connect';
+import React from 'react';
+
+import { Textarea } from './Textarea';
+
+import { TextareaResize } from '.';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * React web implementation of Textarea component
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A-WIP--MMDS-Components?node-id=12091%3A104',
+  {
+    props: {
+      isDisabled: figma.boolean('isDisabled'),
+      isError: figma.boolean('isError'),
+      isReadOnly: figma.boolean('isReadOnly'),
+      resize: figma.enum('resize', {
+        Vertical: TextareaResize.Vertical,
+        Horizontal: TextareaResize.Horizontal,
+        Both: TextareaResize.Both,
+        None: TextareaResize.None,
+      }),
+      placeholder: figma.string('placeholder'),
+    },
+    example: ({ isDisabled, isError, isReadOnly, resize, placeholder }) => (
+      <Textarea
+        isDisabled={isDisabled}
+        isError={isError}
+        isReadOnly={isReadOnly}
+        resize={resize}
+        placeholder={placeholder ?? 'Enter text'}
+      />
+    ),
+  },
+);
diff --git a/packages/design-system-react/src/components/Textarea/Textarea.stories.tsx b/packages/design-system-react/src/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 000000000..d10a7c35e
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/Textarea.stories.tsx
@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { TextVariant } from '../../types';
+
+import README from './README.mdx';
+import { Textarea } from './Textarea';
+import { TextareaResize } from './Textarea.constants';
+import type { TextareaProps } from './Textarea.types';
+
+const meta: Meta<TextareaProps> = {
+  title: 'React Components/Textarea',
+  component: Textarea,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    textVariant: {
+      control: 'select',
+      options: Object.values(TextVariant),
+      description: 'Typography variant for the textarea text',
+    },
+    resize: {
+      control: 'select',
+      options: Object.values(TextareaResize),
+      description: 'Controls the resize behavior of the textarea',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'When true, disables the textarea',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'When true, makes the textarea read-only',
+    },
+    isError: {
+      control: 'boolean',
+      description: 'When true, applies error styling to the textarea',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    rows: {
+      control: 'number',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes merged with the component defaults',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TextareaProps>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Sample placeholder',
+  },
+  render: (args) => <Textarea {...args} />,
+};
+
+export const Variant: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Textarea
+        placeholder="BodyMd (default)"
+        textVariant={TextVariant.BodyMd}
+        defaultValue="Sample text"
+      />
+      <Textarea
+        placeholder="BodySm"
+        textVariant={TextVariant.BodySm}
+        defaultValue="Sample text"
+      />
+      <Textarea
+        placeholder="HeadingSm"
+        textVariant={TextVariant.HeadingSm}
+        defaultValue="Sample text"
+      />
+    </div>
+  ),
+};
+
+export const Resize: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Textarea
+        placeholder="Vertical resize (default)"
+        resize={TextareaResize.Vertical}
+        defaultValue="Resize vertical only"
+      />
+      <Textarea
+        placeholder="Horizontal resize"
+        resize={TextareaResize.Horizontal}
+        defaultValue="Resize horizontal only"
+      />
+      <Textarea
+        placeholder="Both directions"
+        resize={TextareaResize.Both}
+        defaultValue="Resize in both directions"
+      />
+      <Textarea
+        placeholder="No resize"
+        resize={TextareaResize.None}
+        defaultValue="Cannot be resized"
+      />
+    </div>
+  ),
+};
+
+export const IsDisabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Textarea placeholder="Enabled" defaultValue="Editable" />
+      <Textarea placeholder="Disabled" defaultValue="Not editable" isDisabled />
+    </div>
+  ),
+};
+
+export const IsReadOnly: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Textarea placeholder="Editable" defaultValue="" />
+      <Textarea
+        placeholder="Read-only"
+        defaultValue="Read-only value"
+        isReadOnly
+      />
+    </div>
+  ),
+};
+
+export const IsError: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Textarea placeholder="Default state" defaultValue="Normal textarea" />
+      <Textarea
+        placeholder="Error state"
+        defaultValue="This field has an error"
+        isError
+      />
+    </div>
+  ),
+};
+
+export const Rows: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Textarea
+        placeholder="3 rows (default)"
+        rows={3}
+        defaultValue="3-row textarea"
+      />
+      <Textarea
+        placeholder="6 rows"
+        rows={6}
+        defaultValue="6-row textarea for longer content"
+      />
+    </div>
+  ),
+};
diff --git a/packages/design-system-react/src/components/Textarea/Textarea.test.tsx b/packages/design-system-react/src/components/Textarea/Textarea.test.tsx
new file mode 100644
index 000000000..fb61326b2
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/Textarea.test.tsx
@@ -0,0 +1,184 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React, { createRef } from 'react';
+
+import { TextVariant } from '../../types';
+
+import { Textarea } from './Textarea';
+import { TextareaResize } from './Textarea.constants';
+
+const TEST_ID = 'textarea';
+
+describe('Textarea', () => {
+  it('renders with default props', () => {
+    render(<Textarea data-testid={TEST_ID} placeholder="Enter text" />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveAttribute('placeholder', 'Enter text');
+    expect(textarea).not.toBeDisabled();
+    expect(textarea).not.toHaveAttribute('readonly');
+    expect(textarea).not.toHaveAttribute('aria-invalid');
+  });
+
+  it('applies disabled state when isDisabled is true', () => {
+    render(
+      <Textarea data-testid={TEST_ID} isDisabled placeholder="Disabled" />,
+    );
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toBeDisabled();
+    expect(textarea).toHaveClass('opacity-50', 'cursor-not-allowed');
+  });
+
+  it('applies readOnly when isReadOnly is true', () => {
+    render(
+      <Textarea
+        data-testid={TEST_ID}
+        isReadOnly
+        placeholder="Readonly"
+        defaultValue="Locked"
+      />,
+    );
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveAttribute('readonly');
+    expect(textarea).toHaveValue('Locked');
+  });
+
+  it('applies error styling and aria-invalid when isError is true', () => {
+    render(<Textarea data-testid={TEST_ID} isError />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveAttribute('aria-invalid', 'true');
+    expect(textarea).toHaveClass('border-error-default');
+  });
+
+  it('does not set aria-invalid when isError is false', () => {
+    render(<Textarea data-testid={TEST_ID} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).not.toHaveAttribute('aria-invalid');
+  });
+
+  it('applies vertical resize class by default', () => {
+    render(<Textarea data-testid={TEST_ID} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveClass('resize-y');
+  });
+
+  it('applies none resize class when resize is None', () => {
+    render(<Textarea data-testid={TEST_ID} resize={TextareaResize.None} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveClass('resize-none');
+  });
+
+  it('applies both resize class when resize is Both', () => {
+    render(<Textarea data-testid={TEST_ID} resize={TextareaResize.Both} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveClass('resize');
+  });
+
+  it('applies horizontal resize class when resize is Horizontal', () => {
+    render(
+      <Textarea data-testid={TEST_ID} resize={TextareaResize.Horizontal} />,
+    );
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveClass('resize-x');
+  });
+
+  it('applies textVariant typography classes', () => {
+    render(
+      <Textarea data-testid={TEST_ID} textVariant={TextVariant.HeadingSm} />,
+    );
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveClass('text-s-heading-sm');
+  });
+
+  it('merges className with default classes', () => {
+    render(<Textarea data-testid={TEST_ID} className="mt-4" />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveClass('mt-4');
+  });
+
+  it('forwards ref to the textarea element', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    render(<Textarea ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+  });
+
+  it('applies rows attribute', () => {
+    render(<Textarea data-testid={TEST_ID} rows={5} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveAttribute('rows', '5');
+  });
+
+  it('applies cols attribute', () => {
+    render(<Textarea data-testid={TEST_ID} cols={40} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveAttribute('cols', '40');
+  });
+
+  it('applies maxLength attribute', () => {
+    render(<Textarea data-testid={TEST_ID} maxLength={200} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveAttribute('maxlength', '200');
+  });
+
+  it('applies required attribute', () => {
+    render(<Textarea data-testid={TEST_ID} required />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toBeRequired();
+  });
+
+  it('renders when autoFocus is set', () => {
+    render(<Textarea data-testid={TEST_ID} autoFocus />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it('calls onChange when value changes', () => {
+    const onChange = jest.fn();
+    render(<Textarea data-testid={TEST_ID} onChange={onChange} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    fireEvent.change(textarea, { target: { value: 'test' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('calls onFocus when focused', () => {
+    const onFocus = jest.fn();
+    render(<Textarea data-testid={TEST_ID} onFocus={onFocus} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    fireEvent.focus(textarea);
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('calls onBlur when blurred', () => {
+    const onBlur = jest.fn();
+    render(<Textarea data-testid={TEST_ID} onBlur={onBlur} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it('calls onClick when clicked', () => {
+    const onClick = jest.fn();
+    render(<Textarea data-testid={TEST_ID} onClick={onClick} />);
+    const textarea = screen.getByTestId(TEST_ID);
+    fireEvent.click(textarea);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('renders with defaultValue', () => {
+    render(<Textarea data-testid={TEST_ID} defaultValue="Initial content" />);
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveValue('Initial content');
+  });
+
+  it('renders as controlled with value', () => {
+    const onChange = jest.fn();
+    render(
+      <Textarea
+        data-testid={TEST_ID}
+        value="Controlled value"
+        onChange={onChange}
+      />,
+    );
+    const textarea = screen.getByTestId(TEST_ID);
+    expect(textarea).toHaveValue('Controlled value');
+  });
+});
diff --git a/packages/design-system-react/src/components/Textarea/Textarea.tsx b/packages/design-system-react/src/components/Textarea/Textarea.tsx
new file mode 100644
index 000000000..12487c350
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+
+import { TextVariant } from '../../types';
+import { twMerge } from '../../utils/tw-merge';
+import {
+  CLASSMAP_TEXT_VARIANT_FONTSTYLE,
+  CLASSMAP_TEXT_VARIANT_FONTWEIGHT,
+} from '../Text/Text.constants';
+
+import { CLASSMAP_TEXTAREA_RESIZE, TextareaResize } from './Textarea.constants';
+import type { TextareaProps } from './Textarea.types';
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      textVariant = TextVariant.BodyMd,
+      isDisabled = false,
+      isReadOnly = false,
+      isError = false,
+      resize = TextareaResize.Vertical,
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const mergedClassName = twMerge(
+      'w-full rounded border bg-default text-default outline-none transition-colors',
+      'px-3 py-2',
+      'placeholder:text-alternative',
+      isError
+        ? 'border-error-default focus:border-error-default'
+        : 'border-default focus:border-primary-default',
+      CLASSMAP_TEXTAREA_RESIZE[resize],
+      CLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant],
+      CLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant],
+      isDisabled && 'cursor-not-allowed opacity-50',
+      className,
+    );
+
+    return (
+      <textarea
+        ref={ref}
+        className={mergedClassName}
+        style={style}
+        {...rest}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+        aria-invalid={isError || undefined}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';
diff --git a/packages/design-system-react/src/components/Textarea/Textarea.types.ts b/packages/design-system-react/src/components/Textarea/Textarea.types.ts
new file mode 100644
index 000000000..ae1b9a73b
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/Textarea.types.ts
@@ -0,0 +1,44 @@
+import type { TextareaPropsShared } from '@metamask/design-system-shared';
+import type { ComponentPropsWithoutRef } from 'react';
+
+import type { TextVariant } from '../../types';
+
+import type { TextareaResize } from './Textarea.constants';
+
+/**
+ * Textarea component props (React platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React-specific platform concerns
+ */
+export type TextareaProps = Omit<
+  ComponentPropsWithoutRef<'textarea'>,
+  'disabled' | 'readOnly'
+> &
+  TextareaPropsShared & {
+    /**
+     * Optional enum to select between Typography variants.
+     *
+     * @default TextVariant.BodyMd
+     */
+    textVariant?: TextVariant;
+    /**
+     * Optional prop to control the resize behavior of the textarea.
+     * Possible values:
+     * - TextareaResize.None
+     * - TextareaResize.Both
+     * - TextareaResize.Horizontal
+     * - TextareaResize.Vertical
+     *
+     * @default TextareaResize.Vertical
+     */
+    resize?: TextareaResize;
+    /**
+     * Optional prop for additional CSS classes to be applied to the Textarea component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    className?: string;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
+  };
diff --git a/packages/design-system-react/src/components/Textarea/index.ts b/packages/design-system-react/src/components/Textarea/index.ts
new file mode 100644
index 000000000..15e17b245
--- /dev/null
+++ b/packages/design-system-react/src/components/Textarea/index.ts
@@ -0,0 +1,3 @@
+export { TextareaResize } from './Textarea.constants';
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.types';
diff --git a/packages/design-system-react/src/components/index.ts b/packages/design-system-react/src/components/index.ts
index 2f6496818..230daaf43 100644
--- a/packages/design-system-react/src/components/index.ts
+++ b/packages/design-system-react/src/components/index.ts
@@ -86,6 +86,9 @@ export type { IconProps } from './Icon';
 export { Input } from './Input';
 export type { InputProps } from './Input';
 
+export { Textarea, TextareaResize } from './Textarea';
+export type { TextareaProps } from './Textarea';
+
 export { Jazzicon } from './temp-components/Jazzicon';
 export type { JazziconProps } from './temp-components/Jazzicon';
 
diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts
index fdc83d360..5e1d891a8 100644
--- a/packages/design-system-shared/src/index.ts
+++ b/packages/design-system-shared/src/index.ts
@@ -56,3 +56,6 @@ export {
   type BadgeWrapperCustomPosition,
   type BadgeWrapperPropsShared,
 } from './types/BadgeWrapper';
+
+// Textarea types (ADR-0004)
+export { type TextareaPropsShared } from './types/Textarea';
diff --git a/packages/design-system-shared/src/types/Textarea/Textarea.types.ts b/packages/design-system-shared/src/types/Textarea/Textarea.types.ts
new file mode 100644
index 000000000..f11c3a525
--- /dev/null
+++ b/packages/design-system-shared/src/types/Textarea/Textarea.types.ts
@@ -0,0 +1,24 @@
+/**
+ * Textarea component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type TextareaPropsShared = {
+  /**
+   * Optional boolean to disable the textarea.
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Optional boolean to make the textarea read-only.
+   *
+   * @default false
+   */
+  isReadOnly?: boolean;
+  /**
+   * Optional boolean to indicate an error state.
+   *
+   * @default false
+   */
+  isError?: boolean;
+};
diff --git a/packages/design-system-shared/src/types/Textarea/index.ts b/packages/design-system-shared/src/types/Textarea/index.ts
new file mode 100644
index 000000000..c0b0f8908
--- /dev/null
+++ b/packages/design-system-shared/src/types/Textarea/index.ts
@@ -0,0 +1 @@
+export { type TextareaPropsShared } from './Textarea.types';