diff --git a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
index b50844c2d..29c074018 100644
--- a/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/CheckboxDemo.tsx
@@ -109,15 +109,35 @@ 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"
-      value={[]}
-      onValueChange={() => {}}
-    >
-      <Checkbox.Item value="email" label="Email" variant="error" />
-      <Checkbox.Item value="sms" label="SMS" variant="error" />
-    </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>
   );
 }