diff --git a/llms.txt b/llms.txt
new file mode 100644
index 00000000..8e0b1f3f
--- /dev/null
+++ b/llms.txt
@@ -0,0 +1,1009 @@
+# LambdaCurry Forms - Complete Implementation Guide for LLMs
+
+This comprehensive guide covers everything needed to implement forms using the `@lambdacurry/forms` remix-hook-form components. This documentation is specifically designed for LLMs to understand all features, patterns, and best practices.
+
+## Core Architecture Overview
+
+The library provides **form-aware wrapper components** in the `remix-hook-form` directory that automatically integrate with React Router forms and Remix Hook Form context. These components eliminate boilerplate while maintaining full customization capabilities.
+
+### Key Principle: Zero Boilerplate Form Integration
+- Components automatically access form context via `useRemixFormContext()`
+- No need to manually pass `control` props
+- Automatic error handling and validation display
+- Built-in accessibility features
+
+## Basic Form Setup Pattern
+
+### 1. Required Imports
+```typescript
+import { zodResolver } from '@hookform/resolvers/zod';
+import { RemixFormProvider, useRemixForm, getValidatedFormData } from 'remix-hook-form';
+import { z } from 'zod';
+import { useFetcher, type ActionFunctionArgs } from 'react-router';
+
+// Import form components
+import { TextField, Checkbox } from '@lambdacurry/forms';
+import { Button } from '@lambdacurry/forms/ui/button';
+```
+
+### 2. Zod Schema Definition
+```typescript
+const formSchema = z.object({
+  username: z.string().min(3, 'Username must be at least 3 characters'),
+  email: z.string().email('Invalid email address'),
+  terms: z.boolean().refine(val => val === true, 'You must accept the terms'),
+  age: z.coerce.number().min(18, 'Must be at least 18 years old'),
+});
+
+type FormData = z.infer<typeof formSchema>;
+```
+
+### 3. Form Component Setup
+```typescript
+const MyFormComponent = () => {
+  const fetcher = useFetcher<{ message: string; errors?: Record<string, { message: string }> }>();
+  
+  const methods = useRemixForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: '',
+      email: '',
+      terms: false,
+      age: undefined,
+    },
+    fetcher,
+    submitConfig: {
+      action: '/',
+      method: 'post',
+    },
+  });
+
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={methods.handleSubmit}>
+        <TextField name="username" label="Username" />
+        <TextField name="email" label="Email Address" />
+        <TextField name="age" type="number" label="Age" />
+        <Checkbox name="terms" label="Accept Terms and Conditions" />
+        
+        <Button type="submit">Submit</Button>
+        {fetcher.data?.message && <p>{fetcher.data.message}</p>}
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+```
+
+### 4. Server Action Handler
+```typescript
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const { data, errors } = await getValidatedFormData<FormData>(
+    request, 
+    zodResolver(formSchema)
+  );
+
+  if (errors) {
+    return { errors };
+  }
+
+  // Process the validated data
+  console.log('Form data:', data);
+  
+  return { message: 'Form submitted successfully!' };
+};
+```
+
+## Available Form Components
+
+### TextField Component
+```typescript
+<TextField 
+  name="fieldName"           // Required: field name for form registration
+  label="Field Label"        // Optional: display label
+  description="Help text"    // Optional: description text
+  placeholder="Enter text"   // Optional: placeholder text
+  type="text"               // Optional: input type (text, email, password, number, etc.)
+  prefix="$"                // Optional: prefix content (e.g., currency symbol)
+  suffix="USD"              // Optional: suffix content (e.g., units)
+  className="custom-class"   // Optional: additional CSS classes
+  components={{              // Optional: custom component overrides
+    Input: CustomInput,
+    FormLabel: CustomLabel,
+    FormMessage: CustomMessage,
+  }}
+/>
+```
+
+### Textarea Component
+```typescript
+<Textarea 
+  name="message"
+  label="Your Message"
+  description="Enter your detailed message"
+  placeholder="Type your message here..."
+  rows={5}                  // Optional: number of visible rows
+  className="custom-class"
+  components={{
+    TextArea: CustomTextarea,
+    FormLabel: CustomLabel,
+  }}
+/>
+```
+
+### Checkbox Component
+```typescript
+<Checkbox 
+  name="terms"
+  label="Accept Terms and Conditions"
+  description="You must accept our terms to continue"
+  className="custom-class"
+  components={{
+    FormLabel: CustomLabel,
+    FormMessage: CustomMessage,
+  }}
+/>
+```
+
+### Switch Component
+```typescript
+<Switch 
+  name="notifications"
+  label="Enable Notifications"
+  description="Receive email notifications"
+  className="custom-class"
+/>
+```
+
+### RadioGroup Component
+Two usage patterns available:
+
+#### Pattern 1: Using options prop
+```typescript
+const sizeOptions = [
+  { value: 'xs', label: 'Extra Small' },
+  { value: 'sm', label: 'Small' },
+  { value: 'md', label: 'Medium' },
+  { value: 'lg', label: 'Large' },
+];
+
+<RadioGroup
+  name="size"
+  label="Select Size"
+  description="Choose your preferred size"
+  options={sizeOptions}
+  labelClassName="font-semibold"    // Optional: custom label styling
+  itemClassName="p-2 rounded"       // Optional: custom item styling
+/>
+```
+
+#### Pattern 2: Using RadioGroupItem children
+```typescript
+<RadioGroup
+  name="design"
+  label="Design Style"
+  description="Choose your design preference"
+>
+  <div className="grid grid-cols-3 gap-4">
+    <RadioGroupItem
+      value="modern"
+      label="Modern"
+      wrapperClassName="bg-blue-50 p-3 rounded-lg"
+      labelClassName="text-blue-800 font-bold"
+    />
+    <RadioGroupItem
+      value="classic"
+      label="Classic"
+      wrapperClassName="bg-amber-50 p-3 rounded-lg"
+      labelClassName="text-amber-800 font-bold"
+    />
+  </div>
+</RadioGroup>
+```
+
+### DatePicker Component
+```typescript
+<DatePicker 
+  name="birthDate"
+  label="Birth Date"
+  description="Select your date of birth"
+  className="custom-class"
+  disabled={isSubmitting}   // Optional: disable during form submission
+/>
+```
+
+**Zod Schema for Date Fields:**
+```typescript
+const formSchema = z.object({
+  birthDate: z.coerce.date({
+    required_error: 'Please select a date',
+  }),
+});
+```
+
+### DropdownMenuSelect Component
+```typescript
+<DropdownMenuSelect 
+  name="fruit"
+  label="Select Fruit"
+  description="Choose your favorite fruit"
+  disabled={isSubmitting}   // Optional: disable during form submission
+>
+  <DropdownMenuSelectItem value="apple">Apple</DropdownMenuSelectItem>
+  <DropdownMenuSelectItem value="banana">Banana</DropdownMenuSelectItem>
+  <DropdownMenuSelectItem value="orange">Orange</DropdownMenuSelectItem>
+</DropdownMenuSelect>
+```
+
+**Zod Schema for Select Fields:**
+```typescript
+const formSchema = z.object({
+  fruit: z.string({
+    required_error: 'Please select a fruit',
+  }),
+});
+```
+
+### OTPInput Component
+```typescript
+<OTPInput 
+  name="otp"
+  label="Enter Verification Code"
+  description="Enter the 6-digit code sent to your phone"
+  maxLength={6}             // Required: number of digits
+  className="custom-class"
+  disabled={isSubmitting}   // Optional: disable during form submission
+/>
+```
+
+**Zod Schema for OTP Fields:**
+```typescript
+const formSchema = z.object({
+  otp: z.string().min(6, 'OTP must be 6 digits'),
+});
+```
+
+## Component Customization System
+
+### Custom Input Components
+```typescript
+// Create custom input component
+const PurpleInput = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <input
+    {...props}
+    className="w-full rounded-lg border-2 border-purple-300 bg-purple-50 px-4 py-2 text-purple-900 focus:border-purple-500"
+  />
+);
+
+// Use in TextField
+<TextField
+  name="email"
+  label="Email"
+  components={{
+    Input: PurpleInput,
+  }}
+/>
+```
+
+### Custom Form Components
+```typescript
+// Custom label
+const CustomLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => (
+  <FormLabel className="text-lg font-bold text-blue-700" {...props} />
+);
+
+// Custom error message
+const CustomMessage = (props: React.ComponentPropsWithoutRef<typeof FormMessage>) => (
+  <FormMessage className="text-red-500 bg-red-50 p-2 rounded-md" {...props} />
+);
+
+// Apply to any component
+<TextField
+  name="username"
+  label="Username"
+  components={{
+    FormLabel: CustomLabel,
+    FormMessage: CustomMessage,
+  }}
+/>
+```
+
+## Advanced Form Patterns
+
+### Custom Submit Handlers
+
+Use `submitHandlers.onValid` to transform data before submission. This is useful for:
+- Adding computed fields (timestamps, IDs)
+- Transforming data formats
+- Combining multiple fields
+- Adding metadata
+
+```typescript
+const methods = useRemixForm<FormData>({
+  resolver: zodResolver(formSchema),
+  fetcher,
+  submitConfig: {
+    action: '/',
+    method: 'post',
+  },
+  submitHandlers: {
+    onValid: (data) => {
+      // Transform data before submission
+      const transformedData = {
+        ...data,
+        timestamp: new Date().toISOString(),
+        processed: true,
+        fullName: `${data.firstName} ${data.lastName}`, // Combine fields
+      };
+
+      fetcher.submit(
+        createFormData(transformedData),
+        {
+          method: 'post',
+          action: '/',
+        }
+      );
+    },
+  },
+});
+```
+
+### Checkbox Groups with Custom Submission
+
+When working with multiple checkboxes, you often want to transform the boolean object into an array of selected values:
+
+**Schema for Checkbox Group:**
+```typescript
+const formSchema = z.object({
+  colors: z.object({
+    red: z.boolean().default(false),
+    blue: z.boolean().default(false),
+    green: z.boolean().default(false),
+  }),
+});
+```
+
+**Form Implementation:**
+```typescript
+<div className="space-y-2">
+  <Checkbox name="colors.red" label="Red" />
+  <Checkbox name="colors.blue" label="Blue" />
+  <Checkbox name="colors.green" label="Green" />
+</div>
+```
+
+**Custom Submission Handler:**
+```typescript
+submitHandlers: {
+  onValid: (data) => {
+    // Extract selected colors into array
+    const selectedColors = Object.entries(data.colors)
+      .filter(([_, selected]) => selected)
+      .map(([color]) => color);
+
+    // Submit transformed data
+    fetcher.submit(
+      createFormData({ selectedColors }),
+      { method: 'post', action: '/' }
+    );
+  },
+}
+```
+
+### Conditional Field Display
+```typescript
+const MyForm = () => {
+  const methods = useRemixForm<FormData>({...});
+  const watchAccountType = methods.watch('accountType');
+
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={methods.handleSubmit}>
+        <RadioGroup
+          name="accountType"
+          label="Account Type"
+          options={[
+            { value: 'personal', label: 'Personal' },
+            { value: 'business', label: 'Business' },
+          ]}
+        />
+
+        {/* Conditional field based on selection */}
+        {watchAccountType === 'business' && (
+          <TextField
+            name="companyName"
+            label="Company Name"
+            description="Enter your company name"
+          />
+        )}
+
+        <Button type="submit">Submit</Button>
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+```
+
+### Form with Loading States
+```typescript
+const MyForm = () => {
+  const fetcher = useFetcher<{ message: string }>();
+  const isSubmitting = fetcher.state === 'submitting';
+
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={methods.handleSubmit}>
+        <TextField name="email" label="Email" disabled={isSubmitting} />
+        
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Submitting...' : 'Submit'}
+        </Button>
+        
+        {fetcher.data?.message && (
+          <div className="mt-4 p-4 bg-green-50 rounded-md">
+            <p className="text-green-700">{fetcher.data.message}</p>
+          </div>
+        )}
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+```
+
+## Zod Schema Patterns & Validation
+
+### Common Validation Patterns
+```typescript
+const formSchema = z.object({
+  // Required string with minimum length
+  username: z.string().min(3, 'Username must be at least 3 characters'),
+  
+  // Email validation
+  email: z.string().email('Please enter a valid email address'),
+  
+  // Password with complexity requirements
+  password: z.string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, 'Password must contain uppercase, lowercase, and number'),
+  
+  // Number with range validation
+  age: z.coerce.number()
+    .min(18, 'Must be at least 18 years old')
+    .max(120, 'Age must be realistic'),
+  
+  // Boolean with custom validation
+  terms: z.boolean().refine(val => val === true, 'You must accept the terms'),
+  
+  // Optional fields
+  middleName: z.string().optional(),
+  
+  // Date validation
+  birthDate: z.coerce.date({
+    required_error: 'Please select your birth date',
+  }),
+  
+  // Enum validation for select/radio
+  size: z.enum(['xs', 'sm', 'md', 'lg', 'xl'], {
+    required_error: 'Please select a size',
+  }),
+  
+  // Array validation
+  hobbies: z.array(z.string()).min(1, 'Select at least one hobby'),
+  
+  // Object validation for nested data
+  address: z.object({
+    street: z.string().min(1, 'Street is required'),
+    city: z.string().min(1, 'City is required'),
+    zipCode: z.string().regex(/^\d{5}$/, 'ZIP code must be 5 digits'),
+  }),
+});
+```
+
+### Server-Side Validation & Error Handling
+```typescript
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const { data, errors } = await getValidatedFormData<FormData>(
+    request, 
+    zodResolver(formSchema)
+  );
+
+  // Return validation errors
+  if (errors) {
+    return { errors };
+  }
+
+  // Additional server-side validation
+  const existingUser = await getUserByEmail(data.email);
+  if (existingUser) {
+    return {
+      errors: {
+        email: { message: 'Email address is already registered' }
+      }
+    };
+  }
+
+  // Process successful submission
+  try {
+    await createUser(data);
+    return { 
+      message: 'Account created successfully!',
+      redirectTo: '/dashboard' 
+    };
+  } catch (error) {
+    return { 
+      errors: { 
+        _form: { message: 'Failed to create account. Please try again.' }
+      }
+    };
+  }
+};
+```
+
+## Success Handling & Redirects
+
+### Success Messages
+
+Display success messages from server responses:
+
+```typescript
+// In your component
+{fetcher.data?.message && (
+  <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-md">
+    <p className="text-green-700 font-medium">{fetcher.data.message}</p>
+  </div>
+)}
+
+// Error messages
+{fetcher.data?.errors?._form && (
+  <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
+    <p className="text-red-700 font-medium">{fetcher.data.errors._form.message}</p>
+  </div>
+)}
+```
+
+### Programmatic Redirects
+
+**Client-side redirect handling:**
+```typescript
+import { useNavigate } from 'react-router';
+
+const MyForm = () => {
+  const navigate = useNavigate();
+  const fetcher = useFetcher();
+
+  // Handle redirect from server response
+  useEffect(() => {
+    if (fetcher.data?.redirectTo) {
+      navigate(fetcher.data.redirectTo);
+    }
+  }, [fetcher.data?.redirectTo, navigate]);
+
+  // ... rest of component
+};
+```
+
+**Server-side redirect:**
+```typescript
+import { redirect } from 'react-router';
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  // ... validation and processing
+  
+  // Redirect after successful submission
+  return redirect('/success');
+};
+```
+
+### Optimistic UI Updates
+
+Show immediate feedback while form is submitting:
+
+```typescript
+import { useState, useEffect } from 'react';
+
+const MyForm = () => {
+  const fetcher = useFetcher();
+  const [optimisticMessage, setOptimisticMessage] = useState('');
+
+  const handleSubmit = (data: FormData) => {
+    // Show optimistic message immediately
+    setOptimisticMessage('Saving...');
+    
+    // Submit form
+    methods.handleSubmit();
+  };
+
+  useEffect(() => {
+    if (fetcher.state === 'idle' && fetcher.data) {
+      setOptimisticMessage('');
+    }
+  }, [fetcher.state, fetcher.data]);
+
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={handleSubmit}>
+        {/* Form fields */}
+        
+        {optimisticMessage && <p className="text-blue-600">{optimisticMessage}</p>}
+        {fetcher.data?.message && <p className="text-green-600">{fetcher.data.message}</p>}
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+```
+
+## Complete Form Example
+
+Here's a comprehensive example demonstrating all major features:
+
+```typescript
+import { zodResolver } from '@hookform/resolvers/zod';
+import { 
+  TextField, 
+  Textarea, 
+  Checkbox, 
+  RadioGroup, 
+  DatePicker,
+  DropdownMenuSelect 
+} from '@lambdacurry/forms';
+import { Button } from '@lambdacurry/forms/ui/button';
+import { DropdownMenuSelectItem } from '@lambdacurry/forms/ui/dropdown-menu-select-field';
+import { RemixFormProvider, useRemixForm, getValidatedFormData, createFormData } from 'remix-hook-form';
+import { useFetcher, type ActionFunctionArgs } from 'react-router';
+import { z } from 'zod';
+
+// Comprehensive form schema
+const formSchema = z.object({
+  // Personal Information
+  firstName: z.string().min(2, 'First name must be at least 2 characters'),
+  lastName: z.string().min(2, 'Last name must be at least 2 characters'),
+  email: z.string().email('Please enter a valid email address'),
+  birthDate: z.coerce.date({
+    required_error: 'Please select your birth date',
+  }),
+  
+  // Preferences
+  accountType: z.enum(['personal', 'business'], {
+    required_error: 'Please select an account type',
+  }),
+  notifications: z.boolean().default(false),
+  newsletter: z.boolean().default(false),
+  
+  // Additional Info
+  bio: z.string().min(10, 'Bio must be at least 10 characters').optional(),
+  country: z.string({
+    required_error: 'Please select your country',
+  }),
+  
+  // Terms
+  terms: z.boolean().refine(val => val === true, 'You must accept the terms'),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const ComprehensiveForm = () => {
+  const fetcher = useFetcher<{ 
+    message: string; 
+    errors?: Record<string, { message: string }>;
+    redirectTo?: string;
+  }>();
+  
+  const methods = useRemixForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      birthDate: undefined,
+      accountType: undefined,
+      notifications: false,
+      newsletter: false,
+      bio: '',
+      country: '',
+      terms: false,
+    },
+    fetcher,
+    submitConfig: {
+      action: '/register',
+      method: 'post',
+    },
+    submitHandlers: {
+      onValid: (data) => {
+        // Transform data before submission
+        const transformedData = {
+          ...data,
+          fullName: `${data.firstName} ${data.lastName}`,
+          registrationDate: new Date().toISOString(),
+        };
+
+        fetcher.submit(
+          createFormData(transformedData),
+          {
+            method: 'post',
+            action: '/register',
+          }
+        );
+      },
+    },
+  });
+
+  const watchAccountType = methods.watch('accountType');
+  const isSubmitting = fetcher.state === 'submitting';
+
+  return (
+    <RemixFormProvider {...methods}>
+      <fetcher.Form onSubmit={methods.handleSubmit} className="max-w-2xl mx-auto p-6 space-y-6">
+        <h1 className="text-2xl font-bold text-gray-900">Create Account</h1>
+        
+        {/* Personal Information Section */}
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold text-gray-800">Personal Information</h2>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <TextField
+              name="firstName"
+              label="First Name"
+              placeholder="Enter your first name"
+              disabled={isSubmitting}
+            />
+            <TextField
+              name="lastName"
+              label="Last Name"
+              placeholder="Enter your last name"
+              disabled={isSubmitting}
+            />
+          </div>
+          
+          <TextField
+            name="email"
+            type="email"
+            label="Email Address"
+            placeholder="Enter your email"
+            description="We'll use this to send you important updates"
+            disabled={isSubmitting}
+          />
+          
+          <DatePicker
+            name="birthDate"
+            label="Date of Birth"
+            description="You must be 18 or older to register"
+            disabled={isSubmitting}
+          />
+        </div>
+
+        {/* Account Preferences */}
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold text-gray-800">Account Preferences</h2>
+          
+          <RadioGroup
+            name="accountType"
+            label="Account Type"
+            description="Choose the type of account you want to create"
+            options={[
+              { value: 'personal', label: 'Personal Account' },
+              { value: 'business', label: 'Business Account' },
+            ]}
+            disabled={isSubmitting}
+          />
+          
+          {/* Conditional field based on account type */}
+          {watchAccountType === 'business' && (
+            <TextField
+              name="companyName"
+              label="Company Name"
+              placeholder="Enter your company name"
+              description="This will appear on your business profile"
+              disabled={isSubmitting}
+            />
+          )}
+          
+          <DropdownMenuSelect
+            name="country"
+            label="Country"
+            description="Select your country of residence"
+            disabled={isSubmitting}
+          >
+            <DropdownMenuSelectItem value="us">United States</DropdownMenuSelectItem>
+            <DropdownMenuSelectItem value="ca">Canada</DropdownMenuSelectItem>
+            <DropdownMenuSelectItem value="uk">United Kingdom</DropdownMenuSelectItem>
+            <DropdownMenuSelectItem value="au">Australia</DropdownMenuSelectItem>
+          </DropdownMenuSelect>
+        </div>
+
+        {/* Additional Information */}
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold text-gray-800">Additional Information</h2>
+          
+          <Textarea
+            name="bio"
+            label="Bio (Optional)"
+            placeholder="Tell us a bit about yourself..."
+            description="This will appear on your public profile"
+            rows={4}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        {/* Notifications & Terms */}
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold text-gray-800">Preferences & Terms</h2>
+          
+          <div className="space-y-3">
+            <Checkbox
+              name="notifications"
+              label="Enable email notifications"
+              description="Receive updates about your account and new features"
+              disabled={isSubmitting}
+            />
+            
+            <Checkbox
+              name="newsletter"
+              label="Subscribe to newsletter"
+              description="Get weekly tips and product updates"
+              disabled={isSubmitting}
+            />
+            
+            <Checkbox
+              name="terms"
+              label="I accept the Terms of Service and Privacy Policy"
+              description="Required to create an account"
+              disabled={isSubmitting}
+            />
+          </div>
+        </div>
+
+        {/* Submit Button & Status */}
+        <div className="pt-6">
+          <Button 
+            type="submit" 
+            disabled={isSubmitting}
+            className="w-full"
+          >
+            {isSubmitting ? 'Creating Account...' : 'Create Account'}
+          </Button>
+          
+          {/* Success Message */}
+          {fetcher.data?.message && (
+            <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-md">
+              <p className="text-green-700 font-medium">{fetcher.data.message}</p>
+            </div>
+          )}
+          
+          {/* General Error */}
+          {fetcher.data?.errors?._form && (
+            <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
+              <p className="text-red-700 font-medium">{fetcher.data.errors._form.message}</p>
+            </div>
+          )}
+        </div>
+      </fetcher.Form>
+    </RemixFormProvider>
+  );
+};
+
+// Server action handler
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const { data, errors } = await getValidatedFormData<FormData>(
+    request, 
+    zodResolver(formSchema)
+  );
+
+  if (errors) {
+    return { errors };
+  }
+
+  // Additional server-side validation
+  const existingUser = await getUserByEmail(data.email);
+  if (existingUser) {
+    return {
+      errors: {
+        email: { message: 'This email address is already registered' }
+      }
+    };
+  }
+
+  try {
+    // Create user account
+    const user = await createUser({
+      firstName: data.firstName,
+      lastName: data.lastName,
+      email: data.email,
+      birthDate: data.birthDate,
+      accountType: data.accountType,
+      country: data.country,
+      bio: data.bio,
+      preferences: {
+        notifications: data.notifications,
+        newsletter: data.newsletter,
+      },
+    });
+
+    return { 
+      message: 'Account created successfully! Welcome aboard!',
+      redirectTo: '/dashboard'
+    };
+  } catch (error) {
+    console.error('Account creation failed:', error);
+    return { 
+      errors: { 
+        _form: { message: 'Failed to create account. Please try again.' }
+      }
+    };
+  }
+};
+
+export default ComprehensiveForm;
+```
+
+**This example demonstrates:**
+- ✅ All major form components (TextField, Textarea, Checkbox, RadioGroup, DatePicker, DropdownMenuSelect)
+- ✅ Complex validation with Zod schemas
+- ✅ Conditional field display based on form values
+- ✅ Custom submit handlers with data transformation
+- ✅ Loading states and disabled inputs during submission
+- ✅ Error handling for both client and server-side validation
+- ✅ Success messages and redirect handling
+- ✅ Responsive layout with proper spacing and styling
+- ✅ Accessibility features built-in to all components
+
+This comprehensive example serves as a complete reference for implementing any form using the LambdaCurry Forms library!
+
+---
+
+## Key Implementation Notes for LLMs
+
+### Essential Patterns to Follow:
+
+1. **Form Provider Setup**
+   ```typescript
+   <RemixFormProvider {...methods}>
+     <fetcher.Form onSubmit={methods.handleSubmit}>
+       {/* Form components */}
+     </fetcher.Form>
+   </RemixFormProvider>
+   ```
+
+2. **Error Handling**
+   - Errors display automatically via `FormMessage` component
+   - Server errors: `return { errors }` from action
+   - Field-specific: `errors.fieldName.message`
+   - Form-level: `errors._form.message`
+
+3. **Loading States**
+   ```typescript
+   const isSubmitting = fetcher.state === 'submitting';
+   <TextField disabled={isSubmitting} />
+   <Button disabled={isSubmitting}>
+     {isSubmitting ? 'Submitting...' : 'Submit'}
+   </Button>
+   ```
+
+4. **Conditional Fields**
+   ```typescript
+   const watchValue = methods.watch('fieldName');
+   {watchValue === 'condition' && <TextField name="conditionalField" />}
+   ```
+
+5. **Data Transformation**
+   ```typescript
+   submitHandlers: {
+     onValid: (data) => {
+       const transformed = { ...data, computed: 'value' };
+       fetcher.submit(createFormData(transformed), { method: 'post' });
+     }
+   }
+   ```
+
+6. **Server Validation**
+   ```typescript
+   export const action = async ({ request }) => {
+     const { data, errors } = await getValidatedFormData(request, zodResolver(schema));
+     if (errors) return { errors };
+     // Process data...
+   };
+   ```
+
+### Important Reminders:
+- 🔥 **Always import from `@lambdacurry/forms`** for form-aware components
+- 🔥 **Use `createFormData()` for custom submissions** to ensure proper formatting
+- 🔥 **All components are accessible by default** - no additional ARIA setup needed
+- 🔥 **Form context is automatic** - no need to pass `control` props manually