From 7cdd97329d04540cc584e57d7017fe1e3d6d55b6 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Sat, 15 Aug 2026 01:41:13 -0700
Subject: [PATCH] fix(ui): associate the Reset Budget label with its select
 control

antd Form.Item injects an id into its child so the rendered label can point
at the control. BudgetDurationDropdown destructured its props without
forwarding that id, so the label resolved to nothing and assistive tech
announced the field unnamed. Forward it to SelectTrigger.
---
 .../components/common_components/budget_duration_dropdown.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/common_components/budget_duration_dropdown.tsx b/ui/litellm-dashboard/src/components/common_components/budget_duration_dropdown.tsx
index e283f0550ec..3c38907c597 100644
--- a/ui/litellm-dashboard/src/components/common_components/budget_duration_dropdown.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/budget_duration_dropdown.tsx
@@ -12,6 +12,7 @@ const DURATION_LABELS: Record<string, string> = {
 };
 
 interface BudgetDurationDropdownProps {
+  id?: string;
   value?: string | null;
   onChange?: (value: string | undefined) => void;
   className?: string;
@@ -21,6 +22,7 @@ interface BudgetDurationDropdownProps {
 }
 
 const BudgetDurationDropdown: React.FC<BudgetDurationDropdownProps> = ({
+  id,
   value,
   onChange,
   className = "",
@@ -34,7 +36,7 @@ const BudgetDurationDropdown: React.FC<BudgetDurationDropdownProps> = ({
       value={value || null}
       onValueChange={(next: string | null) => onChange?.(next ?? undefined)}
     >
-      <SelectTrigger className={`w-full ${className}`} style={style}>
+      <SelectTrigger id={id} className={`w-full ${className}`} style={style}>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>