From 9cce76503a1e3bdcab310d5b8b606b562b387781 Mon Sep 17 00:00:00 2001
From: Elliot Hesp <elliot.hesp@gmail.com>
Date: Wed, 29 Oct 2025 15:04:15 +0000
Subject: [PATCH 1/2] fix(react,angular): forgot password link inline with the
 label

---
 .../src/lib/auth/forms/sign-in-auth-form.ts   |  2 +-
 .../angular/src/lib/components/form.spec.ts   | 40 ++++++++++++++++++-
 packages/angular/src/lib/components/form.ts   | 24 ++++++-----
 .../src/auth/forms/sign-in-auth-form.tsx      | 18 +++++----
 packages/react/src/components/form.test.tsx   | 30 ++++++++++++++
 packages/react/src/components/form.tsx        |  9 ++++-
 packages/styles/src/base.css                  | 10 +++--
 7 files changed, 109 insertions(+), 24 deletions(-)

diff --git a/packages/angular/src/lib/auth/forms/sign-in-auth-form.ts b/packages/angular/src/lib/auth/forms/sign-in-auth-form.ts
index 89bd9954..d91ad501 100644
--- a/packages/angular/src/lib/auth/forms/sign-in-auth-form.ts
+++ b/packages/angular/src/lib/auth/forms/sign-in-auth-form.ts
@@ -55,7 +55,7 @@ import {
       <fieldset>
         <fui-form-input name="password" tanstack-app-field [tanstackField]="form" label="{{ passwordLabel() }}">
           @if (forgotPassword) {
-            <button fui-form-action (click)="forgotPassword.emit()">
+            <button ngProjectAs="input-action" fui-form-action (click)="forgotPassword.emit()">
               {{ forgotPasswordLabel() }}
             </button>
           }
diff --git a/packages/angular/src/lib/components/form.spec.ts b/packages/angular/src/lib/components/form.spec.ts
index 3c1d60be..d7bf7fb2 100644
--- a/packages/angular/src/lib/components/form.spec.ts
+++ b/packages/angular/src/lib/components/form.spec.ts
@@ -16,8 +16,15 @@
 
 import { render, screen } from "@testing-library/angular";
 import { Component, signal } from "@angular/core";
-
-import { FormMetadataComponent, FormActionComponent, FormSubmitComponent, FormErrorMessageComponent } from "./form";
+import { injectForm, TanStackAppField } from "@tanstack/angular-form";
+
+import {
+  FormMetadataComponent,
+  FormActionComponent,
+  FormSubmitComponent,
+  FormErrorMessageComponent,
+  FormInputComponent,
+} from "./form";
 import { ButtonComponent } from "./button";
 
 @Component({
@@ -164,6 +171,35 @@ describe("Form Components", () => {
     });
   });
 
+  describe("<fui-form-input>", () => {
+    @Component({
+      template: `
+        <fui-form-input name="test" tanstack-app-field [tanstackField]="form" label="Test Label">
+          <button ngProjectAs="input-action" fui-form-action data-testid="test-action">Action</button>
+        </fui-form-input>
+      `,
+      standalone: true,
+      imports: [FormInputComponent, TanStackAppField, FormActionComponent],
+    })
+    class TestFormInputHostComponent {
+      form = injectForm({
+        defaultValues: {
+          test: "",
+        },
+      });
+    }
+
+    it("renders action content when provided", async () => {
+      await render(TestFormInputHostComponent, {
+        imports: [TestFormInputHostComponent],
+      });
+
+      const actionButton = screen.getByTestId("test-action");
+      expect(actionButton).toBeTruthy();
+      expect(actionButton).toHaveTextContent("Action");
+    });
+  });
+
   describe("<fui-form-error-message>", () => {
     it("renders error message when onSubmit error exists", async () => {
       await render(TestFormErrorMessageHostComponent);
diff --git a/packages/angular/src/lib/components/form.ts b/packages/angular/src/lib/components/form.ts
index 44b23b30..b68f2527 100644
--- a/packages/angular/src/lib/components/form.ts
+++ b/packages/angular/src/lib/components/form.ts
@@ -30,15 +30,21 @@ export class FormMetadataComponent {
   imports: [FormMetadataComponent],
   template: `
     <label [for]="field.api.name">
-      <span>{{ label() }}</span>
-      <input
-        [attr.aria-invalid]="field.api.state.meta.isTouched && field.api.state.meta.errors.length > 0"
-        [id]="field.api.name"
-        [name]="field.api.name"
-        [value]="field.api.state.value"
-        (blur)="field.api.handleBlur()"
-        (input)="field.api.handleChange($any($event).target.value)"
-      />
+      <div data-input-label>
+        <div>{{ label() }}</div>
+        <div><ng-content select="input-action" /></div>
+      </div>
+      <div data-input-group>
+        <ng-content select="input-before" />
+        <input
+          [attr.aria-invalid]="field.api.state.meta.isTouched && field.api.state.meta.errors.length > 0"
+          [id]="field.api.name"
+          [name]="field.api.name"
+          [value]="field.api.state.value"
+          (blur)="field.api.handleBlur()"
+          (input)="field.api.handleChange($any($event).target.value)"
+        />
+      </div>
       <ng-content></ng-content>
       <fui-form-metadata [field]="field.api"></fui-form-metadata>
     </label>
diff --git a/packages/react/src/auth/forms/sign-in-auth-form.tsx b/packages/react/src/auth/forms/sign-in-auth-form.tsx
index b592e88f..adad5441 100644
--- a/packages/react/src/auth/forms/sign-in-auth-form.tsx
+++ b/packages/react/src/auth/forms/sign-in-auth-form.tsx
@@ -95,13 +95,17 @@ export function SignInAuthForm({ onSignIn, onForgotPasswordClick, onRegisterClic
         <fieldset>
           <form.AppField name="password">
             {(field) => (
-              <field.Input label={getTranslation(ui, "labels", "password")} type="password">
-                {onForgotPasswordClick ? (
-                  <form.Action onClick={onForgotPasswordClick}>
-                    {getTranslation(ui, "labels", "forgotPassword")}
-                  </form.Action>
-                ) : null}
-              </field.Input>
+              <field.Input
+                label={getTranslation(ui, "labels", "password")}
+                type="password"
+                action={
+                  onForgotPasswordClick ? (
+                    <form.Action onClick={onForgotPasswordClick}>
+                      {getTranslation(ui, "labels", "forgotPassword")}
+                    </form.Action>
+                  ) : null
+                }
+              />
             )}
           </form.AppField>
         </fieldset>
diff --git a/packages/react/src/components/form.test.tsx b/packages/react/src/components/form.test.tsx
index 4a4a1f64..1568c34f 100644
--- a/packages/react/src/components/form.test.tsx
+++ b/packages/react/src/components/form.test.tsx
@@ -90,6 +90,36 @@ describe("form export", () => {
       expect(screen.getByTestId("test-child")).toBeInTheDocument();
     });
 
+    it("should render the Input action prop when provided", () => {
+      const { result } = renderHook(() => {
+        return form.useAppForm({
+          defaultValues: { foo: "bar" },
+        });
+      });
+
+      const hook = result.current;
+
+      render(
+        <hook.AppForm>
+          <hook.AppField name="foo">
+            {(field) => (
+              <field.Input
+                label="Foo"
+                action={
+                  <button type="button" data-testid="test-action">
+                    Action
+                  </button>
+                }
+              />
+            )}
+          </hook.AppField>
+        </hook.AppForm>
+      );
+
+      expect(screen.getByTestId("test-action")).toBeInTheDocument();
+      expect(screen.getByTestId("test-action")).toHaveTextContent("Action");
+    });
+
     it("should render the Input metadata when available", async () => {
       const { result } = renderHook(() => {
         return form.useAppForm({
diff --git a/packages/react/src/components/form.tsx b/packages/react/src/components/form.tsx
index 2cf57dd9..7b10e5d7 100644
--- a/packages/react/src/components/form.tsx
+++ b/packages/react/src/components/form.tsx
@@ -19,12 +19,17 @@ function FieldMetadata({ className, ...props }: ComponentProps<"div"> & { field:
   );
 }
 
-function Input(props: PropsWithChildren<ComponentProps<"input"> & { label: string; before?: ReactNode }>) {
+function Input(
+  props: PropsWithChildren<ComponentProps<"input"> & { label: string; before?: ReactNode; action?: ReactNode }>
+) {
   const field = useFieldContext<string>();
 
   return (
     <label htmlFor={field.name}>
-      <span>{props.label}</span>
+      <div data-input-label>
+        <div>{props.label}</div>
+        {props.action ? <div>{props.action}</div> : null}
+      </div>
       <div data-input-group>
         {props.before}
         <input
diff --git a/packages/styles/src/base.css b/packages/styles/src/base.css
index 18ad41a5..adb35424 100644
--- a/packages/styles/src/base.css
+++ b/packages/styles/src/base.css
@@ -113,8 +113,12 @@
     @apply flex flex-col gap-2 text-text;
   }
 
-  :where(.fui-form fieldset label span) {
-    @apply inline-flex gap-3 text-sm font-medium;
+  :where(.fui-form fieldset label div[data-input-label]) {
+    @apply flex gap-3 text-sm font-medium;
+  }
+
+  :where(.fui-form fieldset label div[data-input-label] > div:first-child) {
+    @apply grow;
   }
 
   :where(.fui-form .fui-form__action) {
@@ -122,7 +126,7 @@
   }
 
   :where(.fui-form fieldset label input) {
-    @apply w-full border-1 border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent;
+    @apply w-full border border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent;
   }
 
   :where(.fui-form fieldset label input[aria-invalid="true"]) {

From 7f19724f205efb173cf2c06a8fb351058d5f1121 Mon Sep 17 00:00:00 2001
From: Elliot Hesp <elliot.hesp@gmail.com>
Date: Thu, 30 Oct 2025 14:56:04 +0000
Subject: [PATCH 2/2] test(angular): Update test to pick password input

---
 packages/angular/src/lib/auth/forms/sign-in-auth-form.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/angular/src/lib/auth/forms/sign-in-auth-form.spec.ts b/packages/angular/src/lib/auth/forms/sign-in-auth-form.spec.ts
index 742cd66a..e8fa2573 100644
--- a/packages/angular/src/lib/auth/forms/sign-in-auth-form.spec.ts
+++ b/packages/angular/src/lib/auth/forms/sign-in-auth-form.spec.ts
@@ -74,7 +74,7 @@ describe("<fui-sign-in-auth-form />", () => {
     });
 
     expect(screen.getByLabelText("Email Address")).toBeInTheDocument();
-    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password", { selector: "input" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Sign In" })).toBeInTheDocument();
     expect(screen.getByText("By continuing, you agree to our")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Forgot Password" })).toBeInTheDocument();