fix create collection dialog UI

Signed-off-by: ryjiang <[email protected]>
zilliztech · Dec 26, 2024 · 545661a · 545661a
1 parent 1cfb9dd
commit 545661a
Showing 1 changed file with 56 additions and 45 deletions.
diff --git a/client/src/pages/dialogs/create/CreateFields.tsx b/client/src/pages/dialogs/create/CreateFields.tsx
@@ -497,45 +497,53 @@ const CreateFields: FC<CreateFieldsProps> = ({
       field.nullable;
     return (
       <div className={classes.setting}>
-        <Checkbox
-          checked={!!field.is_partition_key}
-          size="small"
-          disabled={disabled}
-          onChange={() => {
-            changeFields(field.id!, {
-              is_partition_key: !field.is_partition_key,
-            });
-          }}
-        />
-        <CustomToolTip
-          title={collectionTrans(disabled ? 'paritionKeyDisabledTooltip' :'partitionKeyTooltip')}
-          placement="top"
-        >
-          <>{collectionTrans('partitionKey')}</>
-        </CustomToolTip>
+        <label htmlFor="partitionKey">
+          <Checkbox
+            id="partitionKey"
+            checked={!!field.is_partition_key}
+            size="small"
+            disabled={disabled}
+            onChange={() => {
+              changeFields(field.id!, {
+                is_partition_key: !field.is_partition_key,
+              });
+            }}
+          />
+          <CustomToolTip
+            title={collectionTrans(
+              disabled ? 'paritionKeyDisabledTooltip' : 'partitionKeyTooltip'
+            )}
+            placement="top"
+          >
+            <>{collectionTrans('partitionKey')}</>
+          </CustomToolTip>
+        </label>
       </div>
     );
   };
 
   const generateNullableCheckbox = (field: FieldType, fields: FieldType[]) => {
     return (
       <div className={classes.setting}>
-        <Checkbox
-          checked={!!field.nullable}
-          size="small"
-          onChange={() => {
-            changeFields(field.id!, {
-              nullable: !field.nullable,
-              is_partition_key: false,
-            });
-          }}
-        />
-        <CustomToolTip
-          title={collectionTrans('nullableTooltip')}
-          placement="top"
-        >
-          <>{collectionTrans('nullable')}</>
-        </CustomToolTip>
+        <label htmlFor="nullable">
+          <Checkbox
+            id="nullable"
+            checked={!!field.nullable}
+            size="small"
+            onChange={() => {
+              changeFields(field.id!, {
+                nullable: !field.nullable,
+                is_partition_key: false,
+              });
+            }}
+          />
+          <CustomToolTip
+            title={collectionTrans('nullableTooltip')}
+            placement="top"
+          >
+            <>{collectionTrans('nullable')}</>
+          </CustomToolTip>
+        </label>
       </div>
     );
   };
@@ -550,19 +558,22 @@ const CreateFields: FC<CreateFieldsProps> = ({
     }
     return (
       <div className={classes.setting}>
-        <Checkbox
-          checked={!!field.enable_match}
-          size="small"
-          onChange={() => {
-            changeFields(field.id!, update);
-          }}
-        />
-        <CustomToolTip
-          title={collectionTrans('textMatchTooltip')}
-          placement="top"
-        >
-          <>{collectionTrans('enableMatch')}</>
-        </CustomToolTip>
+        <label htmlFor="enableMatch">
+          <Checkbox
+            id="enableMatch"
+            checked={!!field.enable_match}
+            size="small"
+            onChange={() => {
+              changeFields(field.id!, update);
+            }}
+          />
+          <CustomToolTip
+            title={collectionTrans('textMatchTooltip')}
+            placement="top"
+          >
+            <>{collectionTrans('enableMatch')}</>
+          </CustomToolTip>
+        </label>
       </div>
     );
   };