diff --git a/api/serverConfig.ts b/api/serverConfig.ts
index 4e90354e..8f5c173d 100644
--- a/api/serverConfig.ts
+++ b/api/serverConfig.ts
@@ -13,3 +13,4 @@ const client = new sdk.Client()
   .setKey(API_KEY);
 
 export const users = new sdk.Users(client);
+export const messaging = new sdk.Messaging(client);
diff --git a/app/(admin)/admin/notifications/page.test.tsx b/app/(admin)/admin/notifications/page.test.tsx
index 0b8ba6fa..cb45e94e 100644
--- a/app/(admin)/admin/notifications/page.test.tsx
+++ b/app/(admin)/admin/notifications/page.test.tsx
@@ -1,15 +1,76 @@
-// /Users/ryanfurrer/Developer/GitHub/gridiron-survivor/app/(admin)/admin/notifications/page.test.tsx
-
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { getCurrentLeague } from '@/api/apiFunctions';
+import { getUserTargets, sendEmailNotifications } from './serverFunctions/serverFunctionHelper';
 import AdminNotifications from './page';
 import React from 'react';
 
+let contentInput: HTMLInputElement,
+  selectAllUsersRadioOption: HTMLElement,
+  selectRecipientsRadioGroup: HTMLElement,
+  sendEmailButton: HTMLElement,
+  subjectInput: HTMLInputElement;
+
+jest.mock('@/api/apiFunctions', () => ({
+  getCurrentLeague: jest.fn(),
+}));
+
+jest.mock('./serverFunctions/serverFunctionHelper', () => ({
+  sendEmailNotifications: jest.fn(),
+  getUserTargets: jest.fn(),
+}));
+
 describe('Admin notifications page', () => {
-  it(`should render it's content`, () => {
+  beforeEach(async () => {
+    jest.clearAllMocks();
+
+    (getCurrentLeague as jest.Mock).mockResolvedValue({
+      participants: ['12345', '1234', '123'],
+      leagueName: 'Test League',
+    });
+
+    (getUserTargets as jest.Mock).mockResolvedValue([
+      'target1',
+      'target2',
+      'target3',
+    ]);
+
     render(<AdminNotifications />);
+
+    contentInput = screen.getByTestId('content-text');
+    selectAllUsersRadioOption = screen.getByTestId('all-users-option');
+    selectRecipientsRadioGroup = screen.getByTestId('radio-group-default');
+    sendEmailButton = screen.getByTestId('send-email');
+    subjectInput = screen.getByTestId('subject-text');
+  });
+
+  it(`should render it's content`, () => {
+    (sendEmailNotifications as jest.Mock).mockResolvedValue({});
+
     const adminNotificationsContent = screen.getByTestId(
       'admin-notifications-content',
     );
     expect(adminNotificationsContent).toBeInTheDocument();
   });
+
+  it('should call the sendEmailNotifications function with the provided inputs', async () => {
+    fireEvent.click(selectAllUsersRadioOption);
+    fireEvent.change(subjectInput, { target: { value: 'Test Title' } });
+    fireEvent.change(contentInput, {
+      target: { value: 'Test message section.' },
+    });
+
+    await waitFor(() => {
+      expect(sendEmailButton).toBeInTheDocument();
+    });
+
+    fireEvent.submit(sendEmailButton);
+
+    await waitFor(() => {
+      expect(sendEmailNotifications as jest.Mock).toHaveBeenCalledWith({
+        content: 'Test message section.',
+        groupUsers: ['target1', 'target2', 'target3'],
+        subject: 'Test Title',
+      });
+    });
+  });
 });
diff --git a/app/(admin)/admin/notifications/page.tsx b/app/(admin)/admin/notifications/page.tsx
index 30d5760c..221fc1a5 100644
--- a/app/(admin)/admin/notifications/page.tsx
+++ b/app/(admin)/admin/notifications/page.tsx
@@ -1,16 +1,163 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import { JSX } from 'react';
+'use client';
+import { Button } from '@/components/Button/Button';
+import { getCurrentLeague } from '@/api/apiFunctions';
+import { Input } from '@/components/Input/Input';
+import { JSX, useState } from 'react';
+import { LabelText } from '@/components/LabelText/LabelText';
+import {
+  RadioGroupDefault,
+  RadioGroupDefaultItem,
+} from '@/components/RadioGroupDefault/RadioGroupDefault';
+import { sendEmailNotifications } from './serverFunctions/serverFunctionHelper';
+import { Textarea } from '@/components/Textarea/Textarea';
+import React, { useEffect } from 'react';
+import { getUserTargets } from './serverFunctions/serverFunctionHelper';
 
 /**
  * The admin home page.
  * @returns The rendered AdminHome page.
  */
 const AdminNotifications = (): JSX.Element => {
+  const [content, setContent] = useState<string>('');
+  const [emailSubjects, setEmailSubjects] = useState<string>('all users');
+  const [groupUsers, setGroupUsers] = useState<string[]>([]);
+  const [leagueName, setLeagueName] = useState<string>('');
+  const [subject, setSubject] = useState<string>('');
+
+  /**
+   * To grab all users from the league.
+   * @returns The league data.
+   */
+  const getLeagueData = async (): Promise<void> => {
+    try {
+      const leagueId = '66f1a8e300102bff03ff'; // EMAIL TEST LEAGUE (DO NOT CHANGE)
+      const leagueData = await getCurrentLeague(leagueId);
+      const userTargets = await getUserTargets({
+        userIDs: leagueData.participants,
+      });
+      setGroupUsers(userTargets);
+      setLeagueName(leagueData.leagueName);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * Handle form submission
+   * @param event - Prevents the default reloading.
+   */
+  const handleSubmit = async (event: React.FormEvent): Promise<void> => {
+    event.preventDefault();
+    await sendEmailNotifications({
+      content,
+      groupUsers,
+      subject,
+    });
+  };
+
+  /**
+   * Function to handle radio selection logic.
+   * @param value - Value of the radio buttons.
+   */
+  const handleRadioChange = (value: string): void => {
+    setGroupUsers([value]);
+    setEmailSubjects(value);
+  };
+
+  useEffect(() => {
+    /**
+     * Fetches the league data.
+     * @returns The league data.
+     */
+    const fetchData = async (): Promise<void> => {
+      await getLeagueData();
+    };
+    fetchData();
+  }, []);
+
   return (
-    <section data-testid="admin-notifications-content">
-      <p>{`This is where I'd put my notifation dashboard, IF I HAD ONE!`}</p>
+    <section
+      className="flex flex-col space-y-6"
+      data-testid="admin-notifications-content"
+    >
+      <p>
+        Choose the users you would like to email in{' '}
+        <span className="font-bold text-orange-500">{leagueName}</span>.
+      </p>
+      <RadioGroupDefault
+        defaultValue="all users"
+        onValueChange={handleRadioChange}
+        required
+      >
+        <div className="flex items-center space-x-2">
+          <RadioGroupDefaultItem
+            value="all users"
+            id="all"
+            data-testid="all-users-option"
+          />
+          <LabelText htmlFor="all">All users</LabelText>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupDefaultItem
+            value="all survivors"
+            id="survivors"
+            data-testid="only-survivors-option"
+          />
+          <LabelText htmlFor="survivors">Only the survivors</LabelText>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupDefaultItem
+            value="all losers"
+            id="losers"
+            data-testid="only-losers-option"
+          />
+          <LabelText htmlFor="losers">Only the losers</LabelText>
+        </div>
+      </RadioGroupDefault>
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col space-y-6 max-w-[80ch]"
+      >
+        <div className="flex gap-2 flex-col">
+          <LabelText htmlFor="subject" className="text-lg">
+            Subject:
+          </LabelText>
+          <Input
+            data-testid="subject-text"
+            id="subject"
+            name="subject"
+            onChange={(e) => setSubject(e.target.value)}
+            type="text"
+          />
+        </div>
+        <div className="flex gap-2 flex-col">
+          <LabelText htmlFor="content" className="text-lg">
+            Message:
+          </LabelText>
+          <Textarea
+            data-testid="content-text"
+            id="content"
+            name="content"
+            onChange={(e) => setContent(e.target.value)}
+          />
+        </div>
+        <p>
+          This email will be sent to{' '}
+          <span className="font-bold text-orange-500">
+            {emailSubjects.toLowerCase()}
+          </span>{' '}
+          in <span className="font-bold text-orange-500">{leagueName}</span>
+        </p>
+        <Button
+          className="md:max-w-fit"
+          data-testid="send-email"
+          label="Send email"
+          type="submit"
+        />
+      </form>
     </section>
   );
 };
diff --git a/app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.test.tsx b/app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.test.tsx
new file mode 100644
index 00000000..b70b3444
--- /dev/null
+++ b/app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.test.tsx
@@ -0,0 +1,52 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use server';
+import { messaging } from '@/api/serverConfig';
+import { sendEmailNotifications } from './serverFunctionHelper';
+
+jest.mock('./serverFunctionHelper', () => ({
+  sendEmailNotifications: jest.fn(),
+}));
+
+jest.mock('@/api/serverConfig', () => ({
+  messaging: {
+    createEmail: jest.fn(),
+  },
+}));
+
+describe('SendEmailNotification', () => {
+  it('should send email with provided information', async () => {
+    const content = 'Test';
+    const groupUsers = ['123456', '12345', '1234'];
+    const subject = 'This is a test';
+
+    (sendEmailNotifications as jest.Mock).mockImplementation(
+      async ({ content, groupUsers, subject }) => {
+        await (messaging.createEmail as jest.Mock)(
+          '1234567890',
+          subject,
+          content,
+          [],
+          '1234567890',
+          [],
+          [],
+          groupUsers,
+        );
+      },
+    );
+
+    await sendEmailNotifications({ content, groupUsers, subject });
+
+    expect(messaging.createEmail).toHaveBeenCalledWith(
+      expect.any(String),
+      subject,
+      content,
+      [],
+      '1234567890',
+      [],
+      [],
+      groupUsers,
+    );
+  });
+});
diff --git a/app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.ts b/app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.ts
new file mode 100644
index 00000000..718798d3
--- /dev/null
+++ b/app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.ts
@@ -0,0 +1,62 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use server';
+import { ID } from 'appwrite';
+import { messaging, users } from '@/api/serverConfig';
+
+/**
+ * Function to send email.
+ * @param props - subject, content.
+ * @param props.content - The actual email you are wanting to send.
+ * @param props.groupUsers - User id's being passed in from the notification page.
+ * @param props.subject - The subject of the email.
+ */
+export const sendEmailNotifications = async ({
+  content,
+  groupUsers,
+  subject,
+}: {
+  content: string;
+  groupUsers: string[];
+  subject: string;
+}): Promise<void> => {
+  try {
+    await messaging.createEmail(
+      ID.unique(),
+      subject,
+      content,
+      [],
+      ['672a3534000502297d88'],
+      [],
+      [],
+      groupUsers,
+    );
+  } catch (error) {
+    throw error;
+  }
+};
+
+/**
+ * Function to take the userIDs and grab their targetIDs for emailing.
+ * @param props - userIDs
+ * @param props.userIDs - All the passed in userIDs.
+ * @returns {Promise<void>}
+ */
+export async function getUserTargets({
+  userIDs,
+}: {
+  userIDs: string[];
+}): Promise<string[]> {
+  try {
+    const userTargets = await Promise.all(
+      userIDs.map(async (userID) => {
+        const userTarget = await users.get(userID);
+        return userTarget.targets.map((target) => target.$id);
+      }),
+    );
+    return userTargets.flat();
+  } catch (error) {
+    throw error;
+  }
+}
diff --git a/components/LabelText/LabelText.test.tsx b/components/LabelText/LabelText.test.tsx
new file mode 100644
index 00000000..89ab76c0
--- /dev/null
+++ b/components/LabelText/LabelText.test.tsx
@@ -0,0 +1,25 @@
+import { LabelText } from './LabelText';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+describe('LabelText Component', () => {
+  it('renders properly', () => {
+    const { getByTestId } = render(<LabelText>Test Label</LabelText>);
+    expect(getByTestId('label-text')).toBeInTheDocument();
+  });
+
+  it('renders the correct text', () => {
+    const { getByTestId } = render(<LabelText>Test Label</LabelText>);
+    expect(getByTestId('label-text')).toHaveTextContent('Test Label');
+  });
+
+  it('applies disabled styles when peer-disabled', () => {
+    const { getByTestId } = render(
+      <LabelText className="peer-disabled">Test Label</LabelText>,
+    );
+    expect(getByTestId('label-text')).toHaveClass(
+      'peer-disabled:cursor-not-allowed',
+    );
+    expect(getByTestId('label-text')).toHaveClass('peer-disabled:opacity-70');
+  });
+});
diff --git a/components/LabelText/LabelText.tsx b/components/LabelText/LabelText.tsx
new file mode 100644
index 00000000..91bb969d
--- /dev/null
+++ b/components/LabelText/LabelText.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+"use client"
+import { cn } from "@/utils/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react"
+
+const labelTextVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const LabelText = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelTextVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelTextVariants(), className)}
+    data-testid="label-text"
+    {...props}
+  />
+))
+LabelText.displayName = LabelPrimitive.Root.displayName
+
+export { LabelText }
\ No newline at end of file
diff --git a/components/RadioGroup/RadioGroup.tsx b/components/RadioGroup/RadioGroup.tsx
index 8790f2a7..7c43f040 100644
--- a/components/RadioGroup/RadioGroup.tsx
+++ b/components/RadioGroup/RadioGroup.tsx
@@ -3,11 +3,10 @@
 
 'use client';
 
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { Circle } from 'lucide-react';
-
 import { cn } from '../../utils/utils';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
