From 94374beb6d70b5e6e4db6fdb9c4000332d8fb439 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng@berri.ai>
Date: Wed, 19 Aug 2026 16:24:12 -0700
Subject: [PATCH] fix(ui): toggle unlimited budget when its text is clicked
 (#37547)

The checkbox and its visible text both sat inside the max_budget
FormField label, which renders a single <label htmlFor> pointing at the
number input, so clicking the text focused Max Budget instead of ticking
the box. The checkbox only carried an aria-label, so it had no label of
its own to catch the click.

Wrap the checkbox and its text in their own <label>, the association the
antd checkbox wrapper used to provide. The accessible name now comes
from that label, so the aria-label is dropped rather than duplicated,
and the outer field label still points at the number input.
---
 .../users/_components/user_edit_view.test.tsx | 31 ++++++++++++++-----
 .../users/_components/user_edit_view.tsx      | 10 ++----
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.test.tsx
index f1a7f5e42d0..d06267ffed6 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.test.tsx
@@ -231,10 +231,25 @@ describe("UserEditView", () => {
     renderWithProviders(<UserEditView {...defaultProps} />);
 
     await waitFor(() => {
-      expect(screen.getByLabelText("Unlimited Budget")).toBeInTheDocument();
+      expect(screen.getByRole("checkbox", { name: "Unlimited Budget" })).toBeInTheDocument();
     });
   });
 
+  it("should check unlimited budget when clicking its visible text", async () => {
+    renderWithProviders(<UserEditView {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("spinbutton", { name: /max budget/i })).toBeEnabled();
+    });
+
+    await userEvent.click(screen.getByText("Unlimited Budget"));
+
+    await waitFor(() => {
+      expect(screen.getByRole("checkbox", { name: "Unlimited Budget" })).toBeChecked();
+    });
+    expect(screen.getByRole("spinbutton", { name: /max budget/i })).toBeDisabled();
+  });
+
   it("should set unlimited budget checkbox when max_budget is null", async () => {
     const userDataWithNullBudget = {
       ...MOCK_USER_DATA,
@@ -247,7 +262,7 @@ describe("UserEditView", () => {
     renderWithProviders(<UserEditView {...defaultProps} userData={userDataWithNullBudget} />);
 
     await waitFor(() => {
-      const checkbox = screen.getByLabelText("Unlimited Budget");
+      const checkbox = screen.getByRole("checkbox", { name: "Unlimited Budget" });
       expect(checkbox).toBeChecked();
     });
   });
@@ -282,10 +297,10 @@ describe("UserEditView", () => {
     renderWithProviders(<UserEditView {...defaultProps} />);
 
     await waitFor(() => {
-      expect(screen.getByLabelText("Unlimited Budget")).toBeInTheDocument();
+      expect(screen.getByRole("checkbox", { name: "Unlimited Budget" })).toBeInTheDocument();
     });
 
-    const checkbox = screen.getByLabelText("Unlimited Budget");
+    const checkbox = screen.getByRole("checkbox", { name: "Unlimited Budget" });
     await userEvent.click(checkbox);
 
     await waitFor(() => {
@@ -400,7 +415,7 @@ describe("UserEditView", () => {
     const budgetInput = screen.getByRole("spinbutton", { name: /max budget/i });
     await userEvent.clear(budgetInput);
 
-    const checkbox = screen.getByLabelText("Unlimited Budget");
+    const checkbox = screen.getByRole("checkbox", { name: "Unlimited Budget" });
     expect(checkbox).not.toBeChecked();
 
     const submitButton = screen.getByRole("button", { name: /save changes/i });
@@ -416,10 +431,10 @@ describe("UserEditView", () => {
     renderWithProviders(<UserEditView {...defaultProps} onSubmit={onSubmitMock} />);
 
     await waitFor(() => {
-      expect(screen.getByLabelText("Unlimited Budget")).toBeInTheDocument();
+      expect(screen.getByRole("checkbox", { name: "Unlimited Budget" })).toBeInTheDocument();
     });
 
-    const checkbox = screen.getByLabelText("Unlimited Budget");
+    const checkbox = screen.getByRole("checkbox", { name: "Unlimited Budget" });
     await userEvent.click(checkbox);
 
     await waitFor(() => {
@@ -494,7 +509,7 @@ describe("UserEditView", () => {
     renderWithProviders(<UserEditView {...defaultProps} userData={userDataWithUndefinedBudget} />);
 
     await waitFor(() => {
-      const checkbox = screen.getByLabelText("Unlimited Budget");
+      const checkbox = screen.getByRole("checkbox", { name: "Unlimited Budget" });
       expect(checkbox).toBeChecked();
     });
   });
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.tsx b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.tsx
index 0aebdf69575..5612f5cd5f6 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/user_edit_view.tsx
@@ -256,14 +256,10 @@ export function UserEditView({
             label={
               <>
                 Max Budget (USD)
-                <span className="ml-3 inline-flex items-center gap-2 font-normal">
-                  <Checkbox
-                    aria-label="Unlimited Budget"
-                    checked={unlimitedBudget}
-                    onCheckedChange={handleUnlimitedBudgetChange}
-                  />
+                <label className="ml-3 inline-flex items-center gap-2 font-normal">
+                  <Checkbox checked={unlimitedBudget} onCheckedChange={handleUnlimitedBudgetChange} />
                   Unlimited Budget
-                </span>
+                </label>
               </>
             }
           >