fix(input): prevent validation layout shifts

components/motion/input.tsx

@@ -38,6 +38,8 @@ export interface InputProps extends Omit<
   onChange?: (value: string) => void;
   /** Truthy error triggers a shake, red border and (if a string) a message. */
   error?: string | boolean;
+  /** Reserve one message line so validation does not shift nearby content. */
+  reserveErrorLine?: boolean;
   success?: boolean;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
@@ -54,6 +56,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     onFocus,
     onBlur,
     error,
+    reserveErrorLine = false,
     success,
     leftIcon,
     rightIcon,
@@ -206,32 +209,34 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         ) : null}
       </div>
 
-      <AnimatePresence initial={false}>
-        {errorMessage ? (
-          <motion.p
-            id={`${id}-error`}
-            role="alert"
-            initial={
-              reduce
-                ? { opacity: 0 }
-                : { opacity: 0, y: -4, filter: "blur(4px)" }
-            }
-            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-            exit={
-              reduce
-                ? { opacity: 0 }
-                : { opacity: 0, y: -4, filter: "blur(4px)" }
-            }
-            transition={{ duration: 0.2 }}
-            className={cn(
-              "px-1 text-xs text-destructive",
-              classNames?.errorMessage,
-            )}
-          >
-            {errorMessage}
-          </motion.p>
-        ) : null}
-      </AnimatePresence>
+      <div className={reserveErrorLine ? "min-h-4" : "contents"}>
+        <AnimatePresence initial={false}>
+          {errorMessage ? (
+            <motion.p
+              id={`${id}-error`}
+              role="alert"
+              initial={
+                reduce
+                  ? { opacity: 0 }
+                  : { opacity: 0, y: -4, filter: "blur(4px)" }
+              }
+              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+              exit={
+                reduce
+                  ? { opacity: 0 }
+                  : { opacity: 0, y: -4, filter: "blur(4px)" }
+              }
+              transition={{ duration: 0.2 }}
+              className={cn(
+                "px-1 text-xs text-destructive",
+                classNames?.errorMessage,
+              )}
+            >
+              {errorMessage}
+            </motion.p>
+          ) : null}
+        </AnimatePresence>
+      </div>
     </div>
   );
 });

components/motion/signup-form.tsx

@@ -289,6 +289,7 @@ export function SignUpForm({
           onChange={(next) => setValue("name", next)}
           onBlur={() => touch("name")}
           error={shownError("name")}
+          reserveErrorLine
           success={isValid("name")}
         />
 
@@ -304,6 +305,7 @@ export function SignUpForm({
           onChange={(next) => setValue("email", next)}
           onBlur={() => touch("email")}
           error={shownError("email")}
+          reserveErrorLine
           success={isValid("email")}
         />
 
@@ -330,6 +332,7 @@ export function SignUpForm({
             onChange={(next) => setValue("password", next)}
             onBlur={() => touch("password")}
             error={shownError("password")}
+            reserveErrorLine
           />
 
           <AnimatePresence initial={false}>
@@ -383,6 +386,7 @@ export function SignUpForm({
           onChange={(next) => setValue("confirmPassword", next)}
           onBlur={() => touch("confirmPassword")}
           error={shownError("confirmPassword")}
+          reserveErrorLine
           success={isValid("confirmPassword")}
         />
       </div>

components/previews/motion/input.preview.tsx

@@ -23,6 +23,7 @@ export function InputPreview() {
         value={email}
         onChange={setEmail}
         error={emailError}
+        reserveErrorLine
       />
       <Input
         label="Password"

lib/registry.ts

@@ -206,7 +206,8 @@ export const registry: CategoryEntry[] = [
       {
         slug: "input",
         name: "Input",
-        description: "Text input with label, left/right icons, error shake and success check draw.",
+        description:
+          "Text input with label, left/right icons, optional stable error row, error shake and success check draw.",
         file: "components/motion/input.tsx",
         keywords: [
           "react animated input",

tests/input.test.tsx

@@ -62,4 +62,21 @@ describe("Input", () => {
 
     expect(onChange).toHaveBeenCalledWith("beUI");
   });
+
+  test("can reserve a stable validation message row", () => {
+    const { container, getByRole, rerender } = render(
+      <Input label="Email" reserveErrorLine />,
+    );
+    const root = container.firstElementChild;
+    const messageRow = root?.lastElementChild;
+
+    expect(messageRow?.classList).toContain("min-h-4");
+
+    rerender(
+      <Input label="Email" error="Enter a valid email address." reserveErrorLine />,
+    );
+
+    expect(root?.lastElementChild).toBe(messageRow);
+    expect(getByRole("alert").textContent).toBe("Enter a valid email address.");
+  });
 });