diff --git a/packages/design-system-react-native/src/components/Input/Input.test.tsx b/packages/design-system-react-native/src/components/Input/Input.test.tsx
index 678c7f051..fe91c003b 100644
--- a/packages/design-system-react-native/src/components/Input/Input.test.tsx
+++ b/packages/design-system-react-native/src/components/Input/Input.test.tsx
@@ -43,35 +43,67 @@ describe('Input', () => {
     const input = getByTestId(TEST_ID);
 
     expect(input).toBeDisabled();
-    expect(input).toHaveStyle({ opacity: tw`opacity-50`.opacity });
+    const expectedOpacity = (tw.style('opacity-50') as TextStyle).opacity;
+    expect(input).toHaveStyle({ opacity: expectedOpacity });
   });
 
-  it('applies iOS placeholder lineHeight workaround when placeholder is visible', () => {
-    if (Platform.OS !== 'ios') {
-      return;
-    }
+  describe('iOS placeholder lineHeight workaround', () => {
+    const originalOS = Platform.OS;
 
+    afterEach(() => {
+      Platform.OS = originalOS;
+    });
+
+    it('applies iOS placeholder lineHeight workaround when placeholder is visible and multiline is false', () => {
+      Platform.OS = 'ios';
+
+      const { getByTestId } = render(
+        <Input
+          testID={TEST_ID}
+          value=""
+          placeholder="Disabled"
+          multiline={false}
+        />,
+      );
+
+      const input = getByTestId(TEST_ID);
+
+      expect(input).toHaveStyle({ lineHeight: 0 });
+    });
+
+    it('does not apply placeholder lineHeight workaround outside iOS', () => {
+      Platform.OS = 'android';
+
+      const { getByTestId } = render(
+        <Input testID={TEST_ID} value="" placeholder="Disabled" />,
+      );
+
+      const input = getByTestId(TEST_ID);
+
+      expect(input).not.toHaveStyle({ lineHeight: 0 });
+    });
+  });
+
+  it('when multiline is true, does not apply lineHeight zero for visible placeholder', () => {
     const { getByTestId } = render(
-      <Input testID={TEST_ID} value="" placeholder="Disabled" />,
+      <Input testID={TEST_ID} value="" multiline placeholder="Placeholder" />,
     );
 
     const input = getByTestId(TEST_ID);
 
-    expect(input).toHaveStyle({ lineHeight: 0 });
+    expect(input).not.toHaveStyle({ lineHeight: 0 });
   });
 
-  it('does not apply placeholder lineHeight workaround outside iOS', () => {
-    if (Platform.OS === 'ios') {
-      return;
-    }
-
+  it('when multiline is true, applies BodyMd paragraph lineHeight', () => {
     const { getByTestId } = render(
-      <Input testID={TEST_ID} value="" placeholder="Disabled" />,
+      <Input testID={TEST_ID} value="" multiline placeholder="p" />,
     );
 
     const input = getByTestId(TEST_ID);
+    const expectedLineHeight = (tw.style('text-body-md') as TextStyle)
+      .lineHeight;
 
-    expect(input).not.toHaveStyle({ lineHeight: 0 });
+    expect(input).toHaveStyle({ lineHeight: expectedLineHeight });
   });
 
   it('removes placeholder lineHeight workaround after value changes from empty to non-empty', () => {
diff --git a/packages/design-system-react-native/src/components/Input/Input.tsx b/packages/design-system-react-native/src/components/Input/Input.tsx
index 8032fe19d..a592ec51b 100644
--- a/packages/design-system-react-native/src/components/Input/Input.tsx
+++ b/packages/design-system-react-native/src/components/Input/Input.tsx
@@ -30,6 +30,7 @@ export const Input = forwardRef<TextInput, InputProps>(
       onBlur,
       onFocus,
       autoFocus = false,
+      multiline,
       ...props
     },
     ref,
@@ -37,6 +38,7 @@ export const Input = forwardRef<TextInput, InputProps>(
     const [isFocused, setIsFocused] = useState(autoFocus);
     const tw = useTailwind();
     const theme = useTheme();
+    const isMultiline = multiline === true;
 
     const placeholderTextColor = useMemo(
       () =>
@@ -56,7 +58,30 @@ export const Input = forwardRef<TextInput, InputProps>(
     // scoped to the placeholder-visible state without affecting typed text.
     const isPlaceholderVisible = hasPlaceholder && value === '';
 
-    const inputStyle = useMemo(
+    // Multiline field styles
+    const multilineChromeStyle = useMemo(
+      () =>
+        tw.style(
+          'text-default',
+          'bg-default',
+          'border',
+          'border-transparent',
+          !isStateStylesDisabled && isDisabled && 'opacity-50',
+          !isStateStylesDisabled &&
+            !isDisabled &&
+            isFocused &&
+            'border-primary-default',
+          twClassName,
+        ),
+      [isStateStylesDisabled, isDisabled, isFocused, twClassName, tw],
+    );
+    const multilineTypographyStyle = useMemo(
+      () => tw.style(`text-${textVariant}`, fontClass),
+      [textVariant, fontClass, tw],
+    );
+
+    // Single-line field styles
+    const singleLineChromeStyle = useMemo(
       () =>
         tw.style(
           fontClass,
@@ -80,11 +105,26 @@ export const Input = forwardRef<TextInput, InputProps>(
         tw,
       ],
     );
-
-    const variantTextStyle = useMemo(
+    const singleLineTypographyStyle = useMemo(
       () => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant],
       [textVariant],
     );
+    // iOS-only single-line placeholder fix: native TextInput can render
+    // placeholder text vertically offset. Do not use on Android (lineHeight 0
+    // collapses text) or on multiline (breaks paragraph layout).
+    const iosSingleLinePlaceholderLineHeightFix = Platform.OS === 'ios' &&
+      isPlaceholderVisible && { lineHeight: 0 as const };
+
+    const resolvedStyle = (
+      isMultiline
+        ? [multilineChromeStyle, multilineTypographyStyle, style]
+        : [
+            singleLineChromeStyle,
+            singleLineTypographyStyle,
+            iosSingleLinePlaceholderLineHeightFix,
+            style,
+          ]
+    ).filter(Boolean);
 
     useEffect(() => {
       if (isDisabled || isReadOnly) {
@@ -107,21 +147,12 @@ export const Input = forwardRef<TextInput, InputProps>(
       },
       [onFocus],
     );
-    const resolvedStyle = [
-      inputStyle,
-      variantTextStyle,
-      // iOS-only workaround: when a placeholder is visible, native iOS
-      // TextInput can render placeholder text vertically offset.
-      // Keep this iOS-only because lineHeight: 0 can collapse text on Android.
-      Platform.OS === 'ios' &&
-        isPlaceholderVisible && { lineHeight: 0 as const },
-      style,
-    ].filter(Boolean);
 
     return (
       <TextInput
         ref={ref}
         {...props}
+        multiline={multiline}
         placeholder={placeholder}
         placeholderTextColor={placeholderTextColor}
         value={value}
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..32025cc26
--- /dev/null
+++ b/packages/design-system-react-native/src/components/TextArea/README.md
@@ -0,0 +1,263 @@
+# TextArea
+
+TextArea is used to render a controlled, multiline text input inside a bordered container. Use [TextField](../TextField/README.md) when you need a single-line field or optional leading and trailing accessories.
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" placeholder="Notes..." />;
+```
+
+## Props
+
+### `value`
+
+Required controlled value for the TextArea.
+
+| TYPE     | REQUIRED | DEFAULT |
+| -------- | -------- | ------- |
+| `string` | Yes      | N/A     |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="hello" placeholder="Value example" />;
+```
+
+### `onChangeText`
+
+Optional callback when the text changes.
+
+| TYPE                     | REQUIRED | DEFAULT     |
+| ------------------------ | -------- | ----------- |
+| `(text: string) => void` | No       | `undefined` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" onChangeText={(text) => {}} placeholder="Change handler" />;
+```
+
+### `placeholder`
+
+Optional placeholder string for the inner input.
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" placeholder="Long description" />;
+```
+
+### `isReadOnly`
+
+When true, the inner input is not editable.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" isReadOnly placeholder="Read-only" />;
+```
+
+### `onFocus`
+
+Optional handler when the inner input receives focus. TextArea composes this with its own focus border behavior. Do not pass `onFocus` through `inputProps`; use this prop instead.
+
+| TYPE       | REQUIRED | DEFAULT     |
+| ---------- | -------- | ----------- |
+| `function` | No       | `undefined` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" placeholder="Focus" onFocus={() => {}} />;
+```
+
+### `onBlur`
+
+Optional handler when the inner input loses focus. TextArea composes this with its own focus border behavior. Do not pass `onBlur` through `inputProps`; use this prop instead.
+
+| TYPE       | REQUIRED | DEFAULT     |
+| ---------- | -------- | ----------- |
+| `function` | No       | `undefined` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" placeholder="Blur" onBlur={() => {}} />;
+```
+
+### `inputProps`
+
+Additional props forwarded to the inner [Input](../Input/Input.tsx) / `TextInput`. Do not pass `placeholder`, `isReadOnly`, `onFocus`, `onBlur`, or `multiline` here; use the TextArea-level props where applicable. `placeholderTextColor` is omitted from the type; the inner `Input` sets it from the theme. For screen readers, set `inputProps.accessibilityLabel` and `inputProps.accessibilityHint`. You can use `inputProps.testID` to target the native `TextInput` in E2E tests.
+
+Use top-level `Box` / `View` props for layout and pointer handling (`pointerEvents`, margins, hit areas via wrappers, etc.). Keys reserved by TextArea (`style`, `twClassName`, `testID`, `children`, `accessible`, and keys owned by the TextArea API surface) are not passed through from this intersection.
+
+| TYPE                                                               | REQUIRED | DEFAULT     |
+| ------------------------------------------------------------------ | -------- | ----------- |
+| `TextAreaProps['inputProps']` (see `TextAreaProps` in the package) | No       | `undefined` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea
+  value=""
+  onChangeText={(text) => {}}
+  placeholder="Notes"
+  inputProps={{
+    autoCapitalize: 'sentences',
+    maxHeight: 200,
+    scrollEnabled: true,
+  }}
+/>;
+```
+
+### `inputRef`
+
+Ref to the inner `TextInput`. The component’s `ref` (from `forwardRef`) points at the root [Box](../Box/Box.tsx) (`View`).
+
+| TYPE             | REQUIRED | DEFAULT     |
+| ---------------- | -------- | ----------- |
+| `Ref<TextInput>` | No       | `undefined` |
+
+```tsx
+import { createRef } from 'react';
+import { TextArea } from '@metamask/design-system-react-native';
+import type { TextInput } from 'react-native';
+
+const inputRef = createRef<TextInput>();
+
+<TextArea value="" inputRef={inputRef} placeholder="Focus me" />;
+```
+
+### `isError`
+
+When true, the field shows an error state (container border).
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" isError placeholder="Error state" />;
+```
+
+### `isDisabled`
+
+When true, the field applies reduced opacity and forwards disabled state to the inner `Input` (non-editable).
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" isDisabled placeholder="Disabled" />;
+```
+
+### `autoFocus`
+
+When true, the inner input requests focus on mount.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" autoFocus placeholder="Focused on mount" />;
+```
+
+### `inputElement`
+
+Optional node that replaces the default `Input`. `inputRef` is only forwarded when the default `Input` is rendered; with a custom `inputElement`, attach your own ref to the control if you need imperative focus or measurement.
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+import { TextInput } from 'react-native';
+
+<TextArea value="" inputElement={<TextInput placeholder="Custom input" />} />;
+```
+
+### `testID`
+
+Optional test id for the root [Box](../Box/Box.tsx). The root sets `accessible={false}` so assistive technologies focus the inner `TextInput`. The inner `TextInput` does not inherit this id; pass `inputProps.testID` if your tests must query the editable control directly.
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+```tsx
+import { TextArea } from '@metamask/design-system-react-native';
+
+<TextArea value="" testID="my-text-area" placeholder="E2E" />;
+```
+
+### `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="rounded-lg" placeholder="Extra rounding" />
+
+// Override default styles
+<TextArea
+  value=""
+  twClassName="bg-error-default"
+  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<ViewStyle>` | 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('bg-default', isActive && 'bg-success-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.stories.tsx b/packages/design-system-react-native/src/components/TextArea/TextArea.stories.tsx
new file mode 100644
index 000000000..b28832359
--- /dev/null
+++ b/packages/design-system-react-native/src/components/TextArea/TextArea.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { useEffect, useState } from 'react';
+
+import { Box } from '../Box';
+
+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: {
+    isError: {
+      control: 'boolean',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    isReadOnly: {
+      control: 'boolean',
+    },
+    value: {
+      control: 'text',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    twClassName: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TextAreaProps>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+    placeholder: 'Enter multiple lines...',
+  },
+  render: (args) => <ControlledTextArea {...args} />,
+};
+
+export const IsError: Story = {
+  render: () => (
+    <Box gap={4}>
+      <ControlledTextArea value="" placeholder="Default" />
+      <ControlledTextArea value="" placeholder="Error state" isError />
+    </Box>
+  ),
+};
+
+export const IsDisabled: Story = {
+  render: () => (
+    <Box gap={4}>
+      <ControlledTextArea value="Editable" placeholder="Enabled" />
+      <TextArea value="Not editable" placeholder="Disabled" isDisabled />
+    </Box>
+  ),
+};
+
+export const IsReadOnly: Story = {
+  render: () => (
+    <Box gap={4}>
+      <ControlledTextArea value="Editable" placeholder="Editable field" />
+      <TextArea
+        value="Cannot edit this value"
+        placeholder="Read-only"
+        isReadOnly
+      />
+    </Box>
+  ),
+};
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..85630935c
--- /dev/null
+++ b/packages/design-system-react-native/src/components/TextArea/TextArea.test.tsx
@@ -0,0 +1,532 @@
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { renderHook } from '@testing-library/react-hooks';
+import { render, fireEvent } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import { TextInput, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+
+import { Input } from '../Input';
+
+import { TextArea } from './TextArea';
+
+const ROOT_TEST_ID = 'text-area';
+
+describe('TextArea', () => {
+  let tw: ReturnType<typeof useTailwind>;
+
+  beforeAll(() => {
+    tw = renderHook(() => useTailwind()).result.current;
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} placeholder="Enter text" />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toBeOnTheScreen();
+    });
+
+    it('passes testID to the root element', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID="custom-test-id" />,
+      );
+
+      expect(getByTestId('custom-test-id')).toBeOnTheScreen();
+    });
+
+    it('renders custom inputElement when provided', () => {
+      const { getByTestId } = render(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          inputElement={<View testID="custom-input" />}
+        />,
+      );
+
+      expect(getByTestId('custom-input')).toBeOnTheScreen();
+    });
+
+    it('forwards inputProps to the inner Input', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea
+          value=""
+          placeholder="forwarded-placeholder"
+          inputProps={{ keyboardType: 'default' }}
+        />,
+      );
+
+      expect(getByPlaceholderText('forwarded-placeholder')).toHaveProp(
+        'keyboardType',
+        'default',
+      );
+    });
+
+    it('merges inputProps.twClassName with TextArea inner Input layout classes', () => {
+      const tree = create(
+        <TextArea
+          value=""
+          placeholder="tw-class-merge"
+          inputProps={{ twClassName: 'mt-2' }}
+        />,
+      );
+      const inputNode = tree.root.findByType(Input);
+
+      expect(inputNode.props.twClassName).toContain('mt-2');
+      expect(inputNode.props.twClassName).toContain('flex-1');
+      expect(inputNode.props.twClassName).toContain('min-h-[88px]');
+    });
+
+    it('when inputProps is omitted, inner Input twClassName omits merged extra classes', () => {
+      const tree = create(<TextArea value="" placeholder="no-input-props" />);
+      const inputNode = tree.root.findByType(Input);
+
+      expect(inputNode.props.twClassName).toBe(
+        'min-h-[88px] w-full flex-1 self-stretch bg-transparent border-0 py-1',
+      );
+    });
+  });
+
+  describe('multiline input', () => {
+    it('sets multiline to true on the inner input', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="multiline-field" />,
+      );
+
+      expect(getByPlaceholderText('multiline-field')).toHaveProp(
+        'multiline',
+        true,
+      );
+    });
+
+    it('sets textAlignVertical to top on the inner input', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="top-align" />,
+      );
+
+      expect(getByPlaceholderText('top-align')).toHaveProp(
+        'textAlignVertical',
+        'top',
+      );
+    });
+  });
+
+  describe('onChangeText', () => {
+    it('notifies when the text changes', () => {
+      const onChangeText = jest.fn();
+      const { getByPlaceholderText } = render(
+        <TextArea
+          value="a"
+          onChangeText={onChangeText}
+          placeholder="change-me"
+        />,
+      );
+
+      fireEvent.changeText(getByPlaceholderText('change-me'), 'ab');
+
+      expect(onChangeText).toHaveBeenCalledTimes(1);
+      expect(onChangeText).toHaveBeenCalledWith('ab');
+    });
+  });
+
+  describe('Input props', () => {
+    it('forwards secureTextEntry to the inner Input', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea
+          value=""
+          placeholder="secure"
+          inputProps={{ secureTextEntry: true }}
+        />,
+      );
+
+      expect(getByPlaceholderText('secure')).toHaveProp(
+        'secureTextEntry',
+        true,
+      );
+    });
+
+    it('forwards isReadOnly to the inner Input', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="readonly-test" isReadOnly />,
+      );
+
+      expect(getByPlaceholderText('readonly-test')).toHaveProp(
+        'editable',
+        false,
+      );
+    });
+  });
+
+  describe('ref', () => {
+    it('exposes the root View ref via forwardRef', () => {
+      const ref = createRef<View>();
+      render(
+        <TextArea
+          value=""
+          ref={ref}
+          testID={ROOT_TEST_ID}
+          placeholder="ref-test"
+        />,
+      );
+
+      expect(ref.current).not.toBeNull();
+      expect(ref.current).toBeInstanceOf(View);
+    });
+
+    it('exposes the inner TextInput via inputRef', () => {
+      const inputRef = createRef<TextInput>();
+      render(<TextArea value="" inputRef={inputRef} placeholder="ref-test" />);
+
+      expect(inputRef.current).not.toBeNull();
+      expect(inputRef.current).toBeInstanceOf(TextInput);
+    });
+
+    it('allows calling focus() via inputRef', () => {
+      const inputRef = createRef<TextInput>();
+      render(<TextArea value="" inputRef={inputRef} placeholder="ref-focus" />);
+
+      expect(() => inputRef.current?.focus()).not.toThrow();
+    });
+  });
+
+  describe('container styles', () => {
+    it('applies minimum height for multiline layout', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`min-h-24`);
+    });
+
+    it('shows error border when isError is true', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} isError />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-error-default`);
+    });
+
+    it('keeps error border when focused and isError', () => {
+      const { getByTestId, getByPlaceholderText } = render(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          isError
+          placeholder="error-focus"
+        />,
+      );
+
+      fireEvent(getByPlaceholderText('error-focus'), 'focus');
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-error-default`);
+    });
+
+    it('applies opacity when isDisabled is true', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} isDisabled />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`opacity-50`);
+    });
+
+    it('omits disabled opacity when isDisabled is false', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).not.toHaveStyle(tw`opacity-50`);
+    });
+
+    it('uses muted border when disabled even if autoFocus is true', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} isDisabled autoFocus />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-muted`);
+      expect(getByTestId(ROOT_TEST_ID)).not.toHaveStyle(tw`border-default`);
+    });
+
+    it('applies focus border when focused', () => {
+      const { getByTestId, getByPlaceholderText } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} placeholder="focus-border" />,
+      );
+
+      fireEvent(getByPlaceholderText('focus-border'), 'focus');
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-default`);
+    });
+
+    it('clears container focus styling after isDisabled toggles following focus', () => {
+      const { getByTestId, getByPlaceholderText, rerender } = render(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          placeholder="toggle-disabled"
+        />,
+      );
+
+      fireEvent(getByPlaceholderText('toggle-disabled'), 'focus');
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-default`);
+
+      rerender(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          placeholder="toggle-disabled"
+          isDisabled
+        />,
+      );
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-muted`);
+
+      rerender(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          placeholder="toggle-disabled"
+        />,
+      );
+      expect(getByTestId(ROOT_TEST_ID)).not.toHaveStyle(tw`border-default`);
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-muted`);
+    });
+
+    it('clears container focus styling after isReadOnly toggles following focus', () => {
+      const { getByTestId, getByPlaceholderText, rerender } = render(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          placeholder="toggle-readonly"
+        />,
+      );
+
+      fireEvent(getByPlaceholderText('toggle-readonly'), 'focus');
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-default`);
+
+      rerender(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          placeholder="toggle-readonly"
+          isReadOnly
+        />,
+      );
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-muted`);
+
+      rerender(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          placeholder="toggle-readonly"
+        />,
+      );
+      expect(getByTestId(ROOT_TEST_ID)).not.toHaveStyle(tw`border-default`);
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-muted`);
+    });
+
+    it('reverts to muted resting border after blur', () => {
+      const { getByTestId, getByPlaceholderText } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} placeholder="blur-border" />,
+      );
+
+      fireEvent(getByPlaceholderText('blur-border'), 'focus');
+      fireEvent(getByPlaceholderText('blur-border'), 'blur');
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-muted`);
+    });
+
+    it('starts with focus border when autoFocus is true', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} autoFocus />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`border-default`);
+    });
+
+    it('applies twClassName to the container', () => {
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} twClassName="mt-4" />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle(tw`mt-4`);
+    });
+
+    it('merges custom style prop with container styles', () => {
+      const customStyle = { marginBottom: 20 };
+      const { getByTestId } = render(
+        <TextArea value="" testID={ROOT_TEST_ID} style={customStyle} />,
+      );
+
+      expect(getByTestId(ROOT_TEST_ID)).toHaveStyle({ marginBottom: 20 });
+    });
+
+    it('merges twClassName and style on the container', () => {
+      const customStyle = { marginBottom: 12 };
+      const { getByTestId } = render(
+        <TextArea
+          value=""
+          testID={ROOT_TEST_ID}
+          twClassName="mt-2"
+          style={customStyle}
+        />,
+      );
+
+      const root = getByTestId(ROOT_TEST_ID);
+
+      expect(root).toHaveStyle(tw`mt-2`);
+      expect(root).toHaveStyle({ marginBottom: 12 });
+    });
+  });
+
+  describe('focus and blur', () => {
+    it('calls onFocus when input receives focus', () => {
+      const onFocus = jest.fn();
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="focus-test" onFocus={onFocus} />,
+      );
+
+      fireEvent(getByPlaceholderText('focus-test'), 'focus');
+
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onBlur when input loses focus', () => {
+      const onBlur = jest.fn();
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="blur-test" onBlur={onBlur} />,
+      );
+
+      fireEvent(getByPlaceholderText('blur-test'), 'focus');
+      fireEvent(getByPlaceholderText('blur-test'), 'blur');
+
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onFocus when disabled', () => {
+      const onFocus = jest.fn();
+      const { getByPlaceholderText } = render(
+        <TextArea
+          value=""
+          placeholder="disabled-focus"
+          onFocus={onFocus}
+          isDisabled
+        />,
+      );
+
+      fireEvent(getByPlaceholderText('disabled-focus'), 'focus');
+
+      expect(onFocus).not.toHaveBeenCalled();
+    });
+
+    it('does not call onBlur when disabled', () => {
+      const onBlur = jest.fn();
+      const { getByPlaceholderText } = render(
+        <TextArea
+          value=""
+          placeholder="disabled-blur"
+          onBlur={onBlur}
+          isDisabled
+        />,
+      );
+
+      fireEvent(getByPlaceholderText('disabled-blur'), 'focus');
+      fireEvent(getByPlaceholderText('disabled-blur'), 'blur');
+
+      expect(onBlur).not.toHaveBeenCalled();
+    });
+
+    it('no-ops TextArea blur wiring when disabled if the handler is invoked directly', () => {
+      const onBlur = jest.fn();
+      const tree = create(
+        <TextArea
+          value=""
+          isDisabled
+          placeholder="disabled-blur-direct"
+          onBlur={onBlur}
+        />,
+      );
+      const inputNode = tree.root.findByType(Input);
+      act(() => {
+        inputNode.props.onBlur({ nativeEvent: {} });
+      });
+      expect(onBlur).not.toHaveBeenCalled();
+    });
+
+    it('no-ops TextArea focus wiring when disabled if the handler is invoked directly', () => {
+      const onFocus = jest.fn();
+      const tree = create(
+        <TextArea
+          value=""
+          isDisabled
+          placeholder="disabled-focus-direct"
+          onFocus={onFocus}
+        />,
+      );
+      const inputNode = tree.root.findByType(Input);
+      act(() => {
+        inputNode.props.onFocus({ nativeEvent: {} });
+      });
+      expect(onFocus).not.toHaveBeenCalled();
+    });
+
+    it('passes event argument to onFocus callback', () => {
+      const onFocus = jest.fn();
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="event-focus" onFocus={onFocus} />,
+      );
+
+      fireEvent(getByPlaceholderText('event-focus'), 'focus', {
+        nativeEvent: {},
+      });
+
+      expect(onFocus).toHaveBeenCalledWith(
+        expect.objectContaining({ nativeEvent: {} }),
+      );
+    });
+
+    it('passes event argument to onBlur callback', () => {
+      const onBlur = jest.fn();
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="event-blur" onBlur={onBlur} />,
+      );
+
+      fireEvent(getByPlaceholderText('event-blur'), 'focus');
+      fireEvent(getByPlaceholderText('event-blur'), 'blur', {
+        nativeEvent: {},
+      });
+
+      expect(onBlur).toHaveBeenCalledWith(
+        expect.objectContaining({ nativeEvent: {} }),
+      );
+    });
+
+    it('handles focus when onFocus is omitted', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="no-focus-cb" />,
+      );
+
+      expect(() => {
+        fireEvent(getByPlaceholderText('no-focus-cb'), 'focus');
+      }).not.toThrow();
+    });
+
+    it('handles blur when onBlur is omitted', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="no-blur-cb" />,
+      );
+
+      expect(() => {
+        fireEvent(getByPlaceholderText('no-blur-cb'), 'focus');
+        fireEvent(getByPlaceholderText('no-blur-cb'), 'blur');
+      }).not.toThrow();
+    });
+  });
+
+  describe('disabled state', () => {
+    it('disables the inner Input when isDisabled is true', () => {
+      const { getByPlaceholderText } = render(
+        <TextArea value="" placeholder="disabled-input" isDisabled />,
+      );
+
+      expect(getByPlaceholderText('disabled-input')).toBeDisabled();
+    });
+  });
+});
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..5c4052b15
--- /dev/null
+++ b/packages/design-system-react-native/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,118 @@
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+import { Box } from '../Box';
+import { Input } from '../Input';
+import type { InputProps } from '../Input/Input.types';
+
+import type { TextAreaProps } from './TextArea.types';
+
+export const TextArea = forwardRef<View, TextAreaProps>(
+  (
+    {
+      value,
+      onChangeText,
+      placeholder,
+      isReadOnly,
+      onBlur,
+      onFocus,
+      autoFocus = false,
+      inputProps,
+      inputRef,
+      isDisabled = false,
+      isError = false,
+      textVariant,
+      inputElement,
+      style,
+      twClassName,
+      testID,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(autoFocus);
+    const tw = useTailwind();
+
+    useEffect(() => {
+      if (isDisabled || isReadOnly) {
+        setIsFocused(false);
+      }
+    }, [isDisabled, isReadOnly]);
+
+    const {
+      twClassName: inputTwClassNameFromProps,
+      ...inputRestWithoutTwClassName
+    } = inputProps ?? {};
+
+    const onBlurHandler = useCallback(
+      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {
+        if (!isDisabled) {
+          setIsFocused(false);
+          onBlur?.(e);
+        }
+      },
+      [isDisabled, onBlur],
+    );
+
+    const onFocusHandler = useCallback(
+      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {
+        if (!isDisabled) {
+          setIsFocused(true);
+          onFocus?.(e);
+        }
+      },
+      [isDisabled, onFocus],
+    );
+
+    return (
+      <Box
+        ref={ref}
+        {...props}
+        testID={testID}
+        accessible={false}
+        style={[
+          tw.style(
+            'rounded-lg',
+            'min-h-24',
+            'border',
+            'px-4',
+            'py-3',
+            'bg-muted',
+            isDisabled && 'border-muted',
+            !isDisabled && isError && 'border-error-default',
+            !isDisabled && !isError && isFocused && 'border-default',
+            !isDisabled && !isError && !isFocused && 'border-muted',
+            isDisabled && 'opacity-50',
+            twClassName,
+          ),
+          style,
+        ]}
+      >
+        {inputElement || (
+          <Input
+            {...inputRestWithoutTwClassName}
+            ref={inputRef}
+            value={value}
+            onChangeText={onChangeText}
+            placeholder={placeholder}
+            isReadOnly={isReadOnly}
+            textVariant={textVariant}
+            isDisabled={isDisabled}
+            autoFocus={autoFocus}
+            onBlur={onBlurHandler}
+            onFocus={onFocusHandler}
+            isStateStylesDisabled
+            multiline
+            textAlignVertical="top"
+            twClassName={`min-h-[88px] w-full flex-1 self-stretch bg-transparent border-0 py-1${
+              inputTwClassNameFromProps ? ` ${inputTwClassNameFromProps}` : ''
+            }`}
+          />
+        )}
+      </Box>
+    );
+  },
+);
+
+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..ccbb5b99c
--- /dev/null
+++ b/packages/design-system-react-native/src/components/TextArea/TextArea.types.ts
@@ -0,0 +1,86 @@
+import type { TextAreaPropsShared } from '@metamask/design-system-shared';
+import type { Ref } from 'react';
+import type { StyleProp, TextInput, ViewStyle } from 'react-native';
+
+import type { BoxProps } from '../Box/Box.types';
+import type { InputProps } from '../Input/Input.types';
+
+/**
+ * Additional props merged onto the inner `Input` (`../Input/Input.tsx`).
+ *
+ * TextArea owns `value`, `onChangeText`, `placeholder`, `isReadOnly`, `onFocus`,
+ * `onBlur`, `isDisabled`, `autoFocus`, `textVariant`, multiline (always on), and inner
+ * layout (merged with any `twClassName` you pass here). `placeholderTextColor` is
+ * omitted (Input sets it from theme).
+ */
+type TextAreaInputProps = Omit<
+  InputProps,
+  | 'autoFocus'
+  | 'isDisabled'
+  | 'isReadOnly'
+  | 'isStateStylesDisabled'
+  | 'multiline'
+  | 'onBlur'
+  | 'onChangeText'
+  | 'onFocus'
+  | 'placeholder'
+  | 'placeholderTextColor'
+  | 'style'
+  | 'textVariant'
+  | 'value'
+>;
+
+/**
+ * React Native `TextArea` props between `TextAreaPropsShared` and the root
+ * `Box`: typed focus/blur handlers, `inputProps`, container styling, and
+ * `testID`.
+ */
+export type TextAreaBaseProps = TextAreaPropsShared & {
+  /**
+   * Called when the inner `TextInput` value changes (React Native naming).
+   */
+  onChangeText?: (text: string) => void;
+  /**
+   * Called when the inner input receives focus (composed with TextArea border state).
+   */
+  onFocus?: InputProps['onFocus'];
+  /**
+   * Called when the inner input loses focus (composed with TextArea border state).
+   */
+  onBlur?: InputProps['onBlur'];
+  /**
+   * Additional props for the inner `Input`. Do not pass `placeholder`, `isReadOnly`, `onFocus`, `onBlur`, or `multiline` here;
+   * use the TextArea-level props where applicable. For accessibility, prefer `accessibilityLabel` and `accessibilityHint` on
+   * `inputProps`. `placeholderTextColor` is omitted from the type; the inner `Input` sets it from the theme.
+   */
+  inputProps?: TextAreaInputProps;
+  /**
+   * Ref to the inner `TextInput`. The component `ref` targets the root `Box` (`View`).
+   */
+  inputRef?: Ref<TextInput>;
+  /**
+   * Optional twrnc classes for the root `Box`.
+   */
+  twClassName?: string;
+  /**
+   * Optional style for the root `Box`.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Optional test id for the root `Box`.
+   */
+  testID?: string;
+};
+
+type TextAreaReservedBoxKeys =
+  | keyof TextAreaBaseProps
+  | 'accessible'
+  | 'children'
+  | 'style';
+
+/**
+ * TextArea props: `TextAreaBaseProps` plus remaining `BoxProps` at the top
+ * level, excluding keys reserved by TextArea.
+ */
+export type TextAreaProps = TextAreaBaseProps &
+  Omit<BoxProps, TextAreaReservedBoxKeys>;
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..579379c25
--- /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/TextField/TextField.stories.tsx b/packages/design-system-react-native/src/components/TextField/TextField.stories.tsx
index 05017edc6..d4900b3a9 100644
--- a/packages/design-system-react-native/src/components/TextField/TextField.stories.tsx
+++ b/packages/design-system-react-native/src/components/TextField/TextField.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { useEffect, useState } from 'react';
-import { View } from 'react-native';
 
+import { Box } from '../Box';
 import { Icon, IconName, IconSize } from '../Icon';
 
 import { TextField } from './TextField';
@@ -55,19 +55,32 @@ export const Default: Story = {
 
 export const IsError: Story = {
   render: () => (
-    <View style={{ gap: 16 }}>
+    <Box gap={4}>
       <ControlledTextField value="" placeholder="Default" />
       <ControlledTextField value="" placeholder="Error state" isError />
-    </View>
+    </Box>
   ),
 };
 
 export const IsDisabled: Story = {
   render: () => (
-    <View style={{ gap: 16 }}>
+    <Box gap={4}>
       <ControlledTextField value="Editable" placeholder="Enabled" />
       <TextField value="Not editable" placeholder="Disabled" isDisabled />
-    </View>
+    </Box>
+  ),
+};
+
+export const IsReadOnly: Story = {
+  render: () => (
+    <Box gap={4}>
+      <ControlledTextField value="Editable" placeholder="Editable field" />
+      <TextField
+        value="Cannot edit this value"
+        placeholder="Read-only"
+        isReadOnly
+      />
+    </Box>
   ),
 };
 
diff --git a/packages/design-system-react-native/src/components/TextField/TextField.tsx b/packages/design-system-react-native/src/components/TextField/TextField.tsx
index cd00729ed..6df2d7844 100644
--- a/packages/design-system-react-native/src/components/TextField/TextField.tsx
+++ b/packages/design-system-react-native/src/components/TextField/TextField.tsx
@@ -1,4 +1,3 @@
-import { TextVariant } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { forwardRef, useCallback, useState } from 'react';
 import { View } from 'react-native';
@@ -96,7 +95,6 @@ export const TextField = forwardRef<View, TextFieldProps>(
             onChangeText={onChangeText}
             placeholder={placeholder}
             isReadOnly={isReadOnly}
-            textVariant={TextVariant.BodyMd}
             isDisabled={isDisabled}
             autoFocus={autoFocus}
             onBlur={onBlurHandler}
diff --git a/packages/design-system-react-native/src/components/TextField/TextField.types.ts b/packages/design-system-react-native/src/components/TextField/TextField.types.ts
index d70fc63a0..4440aeb96 100644
--- a/packages/design-system-react-native/src/components/TextField/TextField.types.ts
+++ b/packages/design-system-react-native/src/components/TextField/TextField.types.ts
@@ -9,7 +9,7 @@ import type { InputProps } from '../Input/Input.types';
  * Additional props merged onto the inner `Input` (`../Input/Input.tsx`).
  *
  * TextField owns `value`, `onChangeText`, `placeholder`, `isReadOnly`, `onFocus`,
- * `onBlur`, `isDisabled`, `autoFocus`, typography, and inner layout (merged with
+ * `onBlur`, `isDisabled`, `autoFocus`, and inner layout (merged with
  * any `twClassName` you pass here). `placeholderTextColor` is omitted (Input sets
  * it from theme).
  */
@@ -35,6 +35,10 @@ type TextFieldInputProps = Omit<
  * `testID`.
  */
 export type TextFieldBaseProps = TextFieldPropsShared & {
+  /**
+   * Called when the inner `TextInput` value changes (React Native naming).
+   */
+  onChangeText?: (text: string) => void;
   /**
    * Called when the inner input receives focus (composed with TextField border state).
    */
diff --git a/packages/design-system-react-native/src/components/index.ts b/packages/design-system-react-native/src/components/index.ts
index 7a1f3cc18..0a0828663 100644
--- a/packages/design-system-react-native/src/components/index.ts
+++ b/packages/design-system-react-native/src/components/index.ts
@@ -198,6 +198,9 @@ export type { TextProps } from './Text';
 export { TextField } from './TextField';
 export type { TextFieldProps } from './TextField';
 
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';
+
 export { TextFieldSearch } from './TextFieldSearch';
 export type { TextFieldSearchProps } from './TextFieldSearch';
 
diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts
index 3b04da007..187ea902f 100644
--- a/packages/design-system-shared/src/index.ts
+++ b/packages/design-system-shared/src/index.ts
@@ -142,6 +142,9 @@ export {
 // TextField types (ADR-0004)
 export { type TextFieldPropsShared } from './types/TextField';
 
+// TextArea types (ADR-0004)
+export { type TextAreaPropsShared } from './types/TextArea';
+
 // Input types (ADR-0004)
 export { type InputPropsShared } from './types/Input';
 
diff --git a/packages/design-system-shared/src/types/Input/Input.types.ts b/packages/design-system-shared/src/types/Input/Input.types.ts
index 91be46edd..e1810632b 100644
--- a/packages/design-system-shared/src/types/Input/Input.types.ts
+++ b/packages/design-system-shared/src/types/Input/Input.types.ts
@@ -9,6 +9,10 @@ export type InputPropsShared = {
    * Controlled value for Input.
    */
   value: string;
+  /**
+   * Optional placeholder shown when `value` is empty.
+   */
+  placeholder?: string;
   /**
    * Optional prop to select between Typography variants.
    *
@@ -27,6 +31,12 @@ export type InputPropsShared = {
    * @default false
    */
   isReadOnly?: boolean;
+  /**
+   * When true, the input requests focus on mount.
+   *
+   * @default false
+   */
+  autoFocus?: boolean;
   /**
    * Optional boolean to disable state styles.
    *
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..9bfc914ce
--- /dev/null
+++ b/packages/design-system-shared/src/types/TextArea/TextArea.types.ts
@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+import type { InputPropsShared } from '../Input/Input.types';
+
+/**
+ * TextArea shared props (ADR-0004). A multiline input layered on the shared
+ * `InputPropsShared` contract. Platform packages layer container and
+ * `TextInput` behavior on top.
+ */
+export type TextAreaPropsShared = Omit<
+  InputPropsShared,
+  'isStateStylesDisabled'
+> & {
+  /**
+   * When true, the field shows an error state (for example border treatment).
+   *
+   * @default false
+   */
+  isError?: boolean;
+  /** Replaces the default textarea input implementation. */
+  inputElement?: ReactNode;
+};
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..c0cae5eba
--- /dev/null
+++ b/packages/design-system-shared/src/types/TextArea/index.ts
@@ -0,0 +1 @@
+export type { TextAreaPropsShared } from './TextArea.types';
diff --git a/packages/design-system-shared/src/types/TextField/TextField.types.ts b/packages/design-system-shared/src/types/TextField/TextField.types.ts
index 1f2d6c49f..3089627a4 100644
--- a/packages/design-system-shared/src/types/TextField/TextField.types.ts
+++ b/packages/design-system-shared/src/types/TextField/TextField.types.ts
@@ -1,42 +1,25 @@
 import type { ReactNode } from 'react';
 
+import type { InputPropsShared } from '../Input/Input.types';
+
 /**
  * TextField shared props (ADR-0004).
  *
- * Platform-independent fields for a controlled text field and optional chrome
- * (accessories, custom input slot). Styling, `testID`, native-only `inputProps`,
- * and typed focus/blur handlers stay on the platform layer.
+ * Layers controlled text-field chrome (accessories, custom input slot, error
+ * state, etc.) on top of the shared `InputPropsShared` contract. Styling,
+ * `testID`, native-only `inputProps`, and typed focus/blur handlers stay on
+ * the platform layer.
  */
-export type TextFieldPropsShared = {
-  /** Controlled value. */
-  value: string;
-  /**
-   * Called when the text changes. Uses React Native `TextInput` naming; web
-   * implementations may map this from the native input change event.
-   */
-  onChangeText?: (text: string) => void;
-  /** Placeholder shown when `value` is empty. */
-  placeholder?: string;
-  /** When true, the value cannot be edited. */
-  isReadOnly?: boolean;
-  /**
-   * When true, interaction and editing are disabled.
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
+export type TextFieldPropsShared = Omit<
+  InputPropsShared,
+  'isStateStylesDisabled' | 'textVariant'
+> & {
   /**
    * When true, the field shows an error state (for example border treatment).
    *
    * @default false
    */
   isError?: boolean;
-  /**
-   * When true, the field requests focus on mount.
-   *
-   * @default false
-   */
-  autoFocus?: boolean;
   /** Optional content before the input. */
   startAccessory?: ReactNode;
   /** Optional content after the input. */