From ebcc24d78ee9af4db564fa34b8527a608c2a7027 Mon Sep 17 00:00:00 2001
From: Pranav Kataria <pranavkatariain@gmail.com>
Date: Wed, 26 Aug 2026 20:30:20 +1000
Subject: [PATCH 1/4] Fix checkbox group error demo state

---
 .../kumo-docs-astro/src/components/demos/CheckboxDemo.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
index b50844c2d6..5f3f480de6 100644
--- a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
@@ -109,12 +109,14 @@ export function CheckboxLegendCustomDemo() {
 }
 
 export function CheckboxGroupErrorDemo() {
+  const [preferences, setPreferences] = useState<string[]>([]);
+
   return (
     <Checkbox.Group
       legend="Required preferences"
       error="Please select at least one notification method"
-      value={[]}
-      onValueChange={() => {}}
+      value={preferences}
+      onValueChange={setPreferences}
     >
       <Checkbox.Item value="email" label="Email" variant="error" />
       <Checkbox.Item value="sms" label="SMS" variant="error" />

From a27a25d7b6f9dc197a304833087d5970d6fc52fb Mon Sep 17 00:00:00 2001
From: Pranav Kataria <pranavkatariain@gmail.com>
Date: Wed, 26 Aug 2026 21:38:40 +1000
Subject: [PATCH 2/4] Clear checkbox group error after selection

---
 .../src/components/demos/CheckboxDemo.tsx       | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
index 5f3f480de6..f8f342752a 100644
--- a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
@@ -110,16 +110,27 @@ export function CheckboxLegendCustomDemo() {
 
 export function CheckboxGroupErrorDemo() {
   const [preferences, setPreferences] = useState<string[]>([]);
+  const hasError = preferences.length === 0;
 
   return (
     <Checkbox.Group
       legend="Required preferences"
-      error="Please select at least one notification method"
+      error={
+        hasError ? "Please select at least one notification method" : undefined
+      }
       value={preferences}
       onValueChange={setPreferences}
     >
-      <Checkbox.Item value="email" label="Email" variant="error" />
-      <Checkbox.Item value="sms" label="SMS" variant="error" />
+      <Checkbox.Item
+        value="email"
+        label="Email"
+        variant={hasError ? "error" : undefined}
+      />
+      <Checkbox.Item
+        value="sms"
+        label="SMS"
+        variant={hasError ? "error" : undefined}
+      />
     </Checkbox.Group>
   );
 }

From 36acacb55d439f256bdc3de39f28b54b38d80e9c Mon Sep 17 00:00:00 2001
From: Pranav Kataria <pranavkatariain@gmail.com>
Date: Wed, 26 Aug 2026 21:50:12 +1000
Subject: [PATCH 3/4] Keep checkbox validation layout stable

---
 packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
index f8f342752a..8bda5c5c21 100644
--- a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
@@ -118,6 +118,9 @@ export function CheckboxGroupErrorDemo() {
       error={
         hasError ? "Please select at least one notification method" : undefined
       }
+      description={
+        hasError ? undefined : "At least one notification method selected"
+      }
       value={preferences}
       onValueChange={setPreferences}
     >

From 88964567d00ac66f229f1459c43013fb067f2f9f Mon Sep 17 00:00:00 2001
From: Pranav Kataria <pranavkatariain@gmail.com>
Date: Wed, 26 Aug 2026 21:59:28 +1000
Subject: [PATCH 4/4] Stabilize checkbox group demo width

---
 .../src/components/demos/CheckboxDemo.tsx     | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
index 8bda5c5c21..29c0740185 100644
--- a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
@@ -113,27 +113,31 @@ export function CheckboxGroupErrorDemo() {
   const hasError = preferences.length === 0;
 
   return (
-    <Checkbox.Group
-      legend="Required preferences"
-      error={
-        hasError ? "Please select at least one notification method" : undefined
-      }
-      description={
-        hasError ? undefined : "At least one notification method selected"
-      }
-      value={preferences}
-      onValueChange={setPreferences}
-    >
-      <Checkbox.Item
-        value="email"
-        label="Email"
-        variant={hasError ? "error" : undefined}
-      />
-      <Checkbox.Item
-        value="sms"
-        label="SMS"
-        variant={hasError ? "error" : undefined}
-      />
-    </Checkbox.Group>
+    <div className="w-full max-w-xs">
+      <Checkbox.Group
+        legend="Required preferences"
+        error={
+          hasError
+            ? "Please select at least one notification method"
+            : undefined
+        }
+        description={
+          hasError ? undefined : "At least one notification method selected"
+        }
+        value={preferences}
+        onValueChange={setPreferences}
+      >
+        <Checkbox.Item
+          value="email"
+          label="Email"
+          variant={hasError ? "error" : undefined}
+        />
+        <Checkbox.Item
+          value="sms"
+          label="SMS"
+          variant={hasError ? "error" : undefined}
+        />
+      </Checkbox.Group>
+    </div>
   );
 }