fix: make radios and checkboxes actually clickable

web/src/app/admin/settings/SettingsForm.tsx

@@ -36,7 +36,9 @@ export function Checkbox({
         className="mr-2 w-3.5 h-3.5 my-auto"
       />
       <div>
-        <Label small>{label}</Label>
+        <span className="block font-medium text-text-700 dark:text-neutral-100 text-sm">
+          {label}
+        </span>
         {sublabel && <SubLabel>{sublabel}</SubLabel>}
       </div>
     </label>

web/src/components/Field.tsx

@@ -58,13 +58,16 @@ export function Label({
   children,
   small,
   className,
+  htmlFor,
 }: {
   children: string | JSX.Element;
   small?: boolean;
   className?: string;
+  htmlFor?: string;
 }) {
   return (
     <label
+      {...(htmlFor ? { htmlFor } : {})}
       className={`block font-medium text-text-700 dark:text-neutral-100 ${className} ${
         small ? "text-sm" : "text-base"
       }`}
@@ -96,21 +99,21 @@ export function SubLabel({ children }: { children: string | JSX.Element }) {
   // If children is a string, use RichTextSubtext to parse and render links
   if (typeof children === "string") {
     return (
-      <div className="text-sm text-neutral-600 dark:text-neutral-300 mb-2">
+      <span className="block text-sm text-neutral-600 dark:text-neutral-300 mb-2">
         <RichTextSubtext
           text={children}
           className={hasNewlines ? "whitespace-pre-wrap" : ""}
         />
-      </div>
+      </span>
     );
   }
 
   return (
-    <div
-      className={`text-sm text-neutral-600 dark:text-neutral-300 mb-2 ${hasNewlines ? "whitespace-pre-wrap" : ""}`}
+    <span
+      className={`block text-sm text-neutral-600 dark:text-neutral-300 mb-2 ${hasNewlines ? "whitespace-pre-wrap" : ""}`}
     >
       {children}
-    </div>
+    </span>
   );
 }
 
@@ -705,14 +708,18 @@ export const BooleanFormField = ({
     [disabled, name, setFieldValue, onChange]
   );
 
+  // Generate a stable, valid id from the field name for label association
+  const checkboxId = `checkbox-${name.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+
   return (
     <div>
-      <label className="flex items-center text-sm cursor-pointer">
+      <div className="flex items-center text-sm">
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <CheckboxField
                 name={name}
+                id={checkboxId}
                 size="sm"
                 className={`
                   ${disabled ? "opacity-50" : ""}
@@ -732,16 +739,21 @@ export const BooleanFormField = ({
         {!noLabel && (
           <div>
             <div className="flex items-center gap-x-2">
-              <Label small={small}>{`${label}${
-                optional ? " (Optional)" : ""
-              }`}</Label>
+              <Label
+                htmlFor={checkboxId}
+                small={small}
+                className="cursor-pointer"
+              >{`${label}${optional ? " (Optional)" : ""}`}</Label>
               {tooltip && <ToolTipDetails>{tooltip}</ToolTipDetails>}
             </div>
-
-            {subtext && <SubLabel>{subtext}</SubLabel>}
+            {subtext && (
+              <label htmlFor={checkboxId} className="cursor-pointer">
+                <SubLabel>{subtext}</SubLabel>
+              </label>
+            )}
           </div>
         )}
-      </label>
+      </div>
 
       <ErrorMessage
         name={name}

web/src/components/credentials/CredentialFields.tsx

@@ -164,7 +164,13 @@ export const AdminBooleanFormField = ({
         />
         {!noLabel && (
           <div>
-            <Label small={small}>{label}</Label>
+            <span
+              className={`block font-medium text-text-700 dark:text-neutral-100 ${
+                small ? "text-sm" : "text-base"
+              } cursor-pointer`}
+            >
+              {label}
+            </span>
             {subtext && <SubLabel>{subtext}</SubLabel>}
           </div>
         )}

web/src/components/ui/CheckField.tsx

@@ -42,8 +42,9 @@ export const CheckFormField: React.FC<CheckFieldProps> = ({
 
   const handleClick = (e: React.MouseEvent<HTMLLabelElement>) => {
     e.preventDefault();
-    helpers.setValue(!field.value);
-    onChange?.(field.value);
+    const next = !field.value;
+    helpers.setValue(next);
+    onChange?.(next);
   };
 
   const checkboxContent = (

web/tests/e2e/assistants/create_and_edit_assistant.spec.ts

@@ -13,9 +13,7 @@ const getAdvancedOptionsButton = (page: Page) =>
 const getReminderTextarea = (page: Page) =>
   page.locator('textarea[name="task_prompt"]');
 const getDateTimeAwareCheckbox = (page: Page) =>
-  page
-    .locator('label:has-text("Date and Time Aware")')
-    .locator('button[role="checkbox"]');
+  page.getByRole("checkbox", { name: /Date and Time Aware/i });
 const getKnowledgeCutoffInput = (page: Page) =>
   page.locator('input[name="search_start_date"]');
 const getKnowledgeToggle = (page: Page) =>
@@ -25,13 +23,9 @@ const getKnowledgeToggle = (page: Page) =>
 const getNumChunksInput = (page: Page) =>
   page.locator('input[name="num_chunks"]');
 const getAiRelevanceCheckbox = (page: Page) =>
-  page
-    .locator('label:has-text("AI Relevance Filter")')
-    .locator('button[role="checkbox"]');
+  page.getByRole("checkbox", { name: /AI Relevance Filter/i });
 const getCitationsCheckbox = (page: Page) =>
-  page
-    .locator('label:has-text("Citations")')
-    .locator('button[role="checkbox"]');
+  page.getByRole("checkbox", { name: /Citations/i });
 const getStarterMessageInput = (page: Page, index: number = 0) =>
   page.locator(`input[name="starter_messages.${index}.message"]`);
 const getCreateSubmitButton = (page: Page) =>