diff --git a/apps/web/app/(builder)/lib/store.ts b/apps/web/app/(builder)/lib/store.ts
index 640c1d4..fd0943c 100644
--- a/apps/web/app/(builder)/lib/store.ts
+++ b/apps/web/app/(builder)/lib/store.ts
@@ -110,7 +110,10 @@ function mergeUpdates<T extends object>(target: T, source: Partial<T>) {
       !Array.isArray(targetValue)
     ) {
       mergeUpdates(targetValue as object, sourceValue as object);
-    } else if (sourceValue !== undefined) {
+    } else if (sourceValue === undefined) {
+      // Explicitly cleared — remove the key so field defaults take effect
+      delete target[key];
+    } else {
       target[key] = sourceValue as T[keyof T];
     }
   }
diff --git a/apps/web/registry/base/fields/checkbox-group.tsx b/apps/web/registry/base/fields/checkbox-group.tsx
index 3948b4f..54f9b74 100644
--- a/apps/web/registry/base/fields/checkbox-group.tsx
+++ b/apps/web/registry/base/fields/checkbox-group.tsx
@@ -61,12 +61,12 @@ function getOptionGroupLayoutClassName({
   columns?: OptionGroupColumns;
 }) {
   const usesGridColumns = variant === "card" || direction === "horizontal";
-  const effectiveColumns = usesGridColumns ? columns : undefined;
+  // Default to 2 columns for horizontal direction so users see immediate feedback
+  const effectiveColumns = usesGridColumns
+    ? (columns ?? (direction === "horizontal" ? 2 : undefined))
+    : undefined;
 
   if (!effectiveColumns || effectiveColumns === 1) {
-    if (variant === "default" && direction === "horizontal") {
-      return "flex flex-wrap gap-x-4 gap-y-2";
-    }
     return "flex flex-col gap-2";
   }
 
diff --git a/apps/web/registry/base/fields/radio.tsx b/apps/web/registry/base/fields/radio.tsx
index 0b95ef5..2e87f39 100644
--- a/apps/web/registry/base/fields/radio.tsx
+++ b/apps/web/registry/base/fields/radio.tsx
@@ -54,12 +54,12 @@ function getOptionGroupLayoutClassName({
   columns?: OptionGroupColumns;
 }) {
   const usesGridColumns = variant === "card" || direction === "horizontal";
-  const effectiveColumns = usesGridColumns ? columns : undefined;
+  // Default to 2 columns for horizontal direction so users see immediate feedback
+  const effectiveColumns = usesGridColumns
+    ? (columns ?? (direction === "horizontal" ? 2 : undefined))
+    : undefined;
 
   if (!effectiveColumns || effectiveColumns === 1) {
-    if (variant === "default" && direction === "horizontal") {
-      return "flex flex-wrap gap-x-4 gap-y-2";
-    }
     return "flex flex-col gap-2";
   }