diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx
index ec3be663a6295..19a23c96507aa 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx
@@ -22,13 +22,13 @@ import { Switch } from "../ui";
 export const isFieldBool = (fieldType: string) => fieldType === "boolean";
 
 export const FlexibleFormFieldBool = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Switch
     colorPalette="blue"
     defaultChecked={param.value as boolean}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
   />
 );
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx
index 6b9d22b27a814..775608ae452f6 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx
@@ -24,13 +24,13 @@ export const isFieldDate = (fieldType: string, fieldFormat: string | null) =>
   fieldType === "string" && fieldFormat === "date";
 
 export const FlexibleFormFieldDate = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder="yyyy-mm-dd"
     size="sm"
     type="date"
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx
index 0c6d0f1ebb9ec..36841f5ff9326 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx
@@ -26,13 +26,13 @@ export const isFieldDateTime = (
 ) => fieldType === "string" && fieldFormat === "date-time";
 
 export const FlexibleFormFieldDateTime = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder="yyyy-mm-ddThh:mm"
     size="sm"
     type="datetime-local"
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx
index d097132a8769f..4dd6f9ab9cbe7 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx
@@ -43,7 +43,7 @@ const labelLookup = (
 };
 
 export const FlexibleFormFieldDropdown = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => {
   const selectOptions = createListCollection({
@@ -59,8 +59,8 @@ export const FlexibleFormFieldDropdown = ({
     <Select.Root
       collection={selectOptions}
       defaultValue={[param.value as string]}
-      id={`element_${key}`}
-      name={`element_${key}`}
+      id={`element_${name}`}
+      name={`element_${name}`}
       size="sm"
     >
       <Select.Trigger>
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldString.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldString.tsx
index 84c116b91a627..e39d65cb6fcc4 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldString.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldString.tsx
@@ -21,13 +21,13 @@ import { Input } from "@chakra-ui/react";
 import type { FlexibleFormElementProps } from ".";
 
 export const FlexibleFormFieldString = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder={JSON.stringify(param.value)}
     size="sm"
   />
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx
index f32c3bcd77e2b..981c3af84185c 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx
@@ -24,13 +24,13 @@ export const isFieldTime = (fieldType: string, fieldFormat: string | null) =>
   fieldType === "string" && fieldFormat === "date";
 
 export const FlexibleFormFieldTime = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder="hh:mm"
     size="sm"
     type="time"
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx
index 19f6276f8a9a5..801d9cb9abd09 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx
@@ -26,13 +26,13 @@ export const isHidden = (param: ParamSpec) => Boolean(param.schema.const);
 
 /** Render a "const" field where user can not change data as hidden */
 export const FlexibleFormHidden = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <VisuallyHidden asChild>
     <input
-      id={`element_${key}`}
-      name={`element_${key}`}
+      id={`element_${name}`}
+      name={`element_${name}`}
       type="hidden"
       value={param.value as string}
     />
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx
index ce315f74cb1a2..d58ef282d5fad 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx
@@ -63,21 +63,22 @@ const inferType = (param: ParamSpec) => {
 
 export const FlexibleFormSelectElement = ({
   key,
+  name,
   param,
 }: FlexibleFormElementProps) => {
   // FUTURE: Add support for other types as described in AIP-68 via Plugins
   const fieldType = inferType(param);
 
   if (isFieldBool(fieldType)) {
-    return <FlexibleFormFieldBool key={key} param={param} />;
+    return <FlexibleFormFieldBool key={key} name={name} param={param} />;
   } else if (isFieldDateTime(fieldType, param.schema.format)) {
-    return <FlexibleFormFieldDateTime key={key} param={param} />;
+    return <FlexibleFormFieldDateTime key={key} name={name} param={param} />;
   } else if (isFieldDate(fieldType, param.schema.format)) {
-    return <FlexibleFormFieldDate key={key} param={param} />;
+    return <FlexibleFormFieldDate key={key} name={name} param={param} />;
   } else if (isFieldTime(fieldType, param.schema.format)) {
-    return <FlexibleFormFieldTime key={key} param={param} />;
+    return <FlexibleFormFieldTime key={key} name={name} param={param} />;
   } else if (isFieldDropdown(fieldType, param.schema.enum)) {
-    return <FlexibleFormFieldDropdown key={key} param={param} />;
+    return <FlexibleFormFieldDropdown key={key} name={name} param={param} />;
   } else {
     // TODO other elements like number, integer, select etc.
     // Missing:
@@ -88,23 +89,24 @@ export const FlexibleFormSelectElement = ({
     // - Number (Into or generic number input)
     // - Multiline Text
     // see airflow/www/templates/airflow/trigger.html for logic in Airflow 2
-    return <FlexibleFormFieldString key={key} param={param} />;
+    return <FlexibleFormFieldString key={key} name={name} param={param} />;
   }
 };
 
 /** Render a normal form row with a field that is auto-selected */
 export const FlexibleFormNormalRow = ({
   key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Field.Root orientation="horizontal" required={isRequired(param)}>
     <Stack css={{ "flex-basis": "30%" }}>
       <Field.Label css={{ "flex-basis": "0" }} fontSize="md">
-        {param.schema.title ?? key} <Field.RequiredIndicator />
+        {param.schema.title ?? name} <Field.RequiredIndicator />
       </Field.Label>
     </Stack>
     <Stack css={{ "flex-basis": "70%" }}>
-      <FlexibleFormSelectElement key={key} param={param} />
+      <FlexibleFormSelectElement key={key} name={name} param={param} />
       <Field.HelperText>
         {param.description ?? (
           <Markdown>{param.schema.description_md}</Markdown>
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx
index aae302dfc58e3..9ba4a5f6480cd 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx
@@ -21,9 +21,13 @@ import { FlexibleFormHidden, isHidden } from "./FlexibleFormHidden";
 import { FlexibleFormNormalRow } from "./FlexibleFormNormalRow";
 
 /** Generates a form row */
-export const FlexibleFormRow = ({ key, param }: FlexibleFormElementProps) =>
+export const FlexibleFormRow = ({
+  key,
+  name,
+  param,
+}: FlexibleFormElementProps) =>
   isHidden(param) ? (
-    <FlexibleFormHidden key={key} param={param} />
+    <FlexibleFormHidden key={key} name={name} param={param} />
   ) : (
-    <FlexibleFormNormalRow key={key} param={param} />
+    <FlexibleFormNormalRow key={key} name={name} param={param} />
   );
diff --git a/airflow/ui/src/components/FlexibleForm/index.tsx b/airflow/ui/src/components/FlexibleForm/index.tsx
index aaa051f8c4b56..907d174bb87b5 100644
--- a/airflow/ui/src/components/FlexibleForm/index.tsx
+++ b/airflow/ui/src/components/FlexibleForm/index.tsx
@@ -28,6 +28,7 @@ type FlexibleFormProps = {
 
 export type FlexibleFormElementProps = {
   readonly key: string;
+  readonly name: string;
   readonly param: ParamSpec;
 };
 
@@ -35,7 +36,7 @@ const FlexibleForm = ({ params }: FlexibleFormProps) => (
   // TODO: Support multiple sections - at the moment all is rendered flat
   <Stack separator={<StackSeparator />}>
     {Object.entries(params).map(([name, param]) => (
-      <FlexibleFormRow key={name} param={param} />
+      <FlexibleFormRow key={name} name={name} param={param} />
     ))}
   </Stack>
 );