diff --git a/components/RadioGroupDefault/RadioGroupDefault.test.tsx b/components/RadioGroupDefault/RadioGroupDefault.test.tsx
new file mode 100644
index 00000000..994aeb30
--- /dev/null
+++ b/components/RadioGroupDefault/RadioGroupDefault.test.tsx
@@ -0,0 +1,32 @@
+import { LabelText } from '../LabelText/LabelText';
+import { RadioGroupDefault, RadioGroupDefaultItem } from './RadioGroupDefault';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+describe('RadioGroupDefault', () => {
+  beforeEach(() => {
+    render(
+      <RadioGroupDefault defaultValue="all" required>
+        <div className="flex items-center space-x-2">
+          <RadioGroupDefaultItem value="all" id="all" />
+          <LabelText htmlFor="all">All users</LabelText>
+        </div>
+      </RadioGroupDefault>,
+    );
+  });
+
+  it('renders the RadioGroupDefault component', () => {
+    const radioGroup = screen.getByTestId('radio-group-default');
+    expect(radioGroup).toBeInTheDocument();
+  });
+
+  it('renders the RadioGroupDefaultItem component', () => {
+    const radioGroupItem = screen.getByTestId('radio-group-default-item');
+    expect(radioGroupItem).toBeInTheDocument();
+  });
+
+  it('renders the RadioGroupPrimitive.Indicator within RadioGroupDefaultItem', () => {
+    const indicator = screen.getByTestId('radio-group-default-indicator');
+    expect(indicator).toBeInTheDocument();
+  });
+});
diff --git a/components/RadioGroupDefault/RadioGroupDefault.tsx b/components/RadioGroupDefault/RadioGroupDefault.tsx
new file mode 100644
index 00000000..42a723be
--- /dev/null
+++ b/components/RadioGroupDefault/RadioGroupDefault.tsx
@@ -0,0 +1,55 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { Circle } from 'lucide-react';
+import { cn } from '@/utils/utils';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
+
+const RadioGroupDefault = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
+    className?: string;
+  }
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      data-testid="radio-group-default"
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroupDefault.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupDefaultItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    className?: string;
+  }
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      data-testid="radio-group-default-item"
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle
+          className="h-2.5 w-2.5 fill-current text-current"
+          data-testid="radio-group-default-indicator"
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupDefaultItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroupDefault, RadioGroupDefaultItem };
diff --git a/components/Textarea/Textarea.test.tsx b/components/Textarea/Textarea.test.tsx
new file mode 100644
index 00000000..6fc07d6e
--- /dev/null
+++ b/components/Textarea/Textarea.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Textarea } from './Textarea';
+import React from 'react';
+
+describe('Textarea Component', () => {
+  it('renders without crashing', () => {
+    render(<Textarea />);
+    const textarea = screen.getByTestId('textarea');
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it('applies the provided className', () => {
+    const className = 'custom-class';
+    render(<Textarea className={className} />);
+    const textarea = screen.getByTestId('textarea');
+    expect(textarea).toHaveClass(className);
+  });
+
+  it('calls onChange handler when text is entered', () => {
+    const handleChange = jest.fn();
+    render(<Textarea onChange={handleChange} />);
+    const textarea = screen.getByTestId('textarea');
+    fireEvent.change(textarea, { target: { value: 'New text' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates value when props.value changes', () => {
+    const { rerender } = render(<Textarea value="Initial value" />);
+    const textarea = screen.getByTestId('textarea');
+    expect(textarea).toHaveValue('Initial value');
+
+    rerender(<Textarea data-testid="textarea" value="Updated value" />);
+    expect(textarea).toHaveValue('Updated value');
+  });
+
+  it('respects minHeight and maxHeight props', () => {
+    render(<Textarea minHeight={100} maxHeight={200} />);
+    const textarea = screen.getByTestId('textarea');
+    expect(textarea.style.minHeight).toBe('102px');
+    expect(textarea.style.maxHeight).toBe('200px');
+  });
+
+  it('auto resizes based on content', () => {
+    render(<Textarea minHeight={100} maxHeight={200} />);
+    const textarea = screen.getByTestId('textarea');
+    fireEvent.change(textarea, {
+      target: { value: 'A very long text that should trigger auto resize' },
+    });
+    expect(textarea.style.height).not.toBe('102px');
+  });
+});
diff --git a/components/Textarea/Textarea.tsx b/components/Textarea/Textarea.tsx
new file mode 100644
index 00000000..08334d2a
--- /dev/null
+++ b/components/Textarea/Textarea.tsx
@@ -0,0 +1,121 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+import { cn } from '@/utils/utils';
+import { useImperativeHandle } from 'react';
+import * as React from 'react';
+
+interface UseAutosizeTextAreaProps {
+  textAreaRef: HTMLTextAreaElement | null;
+  minHeight?: number;
+  maxHeight?: number;
+  triggerAutoSize: string;
+}
+
+/**
+ * useAutosizeTextArea hook
+ * @param {UseAutosizeTextAreaProps} props - The props
+ */
+export const useAutosizeTextArea = ({
+  textAreaRef,
+  triggerAutoSize,
+  maxHeight = Number.MAX_SAFE_INTEGER,
+  minHeight = 0,
+}: UseAutosizeTextAreaProps): void => {
+  const [init, setInit] = React.useState(true);
+  React.useEffect(() => {
+    const offsetBorder = 2;
+    if (textAreaRef) {
+      if (init) {
+        textAreaRef.style.minHeight = `${minHeight + offsetBorder}px`;
+        if (maxHeight > minHeight) {
+          textAreaRef.style.maxHeight = `${maxHeight}px`;
+        }
+        setInit(false);
+      }
+      textAreaRef.style.height = `${minHeight + offsetBorder}px`;
+      const scrollHeight = textAreaRef.scrollHeight;
+      if (scrollHeight > maxHeight) {
+        textAreaRef.style.height = `${maxHeight}px`;
+      } else {
+        textAreaRef.style.height = `${scrollHeight + offsetBorder}px`;
+      }
+    }
+  }, [textAreaRef, triggerAutoSize]);
+};
+
+export type AutosizeTextAreaRef = {
+  textArea: HTMLTextAreaElement;
+  maxHeight: number;
+  minHeight: number;
+};
+
+type AutosizeTextAreaProps = {
+  maxHeight?: number;
+  minHeight?: number;
+  className?: string;
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+  value?: string | number | readonly string[] | undefined;
+  defaultValue?: string | number | readonly string[] | undefined;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<
+  AutosizeTextAreaRef,
+  AutosizeTextAreaProps
+>(
+  (
+    {
+      maxHeight = 450,
+      minHeight = 64,
+      className,
+      onChange,
+      value,
+      ...props
+    }: AutosizeTextAreaProps,
+    ref: React.Ref<AutosizeTextAreaRef>,
+  ) => {
+    const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
+    const [triggerAutoSize, setTriggerAutoSize] = React.useState('');
+
+    useAutosizeTextArea({
+      textAreaRef: textAreaRef.current,
+      triggerAutoSize: triggerAutoSize,
+      maxHeight,
+      minHeight,
+    });
+
+    useImperativeHandle(ref, () => ({
+      textArea: textAreaRef.current as HTMLTextAreaElement,
+      /**
+       * Focuses the textarea.
+       * @returns {void}
+       */
+      focus: (): void => textAreaRef.current?.focus(),
+      maxHeight,
+      minHeight,
+    }));
+
+    React.useEffect(() => {
+      setTriggerAutoSize(value as string);
+    }, [props?.defaultValue, value]);
+
+    return (
+      <textarea
+        data-testid="textarea"
+        {...props}
+        value={value}
+        ref={textAreaRef}
+        className={cn(
+          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+          className,
+        )}
+        onChange={(e) => {
+          setTriggerAutoSize(e.target.value);
+          onChange?.(e);
+        }}
+      />
+    );
+  },
+);
+Textarea.displayName = 'Textarea';