[field controls] Respect validationMode

packages/react/src/checkbox-group/CheckboxGroup.tsx

@@ -7,6 +7,7 @@ import { CheckboxGroupContext } from './CheckboxGroupContext';
 import type { FieldRoot } from '../field/root/FieldRoot';
 import { useFieldRootContext } from '../field/root/FieldRootContext';
 import type { BaseUIComponentProps } from '../utils/types';
+import { fieldValidityMapping } from '../field/utils/constants';
 
 /**
  * Provides a shared state to a series of checkboxes.
@@ -54,6 +55,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(
     state,
     ref: forwardedRef,
     extraProps: otherProps,
+    customStyleHookMapping: fieldValidityMapping,
   });
 
   const contextValue: CheckboxGroupContext = React.useMemo(
@@ -82,6 +84,7 @@ namespace CheckboxGroup {
      */
     disabled: boolean;
   }
+
   export interface Props extends BaseUIComponentProps<'div', State> {
     /**
      * Names of the checkboxes in the group that should be ticked.

packages/react/src/checkbox/indicator/CheckboxIndicator.tsx

@@ -11,6 +11,7 @@ import { type TransitionStatus, useTransitionStatus } from '../../utils/useTrans
 import { useForkRef } from '../../utils/useForkRef';
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import { fieldValidityMapping } from '../../field/utils/constants';
 
 /**
  * Indicates whether the checkbox is ticked.
@@ -55,6 +56,7 @@ const CheckboxIndicator = React.forwardRef(function CheckboxIndicator(
     () => ({
       ...baseStyleHookMapping,
       ...transitionStatusMapping,
+      ...fieldValidityMapping,
     }),
     [baseStyleHookMapping],
   );

packages/react/src/checkbox/root/useCheckboxRoot.ts

@@ -40,8 +40,16 @@ export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckbox
     state: 'checked',
   });
 
-  const { labelId, setControlId, setTouched, setDirty, validityData, setFilled, setFocused } =
-    useFieldRootContext();
+  const {
+    labelId,
+    setControlId,
+    setTouched,
+    setDirty,
+    validityData,
+    setFilled,
+    setFocused,
+    validationMode,
+  } = useFieldRootContext();
 
   const buttonRef = React.useRef<HTMLButtonElement>(null);
 
@@ -103,7 +111,10 @@ export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckbox
 
           setTouched(true);
           setFocused(false);
-          commitValidation(element.checked);
+
+          if (validationMode === 'onBlur') {
+            commitValidation(groupContext ? groupValue : element.checked);
+          }
         },
         onClick(event) {
           if (event.defaultPrevented || readOnly) {
@@ -125,7 +136,10 @@ export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckbox
       labelId,
       setFocused,
       setTouched,
+      validationMode,
       commitValidation,
+      groupContext,
+      groupValue,
     ],
   );
 
@@ -153,20 +167,29 @@ export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckbox
 
           const nextChecked = event.target.checked;
 
-          if (!groupContext) {
-            setFilled(nextChecked);
-          }
-
           setDirty(nextChecked !== validityData.initialValue);
           setCheckedState(nextChecked);
           onCheckedChange?.(nextChecked, event.nativeEvent);
 
+          if (!groupContext) {
+            setFilled(nextChecked);
+
+            if (validationMode === 'onChange') {
+              commitValidation(nextChecked);
+            }
+          }
+
           if (name && groupValue && setGroupValue) {
             const nextGroupValue = nextChecked
               ? [...groupValue, name]
               : groupValue.filter((item) => item !== name);
+
             setGroupValue(nextGroupValue, event.nativeEvent);
             setFilled(nextGroupValue.length > 0);
+
+            if (validationMode === 'onChange') {
+              commitValidation(nextGroupValue);
+            }
           }
         },
       }),
@@ -184,8 +207,10 @@ export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckbox
       validityData.initialValue,
       setCheckedState,
       onCheckedChange,
+      validationMode,
       groupValue,
       setGroupValue,
+      commitValidation,
       setFilled,
     ],
   );

packages/react/src/field/control/FieldControl.tsx

@@ -5,7 +5,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useFieldControl } from './useFieldControl';
 import { FieldRoot } from '../root/FieldRoot';
 import { useFieldRootContext } from '../root/FieldRootContext';
-import { STYLE_HOOK_MAPPING } from '../utils/constants';
+import { fieldValidityMapping } from '../utils/constants';
 import { BaseUIComponentProps } from '../../utils/types';
 
 /**
@@ -60,7 +60,7 @@ const FieldControl = React.forwardRef(function FieldControl(
     className,
     state,
     extraProps: otherProps,
-    customStyleHookMapping: STYLE_HOOK_MAPPING,
+    customStyleHookMapping: fieldValidityMapping,
   });
 
   return renderElement();

packages/react/src/field/control/useFieldControl.ts

@@ -13,8 +13,16 @@ import { useEventCallback } from '../../utils/useEventCallback';
 export function useFieldControl(params: useFieldControl.Parameters) {
   const { id: idProp, name, value: valueProp, defaultValue, onValueChange, disabled } = params;
 
-  const { setControlId, labelId, setTouched, setDirty, validityData, setFocused, setFilled } =
-    useFieldRootContext();
+  const {
+    setControlId,
+    labelId,
+    setTouched,
+    setDirty,
+    validityData,
+    setFocused,
+    setFilled,
+    validationMode,
+  } = useFieldRootContext();
 
   const { errors, onClearErrors } = useFormContext();
 
@@ -87,7 +95,10 @@ export function useFieldControl(params: useFieldControl.Parameters) {
         onBlur(event) {
           setTouched(true);
           setFocused(false);
-          commitValidation(event.currentTarget.value);
+
+          if (validationMode === 'onBlur') {
+            commitValidation(event.currentTarget.value);
+          }
         },
         onKeyDown(event) {
           if (event.currentTarget.tagName === 'INPUT' && event.key === 'Enter') {
@@ -113,6 +124,7 @@ export function useFieldControl(params: useFieldControl.Parameters) {
       onClearErrors,
       setFocused,
       setTouched,
+      validationMode,
       commitValidation,
     ],
   );

packages/react/src/field/description/FieldDescription.tsx

@@ -5,7 +5,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { FieldRoot } from '../root/FieldRoot';
 import { useFieldRootContext } from '../root/FieldRootContext';
 import { useFieldDescription } from './useFieldDescription';
-import { STYLE_HOOK_MAPPING } from '../utils/constants';
+import { fieldValidityMapping } from '../utils/constants';
 import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
@@ -31,7 +31,7 @@ const FieldDescription = React.forwardRef(function FieldDescription(
     className,
     state,
     extraProps: otherProps,
-    customStyleHookMapping: STYLE_HOOK_MAPPING,
+    customStyleHookMapping: fieldValidityMapping,
   });
 
   return renderElement();

packages/react/src/field/error/FieldError.tsx

@@ -5,7 +5,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { FieldRoot } from '../root/FieldRoot';
 import { useFieldRootContext } from '../root/FieldRootContext';
 import { useFieldError } from './useFieldError';
-import { STYLE_HOOK_MAPPING } from '../utils/constants';
+import { fieldValidityMapping } from '../utils/constants';
 import { useFormContext } from '../../form/FormContext';
 import type { BaseUIComponentProps } from '../../utils/types';
 
@@ -45,7 +45,7 @@ const FieldError = React.forwardRef(function FieldError(
     className,
     state,
     extraProps: otherProps,
-    customStyleHookMapping: STYLE_HOOK_MAPPING,
+    customStyleHookMapping: fieldValidityMapping,
   });
 
   if (!rendered) {

packages/react/src/field/label/FieldLabel.tsx

@@ -5,7 +5,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { FieldRoot } from '../root/FieldRoot';
 import { useFieldRootContext } from '../root/FieldRootContext';
 import { useFieldLabel } from './useFieldLabel';
-import { STYLE_HOOK_MAPPING } from '../utils/constants';
+import { fieldValidityMapping } from '../utils/constants';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import type { BaseUIComponentProps } from '../../utils/types';
@@ -42,7 +42,7 @@ const FieldLabel = React.forwardRef(function FieldLabel(
     className,
     state,
     extraProps: otherProps,
-    customStyleHookMapping: STYLE_HOOK_MAPPING,
+    customStyleHookMapping: fieldValidityMapping,
   });
 
   return renderElement();