From 5ebbc1443f9389546e4ef929cf90db27541b30ee Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Mon, 28 Jul 2025 15:45:35 +0000
Subject: [PATCH 1/2] Update FormError placement guidance to recommend below
 inputs, above submit button

- Updated login form example to show FormError below inputs and above submit button
- Changed placement options to show 'below inputs, above submit button' as most common
- Updated placement strategy section to reflect new guidance
- Updated comprehensive form example to use FormError component consistently
- Added clarifying comment in FormError component usage section

This aligns with typical UX patterns where users see form-level errors after completing fields but before submitting.
---
 llms.txt | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/llms.txt b/llms.txt
index bc12aa5a..0f00908c 100644
--- a/llms.txt
+++ b/llms.txt
@@ -22,6 +22,7 @@ The `FormError` component provides standardized form-level error handling, compl
 import { FormError } from '@lambdacurry/forms';
 
 // Basic usage - looks for errors._form by default
+// Typically placed below inputs and above submit button
 <FormError />
 
 // Custom error key
@@ -136,9 +137,6 @@ const LoginForm = () => {
       <fetcher.Form onSubmit={methods.handleSubmit} className="max-w-md mx-auto p-6 space-y-4">
         <h2 className="text-xl font-semibold text-gray-900">Sign In</h2>
         
-        {/* Form-level error display */}
-        <FormError className="mb-4" />
-        
         <TextField
           name="email"
           type="email"
@@ -155,6 +153,9 @@ const LoginForm = () => {
           disabled={isSubmitting}
         />
         
+        {/* Form-level error display - typically placed below inputs and above submit button */}
+        <FormError className="mb-4" />
+        
         <Button type="submit" disabled={isSubmitting} className="w-full">
           {isSubmitting ? 'Signing In...' : 'Sign In'}
         </Button>
@@ -993,6 +994,9 @@ const ComprehensiveForm = () => {
 
         {/* Submit Button & Status */}
         <div className="pt-6">
+          {/* Form-level error display - below inputs, above submit button */}
+          <FormError className="mb-4" />
+          
           <Button 
             type="submit" 
             disabled={isSubmitting}
@@ -1007,13 +1011,6 @@ const ComprehensiveForm = () => {
               <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>
@@ -1144,14 +1141,14 @@ This comprehensive example serves as a complete reference for implementing any f
 
 7. **FormError Placement Options**
    ```typescript
-   // Top of form (most common)
+   // Below inputs, above submit button (most common)
    <FormError className="mb-4" />
    
    // Between sections
    <FormError className="my-4 text-center" />
    
-   // Bottom of form
-   <FormError className="mt-4" />
+   // Top of form (for critical errors that need immediate attention)
+   <FormError className="mb-4" />
    
    // Multiple placements with different styling
    <FormError className="mb-4 p-3 bg-red-50 rounded" />
@@ -1212,9 +1209,10 @@ This comprehensive example serves as a complete reference for implementing any f
 - **Be user-friendly**: Avoid technical jargon and error codes
 
 ### 3. Placement Strategy
-- **Top placement**: For critical errors that should be seen immediately
+- **Below inputs, above submit button**: Most common placement - users see errors after completing form fields but before submitting
+- **Top placement**: For critical errors that need immediate attention before users start filling the form
 - **Inline placement**: For contextual errors related to specific sections
-- **Bottom placement**: For summary or less critical errors
+- **Multiple placements**: FormError can be placed anywhere in the form and styled differently for various use cases
 
 ### 4. Component Integration
 - FormError works seamlessly with all existing form components

From 77c81c23c5446700611ccdd3f19abe80db83b025 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Mon, 28 Jul 2025 15:48:38 +0000
Subject: [PATCH 2/2] Simplify FormError placement comments

Removed redundant comments about FormError placement and kept just one clear comment in the comprehensive example.
---
 llms.txt | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/llms.txt b/llms.txt
index 0f00908c..86c89532 100644
--- a/llms.txt
+++ b/llms.txt
@@ -22,7 +22,6 @@ The `FormError` component provides standardized form-level error handling, compl
 import { FormError } from '@lambdacurry/forms';
 
 // Basic usage - looks for errors._form by default
-// Typically placed below inputs and above submit button
 <FormError />
 
 // Custom error key
@@ -153,7 +152,6 @@ const LoginForm = () => {
           disabled={isSubmitting}
         />
         
-        {/* Form-level error display - typically placed below inputs and above submit button */}
         <FormError className="mb-4" />
         
         <Button type="submit" disabled={isSubmitting} className="w-full">
@@ -994,7 +992,7 @@ const ComprehensiveForm = () => {
 
         {/* Submit Button & Status */}
         <div className="pt-6">
-          {/* Form-level error display - below inputs, above submit button */}
+          {/* Form-level errors appear below inputs, above submit button */}
           <FormError className="mb-4" />
           
           <Button