diff --git a/.changeset/heavy-dragons-drop.md b/.changeset/heavy-dragons-drop.md
new file mode 100644
index 00000000..66edcada
--- /dev/null
+++ b/.changeset/heavy-dragons-drop.md
@@ -0,0 +1,6 @@
+---
+"@lambdacurry/forms": minor
+"@lambdacurry/forms-docs": minor
+---
+
+Added remix textarea story and fixes a react error
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index ff5df6cb..5743076d 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -38,7 +38,3 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Send a Slack notification if a publish happens
-        if: steps.changesets.outputs.published == 'true'
-        run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 88ffd366..7c6b24e5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,14 @@
 {
-  "cSpell.words": ["autodocs", "biomejs", "Filenaming", "hookform", "isbot", "lucide", "shadcn", "sonner"]
+  "cSpell.words": ["autodocs", "biomejs", "Filenaming", "hookform", "isbot", "lucide", "shadcn", "sonner"],
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  }
 }
diff --git a/README.md b/README.md
index f4aee75e..d7e71b87 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Welcome!
 
-Checkout our [Storybook Documentation](https://lambda-curry.github.io/forms/?path=/docs/helloworld-start-here--docs) to see the components in action and get started.
+Checkout our [Storybook Documentation](https://lambda-curry.github.io/forms/?path=/docs/0-1-hello-world-start-here--docs) to see the components in action and get started.
 
 
 ## Getting Started
@@ -10,7 +10,7 @@ Step 1: Install the dependencies
 yarn install
 ```
 
-Note: You may need to enable corepack for yarn v4 by running `corepack enable` before intstalling the dependencies.
+Note: You may need to enable corepack for yarn v4 by running `corepack enable` before installing the dependencies.
 
 
 Step 2: Start Storybook
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
deleted file mode 100644
index ca501d40..00000000
--- a/apps/docs/CHANGELOG.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# @lambdacurry/forms-docs
-
-## 0.1.1
-
-### Patch Changes
-
-- d3ab83e: Fixed errors and versioning differences
-- Updated dependencies [d3ab83e]
-  - @lambdacurry/forms@0.0.2
diff --git a/apps/docs/src/remix/remix-textarea.stories.tsx b/apps/docs/src/remix/remix-textarea.stories.tsx
index 53e4d905..c23f042a 100644
--- a/apps/docs/src/remix/remix-textarea.stories.tsx
+++ b/apps/docs/src/remix/remix-textarea.stories.tsx
@@ -1,4 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { RemixTextarea } from '@lambdacurry/forms/remix/remix-textarea';
+import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react';
@@ -6,8 +8,6 @@ import { expect, userEvent, within } from '@storybook/test';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
 import { withRemixStubDecorator } from '../lib/storybook/remix-stub';
-import { RemixTextarea } from '@lambdacurry/forms/remix/remix-textarea';
-import { Button } from '@lambdacurry/forms/ui/button';
 
 const formSchema = z.object({
   comment: z.string().min(10, 'Comment must be at least 10 characters'),
@@ -37,9 +37,6 @@ const ControlledTextareaExample = () => {
           Submit
         </Button>
         {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
-        {methods.formState.errors.comment && (
-          <p className="mt-2 text-red-600">{methods.formState.errors.comment.message}</p>
-        )}
       </fetcher.Form>
     </RemixFormProvider>
   );
@@ -54,7 +51,7 @@ const handleFormSubmission = async (request: Request) => {
   } = await getValidatedFormData<FormData>(request, zodResolver(formSchema));
 
   if (errors) {
-    return { errors, defaultValues };
+    return { defaultValues };
   }
 
   if (data.comment.includes(BLOCKED_CONTENT)) {
@@ -108,6 +105,9 @@ const testInvalidSubmission = async ({ canvasElement }: { canvasElement: HTMLEle
   await userEvent.type(textarea, 'short');
   await userEvent.click(submitButton);
 
+  // Wait for any state updates
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
   expect(canvas.getByText((content) => content.includes('Comment must be at least 10 characters'))).toBeInTheDocument();
 };
 
@@ -149,6 +149,9 @@ const testValidSubmission = async ({ canvasElement }: { canvasElement: HTMLEleme
   await userEvent.type(textarea, 'This is a valid comment that is long enough');
   await userEvent.click(submitButton);
 
+  // Wait for any state updates
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
   // Check for success message
   await expect(canvas.getByText('Comment submitted successfully')).toBeInTheDocument();
 };
diff --git a/packages/components/src/remix/remix-checkbox.tsx b/packages/components/src/remix/remix-checkbox.tsx
index b486201c..f7424234 100644
--- a/packages/components/src/remix/remix-checkbox.tsx
+++ b/packages/components/src/remix/remix-checkbox.tsx
@@ -1,15 +1,13 @@
-import { useRemixFormContext } from 'remix-hook-form'
-import { Checkbox, type CheckboxProps } from '../ui/checkbox'
+import { useRemixFormContext } from 'remix-hook-form';
+import { Checkbox, type CheckboxProps } from '../ui/checkbox';
 import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-import type { FieldComponents } from '../ui/form';
 
 export type RemixCheckboxProps = Omit<CheckboxProps, 'control'>;
 
 export function RemixCheckbox(props: RemixCheckboxProps) {
   const { control } = useRemixFormContext();
 
-
-  const components: Partial<FieldComponents> = {
+  const components = {
     FormDescription: RemixFormDescription,
     FormControl: RemixFormControl,
     FormLabel: RemixFormLabel,
@@ -17,4 +15,4 @@ export function RemixCheckbox(props: RemixCheckboxProps) {
   };
 
   return <Checkbox control={control} {...props} components={components} />;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/remix/remix-form.tsx b/packages/components/src/remix/remix-form.tsx
index d0a8a5fb..9c8dd438 100644
--- a/packages/components/src/remix/remix-form.tsx
+++ b/packages/components/src/remix/remix-form.tsx
@@ -1,13 +1,8 @@
-import { type ReactNode, useContext, forwardRef } from 'react';
-import type {
-  KeepStateOptions,
-  FieldValues,
-  UseFormReturn,
-  UseFormRegister,
-} from 'react-hook-form';
+import { type ReactNode, forwardRef, useContext } from 'react';
+import type { BaseSyntheticEvent, ComponentPropsWithoutRef } from 'react';
+import type { FieldValues, KeepStateOptions, UseFormRegister, UseFormReturn } from 'react-hook-form';
 import { useRemixFormContext } from 'remix-hook-form';
-import { FormLabel, FormControl, FormDescription, FormMessage, FormFieldContext, FormItemContext } from '../ui/form';
-import type { BaseSyntheticEvent, ComponentPropsWithoutRef, } from 'react';
+import { FormControl, FormDescription, FormFieldContext, FormItemContext, FormLabel, FormMessage } from '../ui/form';
 
 export interface RemixFormProviderProps<T extends FieldValues>
   extends Omit<UseFormReturn<T>, 'handleSubmit' | 'reset'> {
@@ -40,36 +35,40 @@ export const useRemixFormField = () => {
   };
 };
 
-
 export const RemixFormLabel = forwardRef<HTMLLabelElement, ComponentPropsWithoutRef<typeof FormLabel>>((props, ref) => (
   <FormLabel ref={ref} {...props} />
 ));
 RemixFormLabel.displayName = 'RemixFormLabel';
 
-export const RemixFormControl = forwardRef<HTMLElement, ComponentPropsWithoutRef<typeof FormControl>>((props, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useRemixFormField();
-  return (
-    <FormControl
-      ref={ref}
-      error={!!error}
-      formItemId={formItemId}
-      formDescriptionId={formDescriptionId}
-      formMessageId={formMessageId}
-      {...props}
-    />
-  );
-});
+export const RemixFormControl = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof FormControl>>(
+  (props, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useRemixFormField();
+    return (
+      <FormControl
+        ref={ref}
+        error={!!error}
+        formItemId={formItemId}
+        formDescriptionId={formDescriptionId}
+        formMessageId={formMessageId}
+        {...props}
+      />
+    );
+  },
+);
 RemixFormControl.displayName = 'RemixFormControl';
 
-export const RemixFormDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormDescription>>((props, ref) => {
-  const { formDescriptionId } = useRemixFormField();
-  return <FormDescription ref={ref} formDescriptionId={formDescriptionId} {...props} />;
-});
+export const RemixFormDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormDescription>>(
+  (props, ref) => {
+    const { formDescriptionId } = useRemixFormField();
+    return <FormDescription ref={ref} formDescriptionId={formDescriptionId} {...props} />;
+  },
+);
 RemixFormDescription.displayName = 'RemixFormDescription';
 
-export const RemixFormMessage = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormMessage>>((props, ref) => {
-  const { error, formMessageId } = useRemixFormField();
-  return <FormMessage ref={ref} formMessageId={formMessageId} error={error?.message} {...props} />;
-});
+export const RemixFormMessage = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormMessage>>(
+  (props, ref) => {
+    const { error, formMessageId } = useRemixFormField();
+    return <FormMessage ref={ref} formMessageId={formMessageId} error={error?.message} {...props} />;
+  },
+);
 RemixFormMessage.displayName = 'RemixFormMessage';
-
diff --git a/packages/components/src/remix/remix-switch.tsx b/packages/components/src/remix/remix-switch.tsx
index 111a073b..02d0734d 100644
--- a/packages/components/src/remix/remix-switch.tsx
+++ b/packages/components/src/remix/remix-switch.tsx
@@ -1,8 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import { useRemixFormContext } from 'remix-hook-form'
-import { Switch } from '../ui/switch'
+import { useRemixFormContext } from 'remix-hook-form';
+import { Switch } from '../ui/switch';
 import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-import type { FieldComponents } from '../ui/form';
 
 export interface RemixSwitchProps extends Omit<ComponentPropsWithoutRef<typeof Switch>, 'control'> {
   name: string;
@@ -13,7 +12,7 @@ export interface RemixSwitchProps extends Omit<ComponentPropsWithoutRef<typeof S
 export function RemixSwitch({ name, label, description, ...props }: RemixSwitchProps) {
   const { control } = useRemixFormContext();
 
-  const components: Partial<FieldComponents> = {
+  const components = {
     FormDescription: RemixFormDescription,
     FormControl: RemixFormControl,
     FormLabel: RemixFormLabel,
@@ -21,14 +20,6 @@ export function RemixSwitch({ name, label, description, ...props }: RemixSwitchP
   };
 
   return (
-    <Switch
-      control={control}
-      name={name}
-      label={label}
-      description={description}
-      components={components}
-      {...props}
-    />
+    <Switch control={control} name={name} label={label} description={description} components={components} {...props} />
   );
 }
-
diff --git a/packages/components/src/remix/remix-text-field.tsx b/packages/components/src/remix/remix-text-field.tsx
index e68c5fb6..663f2d22 100644
--- a/packages/components/src/remix/remix-text-field.tsx
+++ b/packages/components/src/remix/remix-text-field.tsx
@@ -1,6 +1,5 @@
 import { useRemixFormContext } from 'remix-hook-form';
 import { TextField, type TextFieldProps } from '../ui/text-field';
-import type { FieldComponents } from '../ui/form';
 import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
 
 export type RemixTextFieldProps = Omit<TextFieldProps, 'control'>;
@@ -8,7 +7,7 @@ export type RemixTextFieldProps = Omit<TextFieldProps, 'control'>;
 export function RemixTextField(props: RemixTextFieldProps) {
   const { control } = useRemixFormContext();
 
-  const components: Partial<FieldComponents> = {
+  const components = {
     FormControl: RemixFormControl,
     FormLabel: RemixFormLabel,
     FormDescription: RemixFormDescription,
diff --git a/packages/components/src/remix/remix-textarea.tsx b/packages/components/src/remix/remix-textarea.tsx
index 19d025a9..c48ea263 100644
--- a/packages/components/src/remix/remix-textarea.tsx
+++ b/packages/components/src/remix/remix-textarea.tsx
@@ -1,23 +1,18 @@
 import { useRemixFormContext } from 'remix-hook-form';
 import { Textarea, type TextareaProps } from '../ui/textarea';
-import { FormField, FormItem } from '../ui/form';
-export interface RemixTextareaProps extends Omit<TextareaProps, 'control'> {
-  label?: string;
-  description?: string;
-}
+import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
+
+export type RemixTextareaProps = Omit<TextareaProps, 'control'>;
 
 export function RemixTextarea(props: RemixTextareaProps) {
   const { control } = useRemixFormContext();
 
-  return (
-    <FormField
-      control={control}
-      name={props.name ?? ''}
-      render={({ field }) => (
-        <FormItem>
-          <Textarea {...field} {...props} />
-        </FormItem>
-      )}
-    />
-  );
+  const components = {
+    FormControl: RemixFormControl,
+    FormLabel: RemixFormLabel,
+    FormDescription: RemixFormDescription,
+    FormMessage: RemixFormMessage,
+  };
+
+  return <Textarea control={control} components={components} {...props} />;
 }
diff --git a/packages/components/src/ui/calendar.tsx b/packages/components/src/ui/calendar.tsx
index fd4dbb0e..77141b67 100644
--- a/packages/components/src/ui/calendar.tsx
+++ b/packages/components/src/ui/calendar.tsx
@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { DayPicker } from 'react-day-picker';
+import { type CustomComponents, DayPicker } from 'react-day-picker';
 
 import { cn } from '../../lib/utils';
 import { buttonVariants } from './button';
@@ -42,9 +42,9 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" {...props} />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" {...props} />,
+      } as Partial<CustomComponents>}
       {...props}
     />
   );
diff --git a/packages/components/src/ui/checkbox.tsx b/packages/components/src/ui/checkbox.tsx
index f4041db7..4286ae42 100644
--- a/packages/components/src/ui/checkbox.tsx
+++ b/packages/components/src/ui/checkbox.tsx
@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode, forwardRef, type ElementRef } from 'react';
+import { type ComponentPropsWithoutRef, type ReactNode, forwardRef, } from 'react';
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
@@ -26,16 +26,16 @@ export interface CheckboxProps<
   components?: Partial<FieldComponents>;
 }
 
-const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
   ({ control, name, className, label, description, components, ...props }, ref) => (
     <FormField
       control={control}
       name={name}
       render={({ field, fieldState }) => (
-        <FormItem className={cn('flex flex-row items-start space-x-3 space-y-0', className)}>
+        <FormItem className={cn('flex flex-row items-start space-x-3 space-y-0', className)} ref={ref}>
           <FormControl Component={components?.FormControl}>
             <CheckboxPrimitive.Root
-              ref={ref}
+              ref={field.ref}
               className="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
               checked={field.value}
               onCheckedChange={field.onChange}
diff --git a/packages/components/src/ui/date-picker.tsx b/packages/components/src/ui/date-picker.tsx
index 27e09cc5..0251136d 100644
--- a/packages/components/src/ui/date-picker.tsx
+++ b/packages/components/src/ui/date-picker.tsx
@@ -30,14 +30,14 @@ export interface DatePickerProps<
   components?: Partial<FieldComponents>;
 }
 
-export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   ({ control, name, label, description, className, labelClassName, buttonClassName, components }, ref) => {
     return (
       <FormField
         control={control}
         name={name}
         render={({ field, fieldState }) => (
-          <FormItem className={className}>
+          <FormItem className={className} ref={ref}>
             {label && (
               <FormLabel Component={components?.FormLabel} className={labelClassName}>
                 {label}
@@ -47,7 +47,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
               <Popover>
                 <PopoverTrigger asChild>
                   <Button
-                    ref={ref}
+                    ref={field.ref}
                     variant="outline"
                     className={cn(
                       'w-[280px] justify-start text-left font-normal',
diff --git a/packages/components/src/ui/form.tsx b/packages/components/src/ui/form.tsx
index abe9eec4..0c3e2998 100644
--- a/packages/components/src/ui/form.tsx
+++ b/packages/components/src/ui/form.tsx
@@ -1,24 +1,25 @@
-import { cn } from '../../lib/utils';
-import { Label } from './label';
 import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import {
-  createContext,
-  forwardRef,
-  type HTMLAttributes,
-  useId,
-  type ElementRef,
   type ComponentPropsWithoutRef,
   type ComponentType,
+  type ElementRef,
+  type HTMLAttributes,
+  createContext,
+  forwardRef,
   useContext,
+  useId,
 } from 'react';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { Controller, type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+import { cn } from '../../lib/utils';
+import { Label } from './label';
 
 export interface FieldComponents {
-  FormControl: typeof FormControl;
-  FormDescription: typeof FormDescription;
-  FormLabel: typeof FormLabel;
-  FormMessage: typeof FormMessage;
+  FormControl: ForwardRefExoticComponent<FormControlProps & RefAttributes<HTMLDivElement>>;
+  FormDescription: ForwardRefExoticComponent<FormDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+  FormLabel: ForwardRefExoticComponent<FormLabelProps & RefAttributes<HTMLLabelElement>>;
+  FormMessage: ForwardRefExoticComponent<FormMessageProps & RefAttributes<HTMLParagraphElement>>;
 }
 
 export type FormFieldContextValue<
@@ -67,19 +68,24 @@ FormItem.displayName = 'FormItem';
 
 export interface FormLabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
   error?: string;
-  Component?: ComponentType<FormLabelProps>;
+  Component?: ForwardRefExoticComponent<FormLabelProps & RefAttributes<HTMLLabelElement>>;
 }
 
 export const FormLabel = forwardRef<ElementRef<typeof LabelPrimitive.Root>, FormLabelProps>(
-  ({ Component, htmlFor, className, ...props }, ref) => {
+  ({ Component, htmlFor, className, error, ...props }, ref) => {
     const { formItemId } = useContext(FormItemContext);
 
     if (Component) {
-      return <Component {...props} />;
+      return (
+        <Component
+          ref={ref}
+          htmlFor={htmlFor || formItemId}
+          className={cn(error && 'text-destructive', className)}
+          {...props}
+        />
+      );
     }
 
-    const { error } = props;
-
     return (
       <Label
         ref={ref}
@@ -97,41 +103,44 @@ export interface FormControlProps extends ComponentPropsWithoutRef<typeof Slot>
   formItemId?: string;
   formDescriptionId?: string;
   formMessageId?: string;
-  Component?: ComponentType<FormControlProps>;
+  Component?: ForwardRefExoticComponent<FormControlProps & RefAttributes<HTMLDivElement>>;
 }
 
-export const FormControl = forwardRef<ElementRef<typeof Slot>, FormControlProps>(({ Component, ...props }, ref) => {
+export const FormControl = forwardRef<HTMLDivElement, FormControlProps>(({ Component, ...props }, ref) => {
+  const { formItemId, formDescriptionId, formMessageId, error, ...restProps } = props;
+
+  const ariaProps = {
+    id: formItemId,
+    'aria-describedby': error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+    'aria-invalid': !!error,
+  };
+
   if (Component) {
-    return <Component {...props} />;
+    return <Component {...restProps} {...ariaProps} />;
   }
 
-  const { formItemId, error, formDescriptionId, formMessageId } = props;
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
+  return <Slot ref={ref} {...restProps} {...ariaProps} />;
 });
 FormControl.displayName = 'FormControl';
 
 export interface FormDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
   formDescriptionId?: string;
-  Component?: ComponentType<FormDescriptionProps>;
+  Component?: ForwardRefExoticComponent<FormDescriptionProps & RefAttributes<HTMLParagraphElement>>;
 }
 
 export const FormDescription = forwardRef<HTMLParagraphElement, FormDescriptionProps>(
-  ({ Component, className, ...props }, ref) => {
+  ({ Component, className, formDescriptionId, ...props }, ref) => {
     if (Component) {
-      return <Component {...props} />;
+      return (
+        <Component
+          ref={ref}
+          id={formDescriptionId}
+          className={cn('text-sm text-muted-foreground', className)}
+          {...props}
+        />
+      );
     }
 
-    const { formDescriptionId } = props;
-
     return <p ref={ref} id={formDescriptionId} className={cn('text-sm text-muted-foreground', className)} {...props} />;
   },
 );
@@ -140,17 +149,17 @@ FormDescription.displayName = 'FormDescription';
 export interface FormMessageProps extends HTMLAttributes<HTMLParagraphElement> {
   formMessageId?: string;
   error?: string;
-  Component?: ComponentType<FormMessageProps>;
+  Component?: ForwardRefExoticComponent<FormMessageProps & RefAttributes<HTMLParagraphElement>>;
 }
 
 export const FormMessage = forwardRef<HTMLParagraphElement, FormMessageProps>(
   ({ Component, className, ...props }, ref) => {
+    const { formMessageId, error, children } = props;
+
     if (Component) {
-      return <Component {...props} />;
+      return <Component ref={ref} id={formMessageId} className={className} {...props} />;
     }
 
-    const { formMessageId, error, children } = props;
-
     const body = error ? error : children;
 
     if (!body) {
@@ -158,7 +167,12 @@ export const FormMessage = forwardRef<HTMLParagraphElement, FormMessageProps>(
     }
 
     return (
-      <p ref={ref} id={formMessageId} className={cn('text-sm font-medium text-destructive', className)} {...props}>
+      <p
+        ref={ref}
+        id={formMessageId}
+        className={cn('form-message text-sm font-medium text-destructive', className)}
+        {...props}
+      >
         {body}
       </p>
     );
diff --git a/packages/components/src/ui/input-otp.tsx b/packages/components/src/ui/input-otp.tsx
index 4635bc3a..d18c3744 100644
--- a/packages/components/src/ui/input-otp.tsx
+++ b/packages/components/src/ui/input-otp.tsx
@@ -82,7 +82,7 @@ export interface InputOTPFieldProps<TFieldValues extends FieldValues = FieldValu
   components?: Partial<FieldComponents>;
 }
 
-export const InputOTPField = forwardRef<ElementRef<typeof OTPInput>, InputOTPFieldProps>(
+export const InputOTPField = forwardRef<HTMLDivElement, InputOTPFieldProps>(
   (
     { control, name, label, description, className, labelClassName, inputClassName, maxLength, components, ...props },
     ref,
@@ -94,7 +94,7 @@ export const InputOTPField = forwardRef<ElementRef<typeof OTPInput>, InputOTPFie
         control={control}
         name={name}
         render={({ field, fieldState }) => (
-          <FormItem className={className}>
+          <FormItem className={className} ref={ref}>
             {label && (
               <FormLabel Component={components?.FormLabel} className={labelClassName}>
                 {label}
@@ -102,7 +102,7 @@ export const InputOTPField = forwardRef<ElementRef<typeof OTPInput>, InputOTPFie
             )}
             <FormControl Component={components?.FormControl}>
               <InputOTP
-                ref={ref}
+                ref={field.ref}
                 id={formItemId}
                 aria-describedby={formItemId}
                 value={field.value}
diff --git a/packages/components/src/ui/input.tsx b/packages/components/src/ui/input.tsx
index 1fd6f327..62d15954 100644
--- a/packages/components/src/ui/input.tsx
+++ b/packages/components/src/ui/input.tsx
@@ -1,7 +1,7 @@
 import { type InputHTMLAttributes, forwardRef } from 'react';
 import { cn } from '../../lib/utils';
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> { }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
   return (
diff --git a/packages/components/src/ui/radio-group.tsx b/packages/components/src/ui/radio-group.tsx
index 35eb602e..906da6ae 100644
--- a/packages/components/src/ui/radio-group.tsx
+++ b/packages/components/src/ui/radio-group.tsx
@@ -54,20 +54,20 @@ export interface RadioGroupFieldProps<
   components?: Partial<FieldComponents>;
 }
 
-const RadioGroupField = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupFieldProps>(
+const RadioGroupField = forwardRef<HTMLDivElement, RadioGroupFieldProps>(
   ({ control, name, label, description, className, components, ...props }, ref) => {
     return (
       <FormField
         control={control}
         name={name}
-        render={({ field }) => (
-          <FormItem className={className}>
+        render={({ field, fieldState }) => (
+          <FormItem className={className} ref={ref}>
             {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
             <FormControl Component={components?.FormControl}>
-              <RadioGroup ref={ref} onValueChange={field.onChange} defaultValue={field.value} {...props} />
+              <RadioGroup ref={field.ref} onValueChange={field.onChange} defaultValue={field.value} {...props} />
             </FormControl>
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
-            <FormMessage Component={components?.FormMessage} />
+            {fieldState.error && <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>}
           </FormItem>
         )}
       />
diff --git a/packages/components/src/ui/switch.tsx b/packages/components/src/ui/switch.tsx
index c87b4bfb..a91172ed 100644
--- a/packages/components/src/ui/switch.tsx
+++ b/packages/components/src/ui/switch.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type ElementRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { cn } from '../../lib/utils';
@@ -17,20 +17,20 @@ export interface SwitchProps<
   components?: Partial<FieldComponents>;
 }
 
-const Switch = forwardRef<ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+const Switch = forwardRef<HTMLDivElement, SwitchProps>(
   ({ control, name, className, label, description, components, ...props }, ref) => (
     <FormField
       control={control}
       name={name}
       render={({ field }) => (
-        <FormItem className={cn('flex flex-row items-center justify-between rounded-lg border p-4', className)}>
+        <FormItem className={cn('flex flex-row items-center justify-between rounded-lg border p-4', className)} ref={ref}>
           <div className="space-y-0.5">
             {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
           </div>
           <FormControl Component={components?.FormControl}>
             <SwitchPrimitives.Root
-              ref={ref}
+              ref={field.ref}
               checked={field.value}
               onCheckedChange={field.onChange}
               className={cn(
diff --git a/packages/components/src/ui/text-field.tsx b/packages/components/src/ui/text-field.tsx
index 2062f28f..78e18e5d 100644
--- a/packages/components/src/ui/text-field.tsx
+++ b/packages/components/src/ui/text-field.tsx
@@ -1,11 +1,19 @@
 import { type InputHTMLAttributes, forwardRef } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import {
+  type FieldComponents,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './form';
 import { Input } from './input';
-import { FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, type FieldComponents } from './form';
-import type { Control, FieldPath, FieldValues } from "react-hook-form";
 
 export interface TextFieldProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > extends Omit<InputHTMLAttributes<HTMLInputElement>, 'name'> {
   control?: Control<TFieldValues>;
   name: TName;
@@ -14,20 +22,22 @@ export interface TextFieldProps<
   components?: Partial<FieldComponents>;
 }
 
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
   ({ control, name, label, description, className, components, ...props }, ref) => {
     return (
       <FormField
         control={control}
         name={name}
         render={({ field, fieldState }) => (
-          <FormItem className={className}>
+          <FormItem className={className} ref={ref}>
             {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
             <FormControl Component={components?.FormControl}>
-              <Input {...field} {...props} ref={ref} />
+              <Input {...field} {...props} ref={field.ref} />
             </FormControl>
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
-            {fieldState.error && <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>}
+            {fieldState.error && (
+              <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>
+            )}
           </FormItem>
         )}
       />
@@ -35,4 +45,4 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   },
 );
 
-TextField.displayName = 'TextField';
\ No newline at end of file
+TextField.displayName = 'TextField';
diff --git a/packages/components/src/ui/textarea.tsx b/packages/components/src/ui/textarea.tsx
index 0ff7e8a2..4c05e9d1 100644
--- a/packages/components/src/ui/textarea.tsx
+++ b/packages/components/src/ui/textarea.tsx
@@ -1,20 +1,46 @@
 import { type TextareaHTMLAttributes, forwardRef } from 'react';
 import { cn } from '../../lib/utils';
+import { FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, type FieldComponents } from './form';
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
 
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> {
+  control?: Control<TFieldValues>;
+  name: TName;
+  label?: string;
+  description?: string;
+  components?: Partial<FieldComponents>;
+}
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        'flex min-h-[80px] 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 md:text-sm',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Textarea.displayName = 'Textarea';
+export const Textarea = forwardRef<HTMLDivElement, TextareaProps>(
+  ({ control, name, label, description, className, components, ...props }, ref) => {
+    return (
+      <FormField
+        control={control}
+        name={name}
+        render={({ field, fieldState }) => (
+          <FormItem className={className} ref={ref}>
+            {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
+            <FormControl Component={components?.FormControl}>
+              <textarea
+                className={cn(
+                  'flex min-h-[80px] 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 md:text-sm',
+                  className,
+                )}
+                {...field}
+                {...props}
+                ref={field.ref}
+              />
+            </FormControl>
+            {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
+            {fieldState.error && <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>}
+          </FormItem>
+        )}
+      />
+    );
+  },
+);
 
-export { Textarea };
+Textarea.displayName = 'Textarea';