From 3e2a008e57188b0cfba8f54690c08033867bacde Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Thu, 5 Jun 2025 16:44:51 -0500
Subject: [PATCH] fix(core): checkbox issue with default value and required
 validation

---
 .changeset/cold-meals-sin.md                  | 29 +++++++++++++++++++
 .../product-detail/product-detail-form.tsx    | 10 ++++---
 2 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/cold-meals-sin.md

diff --git a/.changeset/cold-meals-sin.md b/.changeset/cold-meals-sin.md
new file mode 100644
index 0000000000..dd8e775417
--- /dev/null
+++ b/.changeset/cold-meals-sin.md
@@ -0,0 +1,29 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+- Fixes an issue with the checkbox not properly triggering the required validation.
+- Fixes an issue with the checkbox not setting the default value from the API.
+- Fixes an issue with the field value being incorrectly set as `undefined`
+
+## Migration
+
+Update the props to set a `checked` value and pasa an empty string when checked box is unselected.
+
+```
+case 'checkbox':
+    return (
+    <Checkbox
+        checked={controls.value === 'true'}
+        errors={formField.errors}
+        key={formField.id}
+        label={field.label}
+        name={formField.name}
+        onBlur={controls.blur}
+        onCheckedChange={(value) => handleChange(value ? 'true' : '')}
+        onFocus={controls.focus}
+        required={formField.required}
+        value={controls.value ?? ''}
+    />
+    );
+```
diff --git a/core/vibes/soul/sections/product-detail/product-detail-form.tsx b/core/vibes/soul/sections/product-detail/product-detail-form.tsx
index 16b10d3984..aae57263f8 100644
--- a/core/vibes/soul/sections/product-detail/product-detail-form.tsx
+++ b/core/vibes/soul/sections/product-detail/product-detail-form.tsx
@@ -224,10 +224,11 @@ function FormField({
   const handleChange = useCallback(
     (value: string) => {
       // Ensure that if page is reached without a full reload, we are still setting the selection properly based on query params.
-      const fieldValue = value || String(params[field.name]);
+      const fieldValue = value || params[field.name];
 
       void setParams({ [field.name]: fieldValue || null }); // Passing `null` to remove the value from the query params if fieldValue is falsey
-      controls.change(fieldValue);
+
+      controls.change(fieldValue ?? ''); // If fieldValue is falsey, we set it to an empty string
     },
     [setParams, field, controls, params],
   );
@@ -306,15 +307,16 @@ function FormField({
     case 'checkbox':
       return (
         <Checkbox
+          checked={controls.value === 'true'}
           errors={formField.errors}
           key={formField.id}
           label={field.label}
           name={formField.name}
           onBlur={controls.blur}
-          onCheckedChange={(value) => handleChange(String(value))}
+          onCheckedChange={(value) => handleChange(value ? 'true' : '')}
           onFocus={controls.focus}
           required={formField.required}
-          value={controls.value ?? 'false'}
+          value={controls.value ?? ''}
         />
       );