From ce4913e258331ccf96b367695447689752330b31 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 13 Oct 2023 20:53:52 -0700
Subject: [PATCH 01/38] checkbox

---
 .../@react-aria/checkbox/src/useCheckbox.ts   |   9 +-
 .../checkbox/src/useCheckboxGroup.ts          |  28 +-
 .../checkbox/src/useCheckboxGroupItem.ts      |  36 +-
 packages/@react-aria/checkbox/src/utils.ts    |  11 +-
 packages/@react-aria/toggle/src/useToggle.ts  |  19 +-
 packages/@react-aria/utils/src/index.ts       |   1 +
 .../@react-aria/utils/src/useEffectEvent.ts   |   9 +-
 .../utils/src/useFormValidation.ts            | 272 +++++++++++
 .../@react-spectrum/checkbox/src/Checkbox.tsx |   8 +-
 .../checkbox/src/CheckboxGroup.tsx            |   8 +-
 .../checkbox/test/Checkbox.test.js            | 132 ++++-
 .../checkbox/test/CheckboxGroup.test.js       | 452 +++++++++++++++++-
 packages/@react-spectrum/form/src/Form.tsx    |  19 +-
 .../form/stories/Form.stories.tsx             |  46 +-
 packages/@react-spectrum/label/src/Field.tsx  |  20 +-
 .../@react-spectrum/label/src/HelpText.tsx    |   8 +-
 .../checkbox/src/useCheckboxGroupState.ts     | 105 +++-
 packages/@react-types/checkbox/src/index.d.ts |   6 +-
 packages/@react-types/form/src/index.d.ts     |  14 +-
 packages/@react-types/shared/src/inputs.d.ts  |  38 +-
 packages/dev/test-utils/package.json          |   1 +
 packages/dev/test-utils/src/index.ts          |   1 +
 packages/dev/test-utils/src/validation.ts     |  39 ++
 23 files changed, 1212 insertions(+), 70 deletions(-)
 create mode 100644 packages/@react-aria/utils/src/useFormValidation.ts
 create mode 100644 packages/dev/test-utils/src/validation.ts

diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts
index 8bb9588509b..59140c54d01 100644
--- a/packages/@react-aria/checkbox/src/useCheckbox.ts
+++ b/packages/@react-aria/checkbox/src/useCheckbox.ts
@@ -14,8 +14,9 @@ import {AriaCheckboxProps} from '@react-types/checkbox';
 import {InputHTMLAttributes, RefObject, useEffect} from 'react';
 import {ToggleState} from '@react-stately/toggle';
 import {useToggle} from '@react-aria/toggle';
+import {ValidationResult} from '@react-types/shared';
 
-export interface CheckboxAria {
+export interface CheckboxAria extends ValidationResult {
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Whether the checkbox is selected. */
@@ -39,7 +40,7 @@ export interface CheckboxAria {
  * @param inputRef - A ref for the HTML input element.
  */
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
-  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useToggle(props, state, inputRef);
+  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid, errors, validationDetails} = useToggle(props, state, inputRef);
 
   let {isIndeterminate} = props;
   useEffect(() => {
@@ -59,6 +60,8 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     isPressed,
     isDisabled,
     isReadOnly,
-    isInvalid
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
index 2d4cf119b2a..51c28fefbbc 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
@@ -11,13 +11,13 @@
  */
 
 import {AriaCheckboxGroupProps} from '@react-types/checkbox';
-import {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';
+import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {useField} from '@react-aria/label';
 
-export interface CheckboxGroupAria {
+export interface CheckboxGroupAria extends ValidationResult {
   /** Props for the checkbox group wrapper element. */
   groupProps: DOMAttributes,
   /** Props for the checkbox group's visible label (if any). */
@@ -35,22 +35,25 @@ export interface CheckboxGroupAria {
  * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {
-  let {isDisabled, name} = props;
+  let {isDisabled, name, validationBehavior} = props;
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     // Checkbox group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid: state.isInvalid,
+    errorMessage: props.errorMessage || state.validationErrors
+  });
+  checkboxGroupData.set(state, {
+    name,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
   });
-  checkboxGroupDescriptionIds.set(state, descriptionProps.id);
-  checkboxGroupErrorMessageIds.set(state, errorMessageProps.id);
 
   let domProps = filterDOMProps(props, {labelable: true});
 
-  // Pass name prop from group to all items by attaching to the state.
-  checkboxGroupNames.set(state, name);
-
   return {
     groupProps: mergeProps(domProps, {
       role: 'group',
@@ -59,6 +62,9 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
     }),
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid: state.isInvalid,
+    errors: state.validationErrors,
+    validationDetails: state.validationDetails
   };
 }
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
index 95f7fc1a9e0..68b0d1c80ee 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
@@ -12,9 +12,9 @@
 
 import {AriaCheckboxGroupItemProps} from '@react-types/checkbox';
 import {CheckboxAria, useCheckbox} from './useCheckbox';
-import {checkboxGroupDescriptionIds, checkboxGroupErrorMessageIds, checkboxGroupNames} from './utils';
+import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {RefObject} from 'react';
+import {RefObject, useCallback} from 'react';
 import {useToggleState} from '@react-stately/toggle';
 
 /**
@@ -41,22 +41,46 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     }
   });
 
+  let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
+  let {validate} = props;
   let res = useCheckbox({
     ...props,
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isDisabled: props.isDisabled || state.isDisabled,
-    name: props.name || checkboxGroupNames.get(state)
+    name: props.name || name,
+    isRequired: props.isRequired ?? state.isRequired,
+    validationBehavior: props.validationBehavior ?? validationBehavior,
+    validate: useCallback((v) => {
+      // Merge group errors and local errors so form submission is blocked for group level errors.
+      let res = validate?.(v);
+      let arr = [];
+      if (res && typeof res !== 'boolean') {
+        arr = Array.isArray(res) ? res : [res];
+      }
+      return [...state.groupValidationErrors, ...arr];
+    }, [validate, state.groupValidationErrors]),
+    onValidationChange(e) {
+      props.onValidationChange?.({
+        ...e,
+        errors: e.errors.slice(state.groupValidationErrors.length)
+      });
+      state.setInvalid(props.value, e);
+    }
   }, toggleState, inputRef);
 
+  // Remove group error messages from what we expose to local checkbox item.
+  let errors = res.errors.slice(state.groupValidationErrors.length);
+
   return {
     ...res,
     inputProps: {
       ...res.inputProps,
       'aria-describedby': [
         props['aria-describedby'],
-        state.isInvalid ? checkboxGroupErrorMessageIds.get(state) : null,
-        checkboxGroupDescriptionIds.get(state)
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(' ') || undefined
-    }
+    },
+    errors
   };
 }
diff --git a/packages/@react-aria/checkbox/src/utils.ts b/packages/@react-aria/checkbox/src/utils.ts
index 159411bfdc6..90fcc71df98 100644
--- a/packages/@react-aria/checkbox/src/utils.ts
+++ b/packages/@react-aria/checkbox/src/utils.ts
@@ -12,6 +12,11 @@
 
 import {CheckboxGroupState} from '@react-stately/checkbox';
 
-export const checkboxGroupNames = new WeakMap<CheckboxGroupState, string>();
-export const checkboxGroupDescriptionIds = new WeakMap<CheckboxGroupState, string>();
-export const checkboxGroupErrorMessageIds = new WeakMap<CheckboxGroupState, string>();
+interface CheckboxGroupData {
+  name: string,
+  descriptionId: string,
+  errorMessageId: string,
+  validationBehavior: 'aria' | 'native'
+}
+
+export const checkboxGroupData = new WeakMap<CheckboxGroupState, CheckboxGroupData>();
diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts
index ac71a514bff..8c4235ceb54 100644
--- a/packages/@react-aria/toggle/src/useToggle.ts
+++ b/packages/@react-aria/toggle/src/useToggle.ts
@@ -11,13 +11,14 @@
  */
 
 import {AriaToggleProps} from '@react-types/checkbox';
-import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
 import {InputHTMLAttributes, RefObject} from 'react';
 import {ToggleState} from '@react-stately/toggle';
 import {useFocusable} from '@react-aria/focus';
 import {usePress} from '@react-aria/interactions';
+import {ValidationResult} from '@react-types/shared';
 
-export interface ToggleAria {
+export interface ToggleAria extends ValidationResult {
   /**
    * Props to be spread on the input element.
    */
@@ -47,8 +48,7 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     children,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
-    validationState = 'valid',
-    isInvalid
+    validationBehavior = 'aria'
   } = props;
 
   let onChange = (e) => {
@@ -75,13 +75,16 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
 
   useFormReset(ref, state.isSelected, state.setSelected);
 
+  let {isInvalid, errors, validationDetails} = useFormValidation(props, state.isSelected, ref);
+
   return {
     inputProps: mergeProps(domProps, {
-      'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
+      'aria-invalid': isInvalid || undefined,
       'aria-errormessage': props['aria-errormessage'],
       'aria-controls': props['aria-controls'],
       'aria-readonly': isReadOnly || undefined,
-      'aria-required': isRequired || undefined,
+      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+      required: isRequired && validationBehavior === 'native',
       onChange,
       disabled: isDisabled,
       ...(value == null ? {} : {value}),
@@ -93,6 +96,8 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     isPressed,
     isDisabled,
     isReadOnly,
-    isInvalid: isInvalid || validationState === 'invalid'
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index a689bf6f77d..19de8ff79db 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -39,3 +39,4 @@ export {isVirtualClick, isVirtualPointerEvent} from './isVirtualEvent';
 export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
+export {useFormValidation, FormValidationContext} from './useFormValidation';
diff --git a/packages/@react-aria/utils/src/useEffectEvent.ts b/packages/@react-aria/utils/src/useEffectEvent.ts
index 66ebdd2396f..e222b9fdbbb 100644
--- a/packages/@react-aria/utils/src/useEffectEvent.ts
+++ b/packages/@react-aria/utils/src/useEffectEvent.ts
@@ -13,13 +13,14 @@
 import {useCallback, useRef} from 'react';
 import {useLayoutEffect} from './useLayoutEffect';
 
-export function useEffectEvent(fn) {
-  const ref = useRef(null);
+export function useEffectEvent<T extends Function>(fn: T): T {
+  const ref = useRef<T | null>(null);
   useLayoutEffect(() => {
     ref.current = fn;
   }, [fn]);
-  return useCallback((...args) => {
-    const f = ref.current;
+  // @ts-ignore
+  return useCallback<T>((...args) => {
+    const f = ref.current!;
     return f(...args);
   }, []);
 }
diff --git a/packages/@react-aria/utils/src/useFormValidation.ts b/packages/@react-aria/utils/src/useFormValidation.ts
new file mode 100644
index 00000000000..3bc5ae7a351
--- /dev/null
+++ b/packages/@react-aria/utils/src/useFormValidation.ts
@@ -0,0 +1,272 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {createContext, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {useEffectEvent} from './useEffectEvent';
+import {Validation, ValidationErrors, ValidationResult} from '@react-types/shared';
+
+type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+export const FormValidationContext = createContext<ValidationErrors>({});
+
+interface FormValidationProps<T> extends Validation<T> {
+  name?: string
+}
+
+export function useFormValidation<T>(props: FormValidationProps<T>, value: T, ref: RefObject<ValidatableElement>): ValidationResult {
+  let {isInvalid, validationState, name, validate, validationBehavior, onValidationChange} = props;
+
+  // backward compatibility.
+  if (validationState) {
+    isInvalid ||= validationState === 'invalid';
+  }
+
+  // If the isInvalid prop is true, update validation result in realtime (controlled).
+  let controlledError: ValidationResult | null = isInvalid ? {
+    isInvalid: true,
+    errors: [],
+    validationDetails: CUSTOM_VALIDATION_DETAILS
+  } : null;
+
+  // Perform custom client side validation.
+  let clientErrors = useMemo(() => {
+    if (typeof validate === 'function') {
+      let error = validate(value);
+      if (error && typeof error !== 'boolean') {
+        return Array.isArray(error) ? error : [error];
+      }
+    }
+
+    return [];
+  }, [value, validate]);
+
+  let clientError: ValidationResult | null = useMemo(() => {
+    return clientErrors.length ? {
+      isInvalid: true,
+      errors: clientErrors,
+      validationDetails: CUSTOM_VALIDATION_DETAILS
+    } : null;
+  }, [clientErrors]);
+
+  // Clear server errors when the user changes the value.
+  let [isServerErrorCleared, setServerErrorCleared] = useState(false);
+  useEffect(() => {
+    let input = ref.current!;
+    let form = input.form;
+    let onReset = () => setServerErrorCleared(true);
+    let onChange = (e) => {
+      // Clear if any input with the same name is updated (e.g. in a checkbox/radio group).
+      if (e.target.name === name) {
+        setServerErrorCleared(true);
+      }
+    };
+    input.addEventListener('change', onChange);
+    form?.addEventListener('change', onChange);
+    form?.addEventListener('reset', onReset);
+    return () => {
+      input.removeEventListener('change', onChange);
+      form?.removeEventListener('change', onChange);
+      form?.removeEventListener('reset', onReset);
+    };
+  }, [ref, name]);
+
+  // Get relevant server errors from the form.
+  let serverErrors = useContext(FormValidationContext);
+  let serverErrorMessages = useMemo(() => {
+    if (name) {
+      setServerErrorCleared(false);
+      let errors = serverErrors[name];
+      if (!errors) {
+        return [];
+      }
+      return Array.isArray(errors) ? errors : [errors];
+    }
+    return [];
+  }, [serverErrors, name]);
+
+  let serverError: ValidationResult | null = useMemo(() => {
+    return serverErrorMessages.length && !isServerErrorCleared ? {
+      isInvalid: true,
+      errors: serverErrorMessages,
+      validationDetails: CUSTOM_VALIDATION_DETAILS
+    } : null;
+  }, [isServerErrorCleared, serverErrorMessages]);
+
+  // Update the native element's validity based on custom client and server validation.
+  let lastError = useRef(null);
+  useEffect(() => {
+    if (validationBehavior === 'native') {
+      let errorMessage = '';
+      if (isInvalid) {
+        // This is not shown to the user, it's just there to prevent form submission.
+        // A custom localized string should be provided to the component the the errorMessage prop/slot.
+        errorMessage = 'Invalid value.';
+      } else {
+        errorMessage = serverError ? serverError.errors.join(' ') : clientErrors.join(' ');
+      }
+      ref.current?.setCustomValidity(errorMessage);
+
+      // Prevent default tooltip for validation message.
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
+      if (!ref.current.hasAttribute('title')) {
+        ref.current.title = '';
+      }
+
+      // Report server errors immediately.
+      if (serverError !== lastError.current && ref.current) {
+        lastError.current = serverError;
+        updateNativeValidity(getNativeValidity(ref.current));
+      }
+    } else {
+      let e = serverError || clientError || DEFAULT_VALIDITY;
+      if (e !== lastError.current) {
+        lastError.current = e;
+        onValidationChange?.(e);
+      }
+    }
+  });
+
+  // Track native element validity for built in validation (e.g. required).
+  let [nativeValidity, setNativeValidity] = useState(DEFAULT_VALIDITY);
+  let updateNativeValidity = e => {
+    // Use serverError/clientError if set so we get the original (separate) error messages.
+    e = serverError || clientError || e;
+    setNativeValidity(e);
+    onValidationChange?.(e);
+  };
+
+  useInputValidity(validationBehavior === 'native' ? ref : null, updateNativeValidity);
+
+  if (validationBehavior === 'native') {
+    return controlledError || serverError || nativeValidity;
+  } else {
+    return controlledError || serverError || clientError || DEFAULT_VALIDITY;
+  }
+}
+
+const DEFAULT_VALIDATION_DETAILS: ValidityState = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+
+const CUSTOM_VALIDATION_DETAILS: ValidityState = {
+  ...DEFAULT_VALIDATION_DETAILS,
+  customError: true,
+  valid: false
+};
+
+const DEFAULT_VALIDITY: ValidationResult = {
+  isInvalid: false,
+  validationDetails: DEFAULT_VALIDATION_DETAILS,
+  errors: []
+};
+
+function getValidity(input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) {
+  // The native ValidityState object is live, meaning each property is a getter that returns the current state.
+  // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
+  let validity = input.validity;
+  return {
+    badInput: validity.badInput,
+    customError: validity.customError,
+    patternMismatch: validity.patternMismatch,
+    rangeOverflow: validity.rangeOverflow,
+    rangeUnderflow: validity.rangeUnderflow,
+    stepMismatch: validity.stepMismatch,
+    tooLong: validity.tooLong,
+    tooShort: validity.tooShort,
+    typeMismatch: validity.typeMismatch,
+    valueMissing: validity.valueMissing,
+    valid: validity.valid
+  };
+}
+
+function isEqual(a: ValidityState, b: ValidityState) {
+  for (let key in a) {
+    if (b[key] !== a[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function useInputValidity(
+  inputRef: RefObject<ValidatableElement> | null,
+  onValidationChange?: (value: ValidationResult) => void
+) {
+  let validation = useRef(DEFAULT_VALIDITY);
+  let updateValidation = useEffectEvent((newValidation: ValidationResult) => {
+    // Ignore duplicate events.
+    if (
+      validation.current.errors[0] === newValidation.errors[0] &&
+      isEqual(validation.current.validationDetails, newValidation.validationDetails)
+    ) {
+      return;
+    }
+
+    validation.current = newValidation;
+    if (onValidationChange) {
+      onValidationChange(newValidation);
+    }
+  });
+
+  useEffect(() => {
+    if (!inputRef) {
+      return;
+    }
+
+    let input = inputRef.current!;
+    let form = input.form;
+    let onInvalid = (e: Event) => {
+      e.preventDefault();
+      updateValidation(getNativeValidity(input));
+    };
+
+    let onChange = () => {
+      if (input.validity.valid || !validation.current.validationDetails.valid) {
+        updateValidation(getNativeValidity(input));
+      }
+    };
+
+    let onReset = () => {
+      updateValidation(DEFAULT_VALIDITY);
+    };
+
+    input.addEventListener('invalid', onInvalid);
+    form?.addEventListener('change', onChange);
+    // form?.addEventListener('focusout', onChange);
+    form?.addEventListener('reset', onReset);
+    return () => {
+      input.removeEventListener('invalid', onInvalid);
+      form?.removeEventListener('change', onChange);
+      form?.removeEventListener('focusout', onChange);
+      form?.removeEventListener('reset', onReset);
+    };
+  }, [inputRef, updateValidation]);
+}
+
+function getNativeValidity(input: ValidatableElement): ValidationResult {
+  return {
+    isInvalid: !input.validity.valid,
+    validationDetails: getValidity(input),
+    errors: input.validationMessage ? [input.validationMessage] : []
+  };
+}
diff --git a/packages/@react-spectrum/checkbox/src/Checkbox.tsx b/packages/@react-spectrum/checkbox/src/Checkbox.tsx
index e81534cc066..517bd625eff 100644
--- a/packages/@react-spectrum/checkbox/src/Checkbox.tsx
+++ b/packages/@react-spectrum/checkbox/src/Checkbox.tsx
@@ -20,6 +20,7 @@ import React, {forwardRef, useContext, useRef} from 'react';
 import {SpectrumCheckboxProps} from '@react-types/checkbox';
 import styles from '@adobe/spectrum-css-temp/components/checkbox/vars.css';
 import {useCheckbox, useCheckboxGroupItem} from '@react-aria/checkbox';
+import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useToggleState} from '@react-stately/toggle';
@@ -27,14 +28,13 @@ import {useToggleState} from '@react-stately/toggle';
 function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   let originalProps = props;
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     isIndeterminate = false,
     isEmphasized = false,
     isDisabled = false,
     autoFocus,
     children,
-    validationState,
-    isInvalid,
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
@@ -47,7 +47,7 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
   // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
   // but since the checkbox won't move in and out of a group, it should be safe.
   let groupState = useContext(CheckboxGroupContext);
-  let {inputProps} = groupState
+  let {inputProps, isInvalid} = groupState
     // eslint-disable-next-line react-hooks/rules-of-hooks
     ? useCheckboxGroupItem({
       ...props,
@@ -92,7 +92,7 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
             'is-checked': inputProps.checked,
             'is-indeterminate': isIndeterminate,
             'spectrum-Checkbox--quiet': !isEmphasized,
-            'is-invalid': isInvalid || validationState === 'invalid',
+            'is-invalid': isInvalid,
             'is-disabled': isDisabled,
             'is-hovered': isHovered
           },
diff --git a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
index 632c4b63d16..9c736e48148 100644
--- a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
@@ -32,16 +32,14 @@ function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivEle
   } = props;
   let domRef = useDOMRef(ref);
   let state = useCheckboxGroupState(props);
-  let {labelProps, groupProps, descriptionProps, errorMessageProps} = useCheckboxGroup(props, state);
+  let {groupProps, ...otherProps} = useCheckboxGroup(props, state);
 
   return (
     <Field
       {...props}
+      {...otherProps}
       ref={domRef}
       wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}
-      labelProps={labelProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
       elementType="span"
       includeNecessityIndicatorInAccessibilityName>
       <div
@@ -55,7 +53,7 @@ function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivEle
             }
           )
         }>
-        <Provider isEmphasized={isEmphasized} validationState={state.isInvalid ? 'invalid' : undefined}>
+        <Provider isEmphasized={isEmphasized}>
           <CheckboxGroupContext.Provider value={state}>
             {children}
           </CheckboxGroupContext.Provider>
diff --git a/packages/@react-spectrum/checkbox/test/Checkbox.test.js b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
index 595f4825432..5eed2325b3d 100644
--- a/packages/@react-spectrum/checkbox/test/Checkbox.test.js
+++ b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
@@ -10,9 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {act} from 'react-dom/test-utils';
+import {Button} from '@react-spectrum/button';
 import {Checkbox} from '../';
-import {pointerMap, render} from '@react-spectrum/test-utils';
+import {createValidationResult, pointerMap, render} from '@react-spectrum/test-utils';
+import {Form} from '@react-spectrum/form';
+import {Provider} from '@react-spectrum/provider';
 import React from 'react';
+import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
 describe('Checkbox', function () {
@@ -286,4 +291,129 @@ describe('Checkbox', function () {
     await user.click(button);
     expect(input).not.toBeChecked();
   });
+
+  describe('validation', () => {
+    describe('validationBehavior=native', () => {
+      it('supports isRequired', async () => {
+        let onValidationChange = jest.fn();
+        let {getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <Checkbox isRequired validationBehavior="native" onValidationChange={onValidationChange}>Terms and conditions</Checkbox>
+            </Form>
+          </Provider>
+        );
+
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let checkbox = getByRole('checkbox');
+        expect(checkbox).toHaveAttribute('required');
+        expect(checkbox).not.toHaveAttribute('aria-required');
+        expect(checkbox.validity.valid).toBe(false);
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+        await user.click(checkbox);
+        expect(checkbox.validity.valid).toBe(true);
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <Checkbox validationBehavior="native" onValidationChange={onValidationChange} validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+            </Form>
+          </Provider>
+        );
+
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let checkbox = getByRole('checkbox');
+        expect(checkbox.validity.valid).toBe(false);
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.']));
+
+        await user.click(checkbox);
+        expect(checkbox.validity.valid).toBe(true);
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        function Test() {
+          let [serverErrors, setServerErrors] = React.useState({});
+          let onSubmit = e => {
+            e.preventDefault();
+            setServerErrors({
+              terms: 'You must accept the terms.'
+            });
+          };
+
+          return (
+            <Provider theme={theme}>
+              <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                <Checkbox name="terms" validationBehavior="native">Terms and conditions</Checkbox>
+                <Button type="submit">Submit</Button>
+              </Form>
+            </Provider>
+          );
+        }
+
+        let {getByRole} = render(<Test />);
+        await user.click(getByRole('button'));
+
+        let checkbox = getByRole('checkbox');
+        expect(checkbox.validity.valid).toBe(false);
+
+        await user.click(checkbox);
+        expect(checkbox.validity.valid).toBe(true);
+      });
+    });
+
+    describe('validationBehavior=aria', () => {
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getByRole} = render(
+          <Provider theme={theme}>
+            <Checkbox value="terms" onValidationChange={onValidationChange} validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+          </Provider>
+        );
+
+        let checkbox = getByRole('checkbox');
+        expect(checkbox.validity.valid).toBe(true);
+
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.']));
+
+        await user.click(checkbox);
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        let {getByRole} = render(
+          <Provider theme={theme}>
+            <Form validationErrors={{terms: 'You must accept the terms'}}>
+              <Checkbox name="terms">Terms and conditions</Checkbox>
+            </Form>
+          </Provider>
+        );
+
+        let checkbox = getByRole('checkbox');
+        expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+
+        await user.click(checkbox);
+        expect(checkbox).not.toHaveAttribute('aria-invalid');
+      });
+    });
+  });
 });
diff --git a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
index ed8dc393ce4..9cafcf70026 100644
--- a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
+++ b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
@@ -10,8 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, createValidationResult, pointerMap, render, within} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
 import {Checkbox, CheckboxGroup} from '../';
-import {pointerMap, render, within} from '@react-spectrum/test-utils';
+import {Form} from '@react-spectrum/form';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -412,4 +414,452 @@ describe('CheckboxGroup', () => {
     expect(checkboxes[1]).not.toBeChecked();
     expect(checkboxes[2]).not.toBeChecked();
   });
+
+  describe('validation', () => {
+    describe('validationBehavior=native', () => {
+      it('supports group level isRequired', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <CheckboxGroup label="Agree to the following" isRequired validationBehavior="native" onValidationChange={onValidationChange}>
+                <Checkbox value="terms">Terms and conditions</Checkbox>
+                <Checkbox value="cookies">Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes) {
+          expect(input).toHaveAttribute('required');
+          expect(input).not.toHaveAttribute('aria-required');
+          expect(input.validity.valid).toBe(false);
+        }
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.click(checkboxes[0]);
+        for (let input of checkboxes) {
+          expect(input).not.toHaveAttribute('required');
+          expect(input).not.toHaveAttribute('aria-required');
+          expect(input.validity.valid).toBe(true);
+        }
+
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports checkbox level isRequired', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <CheckboxGroup label="Agree to the following" validationBehavior="native" onValidationChange={onValidationChange}>
+                <Checkbox value="terms" isRequired>Terms and conditions</Checkbox>
+                <Checkbox value="cookies" isRequired>Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes.slice(0, 2)) {
+          expect(input).toHaveAttribute('required');
+          expect(input).not.toHaveAttribute('aria-required');
+          expect(input.validity.valid).toBe(false);
+        }
+        expect(checkboxes[2]).not.toHaveAttribute('required');
+        expect(checkboxes[2]).not.toHaveAttribute('aria-required');
+        expect(checkboxes[2].validity.valid).toBe(true);
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.click(checkboxes[0]);
+        expect(checkboxes[0].validity.valid).toBe(true);
+        expect(checkboxes[1].validity.valid).toBe(false);
+        expect(group).toHaveAttribute('aria-describedby');
+
+        await user.click(checkboxes[1]);
+        expect(checkboxes[1].validity.valid).toBe(true);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(3);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports group level validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <CheckboxGroup label="Agree to the following" validationBehavior="native" validate={v => v.length < 3 ? 'You must accept all terms' : null} onValidationChange={onValidationChange}>
+                <Checkbox value="terms">Terms and conditions</Checkbox>
+                <Checkbox value="cookies">Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes) {
+          expect(input).not.toHaveAttribute('required');
+          expect(input).not.toHaveAttribute('aria-required');
+          expect(input.validity.valid).toBe(false);
+        }
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms']));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent(['You must accept all terms']);
+
+        await user.click(checkboxes[0]);
+        expect(group).toHaveAttribute('aria-describedby');
+        for (let input of checkboxes) {
+          expect(input.validity.valid).toBe(false);
+        }
+
+        await user.click(checkboxes[1]);
+        expect(group).toHaveAttribute('aria-describedby');
+        for (let input of checkboxes) {
+          expect(input.validity.valid).toBe(false);
+        }
+
+        await user.click(checkboxes[2]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        for (let input of checkboxes) {
+          expect(input.validity.valid).toBe(true);
+        }
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports checkbox level validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <CheckboxGroup label="Agree to the following" validationBehavior="native" onValidationChange={onValidationChange}>
+                <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+                <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let checkboxes = getAllByRole('checkbox');
+        expect(checkboxes[0].validity.valid).toBe(false);
+        expect(checkboxes[1].validity.valid).toBe(false);
+        expect(checkboxes[2].validity.valid).toBe(true);
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.', 'You must accept the cookies.']));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms. You must accept the cookies.');
+
+        await user.click(checkboxes[0]);
+        expect(checkboxes[0].validity.valid).toBe(true);
+        expect(checkboxes[1].validity.valid).toBe(false);
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the cookies.');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the cookies.']));
+
+        await user.click(checkboxes[1]);
+        expect(checkboxes[0].validity.valid).toBe(true);
+        expect(checkboxes[1].validity.valid).toBe(true);
+        expect(group).not.toHaveAttribute('aria-describedby');
+
+        expect(onValidationChange).toHaveBeenCalledTimes(3);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('combines group and checkbox level validation messages', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <CheckboxGroup label="Agree to the following" validationBehavior="native" validate={v => v.length < 3 ? 'You must accept all terms.' : null} onValidationChange={onValidationChange}>
+                <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+                <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let checkboxes = getAllByRole('checkbox');
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.', 'You must accept the terms.', 'You must accept the cookies.']));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the terms. You must accept the cookies.');
+
+        await user.click(checkboxes[0]);
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the cookies.');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.', 'You must accept the cookies.']));
+
+        await user.click(checkboxes[1]);
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms.');
+        expect(onValidationChange).toHaveBeenCalledTimes(3);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.']));
+
+        await user.click(checkboxes[2]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(4);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        function Test() {
+          let [serverErrors, setServerErrors] = React.useState({});
+          let onSubmit = e => {
+            e.preventDefault();
+            setServerErrors({
+              terms: 'You must accept the terms.'
+            });
+          };
+
+          return (
+            <Provider theme={theme}>
+              <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                <CheckboxGroup name="terms" label="Agree to the following" validationBehavior="native">
+                  <Checkbox value="terms">Terms and conditions</Checkbox>
+                  <Checkbox value="cookies">Cookies</Checkbox>
+                  <Checkbox value="privacy">Privacy policy</Checkbox>
+                </CheckboxGroup>
+                <Button type="submit">Submit</Button>
+              </Form>
+            </Provider>
+          );
+        }
+
+        let {getAllByRole, getByRole} = render(<Test />);
+
+        let group = getByRole('group');
+        expect(group).not.toHaveAttribute('aria-describedby');
+
+        await user.click(getByRole('button'));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms.');
+
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes) {
+          expect(input.validity.valid).toBe(false);
+        }
+
+        await user.click(checkboxes[0]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        for (let input of checkboxes) {
+          expect(input.validity.valid).toBe(true);
+        }
+      });
+
+      it('supports customizing native error messages', async () => {
+        let {getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <CheckboxGroup label="Agree to the following" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please select at least one item' : null}>
+                <Checkbox value="terms">Terms and conditions</Checkbox>
+                <Checkbox value="cookies">Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).not.toHaveAttribute('aria-describedby');
+
+        act(() => getByTestId('form').checkValidity());
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please select at least one item');
+      });
+    });
+
+    describe('validationBehavior=aria', () => {
+      it('supports group level validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole} = render(
+          <Provider theme={theme}>
+            <CheckboxGroup label="Agree to the following" validate={v => v.length < 3 ? 'You must accept all terms' : null} onValidationChange={onValidationChange}>
+              <Checkbox value="terms">Terms and conditions</Checkbox>
+              <Checkbox value="cookies">Cookies</Checkbox>
+              <Checkbox value="privacy">Privacy policy</Checkbox>
+            </CheckboxGroup>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms');
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms']));
+
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes) {
+          expect(input).toHaveAttribute('aria-invalid', 'true');
+          expect(input.validity.valid).toBe(true);
+        }
+
+        await user.click(checkboxes[0]);
+        expect(group).toHaveAttribute('aria-describedby');
+
+        await user.click(checkboxes[1]);
+        expect(group).toHaveAttribute('aria-describedby');
+
+        await user.click(checkboxes[2]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+
+        expect(onValidationChange).toHaveBeenCalledTimes(4);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports checkbox level validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole} = render(
+          <Provider theme={theme}>
+            <CheckboxGroup label="Agree to the following" onValidationChange={onValidationChange}>
+              <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+              <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
+              <Checkbox value="privacy">Privacy policy</Checkbox>
+            </CheckboxGroup>
+          </Provider>
+        );
+
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes) {
+          if (input.value !== 'privacy') {
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+          }
+          expect(input.validity.valid).toBe(true);
+        }
+
+        let group = getByRole('group');
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms. You must accept the cookies.');
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.', 'You must accept the cookies.']));
+
+        await user.click(checkboxes[0]);
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the cookies.');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the cookies.']));
+
+        await user.click(checkboxes[1]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(3);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('combines group and checkbox level validation messages', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole} = render(
+          <Provider theme={theme}>
+            <CheckboxGroup label="Agree to the following" validate={v => v.length < 3 ? 'You must accept all terms.' : null} onValidationChange={onValidationChange}>
+              <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+              <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
+              <Checkbox value="privacy">Privacy policy</Checkbox>
+            </CheckboxGroup>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes) {
+          expect(input).toHaveAttribute('aria-invalid', 'true');
+        }
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the terms. You must accept the cookies.');
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.', 'You must accept the terms.', 'You must accept the cookies.']));
+
+        await user.click(checkboxes[0]);
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the cookies.');
+
+        await user.click(checkboxes[1]);
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms.');
+
+        await user.click(checkboxes[2]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(4);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        let {getAllByRole, getByRole} = render(
+          <Provider theme={theme}>
+            <Form validationErrors={{terms: 'You must accept the terms'}}>
+              <CheckboxGroup name="terms" label="Agree to the following">
+                <Checkbox value="terms">Terms and conditions</Checkbox>
+                <Checkbox value="cookies">Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('group');
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms');
+
+        let checkboxes = getAllByRole('checkbox');
+        for (let input of checkboxes) {
+          expect(input).toHaveAttribute('aria-invalid', 'true');
+        }
+
+        await user.click(checkboxes[0]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+      });
+    });
+  });
 });
diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx
index 7e1781c5d0d..e491143968a 100644
--- a/packages/@react-spectrum/form/src/Form.tsx
+++ b/packages/@react-spectrum/form/src/Form.tsx
@@ -12,13 +12,17 @@
 
 import {Alignment, DOMRef, LabelPosition, SpectrumLabelableProps} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, FormValidationContext} from '@react-aria/utils';
 import {Provider, useProviderProps} from '@react-spectrum/provider';
 import React, {useContext} from 'react';
 import {SpectrumFormProps} from '@react-types/form';
 import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
 
-let FormContext = React.createContext<SpectrumLabelableProps>(null);
+interface FormContextValue extends SpectrumLabelableProps {
+  validationBehavior?: 'aria' | 'native'
+}
+
+let FormContext = React.createContext<FormContextValue | null>(null);
 export function useFormProps<T extends SpectrumLabelableProps>(props: T): T {
   let ctx = useContext(FormContext);
   if (ctx) {
@@ -50,6 +54,8 @@ function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
     isDisabled,
     isReadOnly,
     validationState,
+    validationBehavior,
+    validationErrors,
     ...otherProps
   } = props;
 
@@ -59,14 +65,15 @@ function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
   let ctx = {
     labelPosition,
     labelAlign,
-    necessityIndicator
+    necessityIndicator,
+    validationBehavior
   };
 
   return (
     <form
       {...filterDOMProps(otherProps, {labelable: true, propNames: formPropNames})}
       {...styleProps}
-      noValidate
+      noValidate={validationBehavior !== 'native'}
       ref={domRef}
       className={
         classNames(
@@ -87,7 +94,9 @@ function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
           isReadOnly={isReadOnly}
           isRequired={isRequired}
           validationState={validationState}>
-          {children}
+          <FormValidationContext.Provider value={validationErrors || {}}>
+            {children}
+          </FormValidationContext.Provider>
         </Provider>
       </FormContext.Provider>
     </form>
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 606820e36c0..2bffbe686ae 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -364,6 +364,7 @@ FormWithReset.story = {
   name: 'form with reset'
 };
 
+
 export const _FormWithSubmit = () => <FormWithSubmit />;
 
 _FormWithSubmit.story = {
@@ -400,7 +401,7 @@ WithTranslations.story = {
 function render(props: any = {}) {
   return (
     <Form {...props}>
-      <CheckboxGroup defaultValue={['dragons']} label="Pets">
+      <CheckboxGroup defaultValue={['dragons']} label="Pets" validate={v => v.includes('dogs') ? 'No dogs' : null}>
         <Checkbox value="dogs">Dogs</Checkbox>
         <Checkbox value="cats">Cats</Checkbox>
         <Checkbox value="dragons">Dragons</Checkbox>
@@ -451,6 +452,12 @@ function render(props: any = {}) {
         <Item key="5">Cool Tag 5</Item>
         <Item key="6">Cool Tag 6</Item>
       </TagGroup>
+      {props.showSubmit && (
+        <ButtonGroup>
+          <Button variant="primary" type="submit">Submit</Button>
+          <Button variant="secondary" type="reset">Reset</Button>
+        </ButtonGroup>
+      )}
     </Form>
   );
 }
@@ -683,3 +690,40 @@ function FormWithSubmit() {
     </Form>
   );
 }
+
+export const NativeValidation = () => render({
+  isRequired: true,
+  validationBehavior: 'native',
+  showSubmit: true,
+  onSubmit: (e) => {
+    e.preventDefault();
+    action('onSubmit')(Object.fromEntries(new FormData(e.target as HTMLFormElement).entries()));
+  }
+});
+
+export function ServerValidation() {
+  let [serverErrors, setServerErrors] = useState<any>({});
+  let onSubmit = async (e) => {
+    e.preventDefault();
+    let formData = new FormData(e.target);
+    if (formData.get('firstName') === 'Foo') {
+      setServerErrors({
+        firstName: 'Invalid first name'
+      });
+    } else {
+      action('onSubmit')(Object.fromEntries(formData.entries()));
+      setServerErrors({});
+    }
+  };
+
+  return (
+    <Form validationBehavior="native" isRequired onSubmit={onSubmit} validationErrors={serverErrors}>
+      <TextField name="firstName" label="First Name (server errors on 'Foo')" />
+      <TextField name="lastName" label="Last Name (client errors on 'Bar')" validate={v => v === 'Bar' ? 'Invalid last name' : null} />
+      <ButtonGroup>
+        <Button variant="primary" type="submit">Submit</Button>
+        <Button variant="secondary" type="reset">Reset</Button>
+      </ButtonGroup>
+    </Form>
+  );
+}
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
index 513b6f66c13..996f1d62c2d 100644
--- a/packages/@react-spectrum/label/src/Field.tsx
+++ b/packages/@react-spectrum/label/src/Field.tsx
@@ -35,7 +35,9 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
     validationState,
     isInvalid,
     description,
-    errorMessage,
+    errorMessage = e => e.errors.join(' '),
+    errors,
+    validationDetails,
     isDisabled,
     showErrorIcon,
     contextualHelp,
@@ -50,7 +52,19 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
-  let hasHelpText = !!description || errorMessage && (isInvalid || validationState === 'invalid');
+  let errorMessageString = null;
+  if (typeof errorMessage === 'function') {
+    errorMessageString = isInvalid != null && errors != null && validationDetails != null
+      ? errorMessage({
+        isInvalid,
+        errors,
+        validationDetails
+      })
+      : null;
+  } else {
+    errorMessageString = errorMessage;
+  }
+  let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === 'invalid');
   let contextualHelpId = useId();
 
   let fallbackLabelPropsId = useId();
@@ -83,7 +97,7 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
       description={description}
-      errorMessage={errorMessage}
+      errorMessage={errorMessageString}
       validationState={validationState}
       isInvalid={isInvalid}
       isDisabled={isDisabled}
diff --git a/packages/@react-spectrum/label/src/HelpText.tsx b/packages/@react-spectrum/label/src/HelpText.tsx
index 63a7ede93d0..8033dc7d732 100644
--- a/packages/@react-spectrum/label/src/HelpText.tsx
+++ b/packages/@react-spectrum/label/src/HelpText.tsx
@@ -13,14 +13,16 @@
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DOMRef, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
-import React, {HTMLAttributes} from 'react';
+import React, {HTMLAttributes, ReactNode} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/helptext/vars.css';
 
-interface HelpTextProps extends SpectrumHelpTextProps, Omit<Validation, 'validationState'>, SpectrumFieldValidation, StyleProps {
+interface HelpTextProps extends Omit<SpectrumHelpTextProps, 'errorMessage'>, Omit<Validation<any>, 'validationState'>, SpectrumFieldValidation<any>, StyleProps {
   /** Props for the help text description element. */
   descriptionProps?: HTMLAttributes<HTMLElement>,
   /** Props for the help text error message element. */
-  errorMessageProps?: HTMLAttributes<HTMLElement>
+  errorMessageProps?: HTMLAttributes<HTMLElement>,
+  /** An error message for the field. */
+  errorMessage?: ReactNode
 }
 
 function HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index 2e66bf237bf..c0c92833cb4 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -12,7 +12,8 @@
 
 import {CheckboxGroupProps} from '@react-types/checkbox';
 import {useControlledState} from '@react-stately/utils';
-import {ValidationState} from '@react-types/shared';
+import {useEffect, useMemo, useRef, useState} from 'react';
+import {ValidationResult, ValidationState} from '@react-types/shared';
 
 export interface CheckboxGroupState {
   /** Current selected values. */
@@ -28,11 +29,26 @@ export interface CheckboxGroupState {
    * The current validation state of the checkbox group.
    * @deprecated Use `isInvalid` instead.
    */
-  readonly validationState: ValidationState,
+  readonly validationState: ValidationState | null,
 
   /** Whether the checkbox group is invalid. */
   readonly isInvalid: boolean,
 
+  /** A list of group level validation error messages resulting from the `validate` prop. */
+  readonly groupValidationErrors: string[],
+
+  /** The aggregated error messages for the group and all checkboxes. */
+  readonly validationErrors: string[],
+
+  /** The aggregated validation details for all checkboxes in the group. */
+  readonly validationDetails: ValidityState,
+
+  /**
+   * Whether the checkboxes in the group are required.
+   * This changes to false once at least one item is selected.
+   */
+  readonly isRequired: boolean,
+
   /** Returns whether the given value is selected. */
   isSelected(value: string): boolean,
 
@@ -46,7 +62,10 @@ export interface CheckboxGroupState {
   removeValue(value: string): void,
 
   /** Toggles a value in the set of selected values. */
-  toggleValue(value: string): void
+  toggleValue(value: string): void,
+
+  /** Sets whether one of the checkboxes is invalid. */
+  setInvalid(value: string, validation: ValidationResult): void
 }
 
 /**
@@ -55,6 +74,32 @@ export interface CheckboxGroupState {
  */
 export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxGroupState {
   let [selectedValues, setValue] = useControlledState(props.value, props.defaultValue || [], props.onChange);
+  let [invalidValues, setInvalidValues] = useState(new Map<string, ValidationResult>());
+  let isRequired = props.isRequired && selectedValues.length === 0;
+
+  let {validate, onValidationChange} = props;
+  let groupValidationErrors = useMemo(() => {
+    if (typeof validate === 'function') {
+      let e = validate(selectedValues);
+      if (e && typeof e !== 'boolean') {
+        return Array.isArray(e) ? e : [e];
+      }
+    }
+
+    return [];
+  }, [validate, selectedValues]);
+
+  // Aggregate errors from all invalid checkboxes for checkbox group level validation.
+  let aggregatedValidation = useMemo(() => aggregateValidation(invalidValues), [invalidValues]);
+  let isInvalid = props.isInvalid || props.validationState === 'invalid' || aggregatedValidation.isInvalid;
+
+  let lastValidation = useRef(aggregatedValidation);
+  useEffect(() => {
+    if (aggregatedValidation !== lastValidation.current) {
+      lastValidation.current = aggregatedValidation;
+      onValidationChange?.(aggregatedValidation);
+    }
+  });
 
   const state: CheckboxGroupState = {
     value: selectedValues,
@@ -96,9 +141,59 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
         setValue(selectedValues.concat(value));
       }
     },
-    validationState: props.validationState,
-    isInvalid: props.isInvalid || props.validationState === 'invalid'
+    setInvalid(value, validation) {
+      setInvalidValues(invalidValues => {
+        let s = new Map(invalidValues);
+        if (validation.isInvalid) {
+          s.set(value, validation);
+        } else {
+          s.delete(value);
+        }
+
+        return s;
+      });
+    },
+    validationState: props.validationState ?? (isInvalid ? 'invalid' : null),
+    isInvalid,
+    groupValidationErrors,
+    isRequired,
+    validationErrors: aggregatedValidation.errors,
+    validationDetails: aggregatedValidation.validationDetails
   };
 
   return state;
 }
+
+function aggregateValidation(invalidValues: Map<string, ValidationResult>): ValidationResult {
+  let errors = new Set<string>();
+  let isInvalid = invalidValues.size > 0;
+  let validationDetails = {
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valueMissing: false,
+    valid: !isInvalid
+  };
+
+  for (let v of invalidValues.values()) {
+    for (let e of v.errors) {
+      errors.add(e);
+    }
+
+    // Only these properties apply for checkboxes.
+    validationDetails.valueMissing ||= v.validationDetails.valueMissing;
+    validationDetails.customError ||= v.validationDetails.customError;
+  }
+
+  return {
+    isInvalid,
+    errors: [...errors],
+    validationDetails
+  };
+}
diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts
index 7b7cc1310b0..eb1e84d0800 100644
--- a/packages/@react-types/checkbox/src/index.d.ts
+++ b/packages/@react-types/checkbox/src/index.d.ts
@@ -29,7 +29,7 @@ import {
 } from '@react-types/shared';
 import {ReactElement, ReactNode} from 'react';
 
-export interface ToggleProps extends InputBase, Validation, FocusableProps {
+export interface ToggleProps extends InputBase, Validation<boolean>, FocusableProps {
   /**
    * The label for the element.
    */
@@ -59,7 +59,7 @@ export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLab
   'aria-controls'?: string
 }
 
-export interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, LabelableProps, HelpTextProps, Validation {}
+export interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, LabelableProps, HelpTextProps, Validation<string[]> {}
 
 export interface CheckboxProps extends ToggleProps {
   /**
@@ -84,7 +84,7 @@ export interface SpectrumCheckboxProps extends AriaCheckboxProps, StyleProps {
   isEmphasized?: boolean
 }
 
-export interface SpectrumCheckboxGroupProps extends AriaCheckboxGroupProps, SpectrumLabelableProps, Validation, StyleProps, SpectrumHelpTextProps {
+export interface SpectrumCheckboxGroupProps extends AriaCheckboxGroupProps, SpectrumLabelableProps, Validation<string[]>, StyleProps, SpectrumHelpTextProps {
   /**
    * The Checkboxes contained within the CheckboxGroup.
    */
diff --git a/packages/@react-types/form/src/index.d.ts b/packages/@react-types/form/src/index.d.ts
index 57c117ee3a2..64260671f98 100644
--- a/packages/@react-types/form/src/index.d.ts
+++ b/packages/@react-types/form/src/index.d.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, SpectrumLabelableProps, StyleProps, ValidationState} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, SpectrumLabelableProps, StyleProps, ValidationErrors, ValidationState} from '@react-types/shared';
 import {FormEventHandler, ReactElement} from 'react';
 
 export interface SpectrumFormProps extends DOMProps, AriaLabelingProps, StyleProps, Omit<SpectrumLabelableProps, 'contextualHelp' | 'label'> {
@@ -31,6 +31,18 @@ export interface SpectrumFormProps extends DOMProps, AriaLabelingProps, StylePro
    * @default 'valid'
    */
   validationState?: ValidationState,
+  /**
+   * Whether to use native HTML form validation to prevent form submission
+   * when the value is missing or invalid, or mark the field as required
+   * or invalid via ARIA.
+   * @default 'aria'
+   */
+  validationBehavior?: 'aria' | 'native',
+  /**
+   * Validation errors for the form, typically returned by a server.
+   * This should be set to an object mapping from input names to errors.
+   */
+  validationErrors?: ValidationErrors,
   /**
    * Where to send the form-data when the form is submitted.
    */
diff --git a/packages/@react-types/shared/src/inputs.d.ts b/packages/@react-types/shared/src/inputs.d.ts
index 2e5a7fd053c..4b162d2c402 100644
--- a/packages/@react-types/shared/src/inputs.d.ts
+++ b/packages/@react-types/shared/src/inputs.d.ts
@@ -14,16 +14,46 @@ import {ReactNode} from 'react';
 
 export type ValidationState = 'valid' | 'invalid';
 
-export interface Validation {
+export type ValidationError = string | string[];
+export type ValidationErrors = Record<string, ValidationError>;
+
+export interface Validation<T> {
   /** Whether user input is required on the input before form submission. */
   isRequired?: boolean,
   /** Whether the input value is invalid. */
   isInvalid?: boolean,
   /** @deprecated Use `isInvalid` instead. */
-  validationState?: ValidationState
+  validationState?: ValidationState,
+  /**
+   * Whether to use native HTML form validation to prevent form submission
+   * when the value is missing or invalid, or mark the field as required
+   * or invalid via ARIA.
+   * @default 'aria'
+   */
+  validationBehavior?: 'aria' | 'native',
+  /**
+   * A function that returns an error message if a given value is invalid.
+   * Validation errors are displayed to the user when the form is submitted
+   * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+   * prop instead.
+   */
+  validate?: (value: T) => ValidationError | true | null | undefined,
+  /**
+   * Handler that is called when input validation changes.
+   */
+  onValidationChange?: (e: ValidationResult) => void
+}
+
+export interface ValidationResult {
+  /** Whether the input value is invalid. */
+  isInvalid: boolean,
+  /** The current error messages for the input if it is invalid, otherwise an empty array. */
+  errors: string[],
+  /** The native validation details for the input. */
+  validationDetails: ValidityState
 }
 
-export interface SpectrumFieldValidation extends Omit<Validation, 'isInvalid' | 'validationState'> {
+export interface SpectrumFieldValidation<T> extends Omit<Validation<T>, 'isInvalid' | 'validationState'> {
   /** Whether the input should display its "valid" or "invalid" visual styling. */
   validationState?: ValidationState
 }
@@ -78,7 +108,7 @@ export interface HelpTextProps {
   /** A description for the field. Provides a hint such as specific requirements for what to choose. */
   description?: ReactNode,
   /** An error message for the field. */
-  errorMessage?: ReactNode
+  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode)
 }
 
 // Spectrum specific types. Extends `Validation` so that the `validationState` prop is available.
diff --git a/packages/dev/test-utils/package.json b/packages/dev/test-utils/package.json
index 23cea905a17..b6389f737eb 100644
--- a/packages/dev/test-utils/package.json
+++ b/packages/dev/test-utils/package.json
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@react-aria/ssr": "^3.0.0",
+    "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0",
     "resolve": "^1.17.0"
   },
diff --git a/packages/dev/test-utils/src/index.ts b/packages/dev/test-utils/src/index.ts
index 19010e66919..e6fe237ceb3 100644
--- a/packages/dev/test-utils/src/index.ts
+++ b/packages/dev/test-utils/src/index.ts
@@ -18,3 +18,4 @@ export * from './renderOverride';
 export * from './StrictModeWrapper';
 export * from './mockImplementation';
 export * from './userEventMaps';
+export * from './validation';
diff --git a/packages/dev/test-utils/src/validation.ts b/packages/dev/test-utils/src/validation.ts
new file mode 100644
index 00000000000..adee7ada370
--- /dev/null
+++ b/packages/dev/test-utils/src/validation.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ValidationResult} from '@react-types/shared';
+
+export function createValidationResult(errors: string[], type: string = 'customError'): ValidationResult {
+  let validationDetails = {
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valueMissing: false,
+    valid: errors.length === 0
+  };
+
+  if (!validationDetails.valid) {
+    validationDetails[type] = true;
+  }
+
+  return {
+    isInvalid: errors.length > 0,
+    errors,
+    validationDetails
+  };
+}

From 9198faaafbf402cce73899d1d94c5ed1ec2af884 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 14 Oct 2023 12:24:22 -0700
Subject: [PATCH 02/38] radio

---
 packages/@react-aria/radio/src/useRadio.ts    |  24 +-
 .../@react-aria/radio/src/useRadioGroup.ts    |  27 ++-
 packages/@react-aria/radio/src/utils.ts       |  11 +-
 .../utils/src/useFormValidation.ts            |  68 ++----
 .../@react-spectrum/radio/src/RadioGroup.tsx  |   6 +-
 .../@react-spectrum/radio/test/Radio.test.js  | 217 +++++++++++++++++-
 .../checkbox/src/useCheckboxGroupState.ts     |  24 +-
 .../radio/src/useRadioGroupState.ts           |  44 +++-
 packages/@react-stately/utils/package.json    |   1 +
 packages/@react-stately/utils/src/index.ts    |   1 +
 .../@react-stately/utils/src/validation.ts    |  58 +++++
 packages/@react-types/radio/src/index.d.ts    |   2 +-
 12 files changed, 378 insertions(+), 105 deletions(-)
 create mode 100644 packages/@react-stately/utils/src/validation.ts

diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts
index 2001be344fb..7db653f661f 100644
--- a/packages/@react-aria/radio/src/useRadio.ts
+++ b/packages/@react-aria/radio/src/useRadio.ts
@@ -11,9 +11,9 @@
  */
 
 import {AriaRadioProps} from '@react-types/radio';
-import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
-import {InputHTMLAttributes, RefObject} from 'react';
-import {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';
+import {filterDOMProps, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
+import {InputHTMLAttributes, RefObject, useCallback} from 'react';
+import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {useFocusable} from '@react-aria/focus';
 import {usePress} from '@react-aria/interactions';
@@ -80,22 +80,34 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
     tabIndex = undefined;
   }
 
+  let {name, descriptionId, errorMessageId, validationBehavior} = radioGroupData.get(state)!;
+
+  useFormValidation({
+    name,
+    validationBehavior,
+    validate: useCallback(() => state.groupValidationErrors, [state.groupValidationErrors]),
+    onValidationChange(e) {
+      state.setValidation(e);
+    }
+  }, state.selectedValue, ref);
+
   useFormReset(ref, state.selectedValue, state.setSelectedValue);
 
   return {
     inputProps: mergeProps(domProps, {
       ...interactions,
       type: 'radio',
-      name: radioGroupNames.get(state),
+      name,
       tabIndex,
       disabled: isDisabled,
+      required: state.isRequired && validationBehavior === 'native',
       checked,
       value,
       onChange,
       'aria-describedby': [
         props['aria-describedby'],
-        state.isInvalid ? radioGroupErrorMessageIds.get(state) : null,
-        radioGroupDescriptionIds.get(state)
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(' ') || undefined
     }),
     isDisabled,
diff --git a/packages/@react-aria/radio/src/useRadioGroup.ts b/packages/@react-aria/radio/src/useRadioGroup.ts
index 0986a9f78df..cb246699339 100644
--- a/packages/@react-aria/radio/src/useRadioGroup.ts
+++ b/packages/@react-aria/radio/src/useRadioGroup.ts
@@ -11,16 +11,16 @@
  */
 
 import {AriaRadioGroupProps} from '@react-types/radio';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {getFocusableTreeWalker} from '@react-aria/focus';
-import {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';
+import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 
-export interface RadioGroupAria {
+export interface RadioGroupAria extends ValidationResult {
   /** Props for the radio group wrapper element. */
   radioGroupProps: DOMAttributes,
   /** Props for the radio group's visible label (if any). */
@@ -43,7 +43,8 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     isReadOnly,
     isRequired,
     isDisabled,
-    orientation = 'vertical'
+    orientation = 'vertical',
+    validationBehavior = 'aria'
   } = props;
   let {direction} = useLocale();
 
@@ -51,10 +52,10 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     ...props,
     // Radio group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid: state.isInvalid,
+    errorMessage: props.errorMessage || state.validationErrors
   });
-  radioGroupDescriptionIds.set(state, descriptionProps.id);
-  radioGroupErrorMessageIds.set(state, errorMessageProps.id);
 
   let domProps = filterDOMProps(props, {labelable: true});
 
@@ -119,7 +120,12 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
   };
 
   let groupName = useId(name);
-  radioGroupNames.set(state, groupName);
+  radioGroupData.set(state, {
+    name: groupName,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
 
   return {
     radioGroupProps: mergeProps(domProps, {
@@ -137,6 +143,9 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     }),
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid: state.isInvalid,
+    errors: state.validationErrors,
+    validationDetails: state.validationDetails
   };
 }
diff --git a/packages/@react-aria/radio/src/utils.ts b/packages/@react-aria/radio/src/utils.ts
index 697d7965811..97d00e67aa5 100644
--- a/packages/@react-aria/radio/src/utils.ts
+++ b/packages/@react-aria/radio/src/utils.ts
@@ -12,6 +12,11 @@
 
 import {RadioGroupState} from '@react-stately/radio';
 
-export const radioGroupNames = new WeakMap<RadioGroupState, string>();
-export const radioGroupDescriptionIds = new WeakMap<RadioGroupState, string>();
-export const radioGroupErrorMessageIds = new WeakMap<RadioGroupState, string>();
+interface RadioGroupData {
+  name: string,
+  descriptionId: string,
+  errorMessageId: string,
+  validationBehavior: 'aria' | 'native'
+}
+
+export const radioGroupData = new WeakMap<RadioGroupState, RadioGroupData>();
diff --git a/packages/@react-aria/utils/src/useFormValidation.ts b/packages/@react-aria/utils/src/useFormValidation.ts
index 3bc5ae7a351..2e0dba3b936 100644
--- a/packages/@react-aria/utils/src/useFormValidation.ts
+++ b/packages/@react-aria/utils/src/useFormValidation.ts
@@ -11,6 +11,7 @@
  */
 
 import {createContext, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {CUSTOM_VALIDITY_STATE, isEqualValidation, useValidate, VALID_VALIDITY_STATE} from '@react-stately/utils';
 import {useEffectEvent} from './useEffectEvent';
 import {Validation, ValidationErrors, ValidationResult} from '@react-types/shared';
 
@@ -34,26 +35,16 @@ export function useFormValidation<T>(props: FormValidationProps<T>, value: T, re
   let controlledError: ValidationResult | null = isInvalid ? {
     isInvalid: true,
     errors: [],
-    validationDetails: CUSTOM_VALIDATION_DETAILS
+    validationDetails: CUSTOM_VALIDITY_STATE
   } : null;
 
   // Perform custom client side validation.
-  let clientErrors = useMemo(() => {
-    if (typeof validate === 'function') {
-      let error = validate(value);
-      if (error && typeof error !== 'boolean') {
-        return Array.isArray(error) ? error : [error];
-      }
-    }
-
-    return [];
-  }, [value, validate]);
-
+  let clientErrors = useValidate(validate, value);
   let clientError: ValidationResult | null = useMemo(() => {
     return clientErrors.length ? {
       isInvalid: true,
       errors: clientErrors,
-      validationDetails: CUSTOM_VALIDATION_DETAILS
+      validationDetails: CUSTOM_VALIDITY_STATE
     } : null;
   }, [clientErrors]);
 
@@ -97,7 +88,7 @@ export function useFormValidation<T>(props: FormValidationProps<T>, value: T, re
     return serverErrorMessages.length && !isServerErrorCleared ? {
       isInvalid: true,
       errors: serverErrorMessages,
-      validationDetails: CUSTOM_VALIDATION_DETAILS
+      validationDetails: CUSTOM_VALIDITY_STATE
     } : null;
   }, [isServerErrorCleared, serverErrorMessages]);
 
@@ -128,7 +119,7 @@ export function useFormValidation<T>(props: FormValidationProps<T>, value: T, re
       }
     } else {
       let e = serverError || clientError || DEFAULT_VALIDITY;
-      if (e !== lastError.current) {
+      if (!controlledError && e !== lastError.current) {
         lastError.current = e;
         onValidationChange?.(e);
       }
@@ -138,10 +129,12 @@ export function useFormValidation<T>(props: FormValidationProps<T>, value: T, re
   // Track native element validity for built in validation (e.g. required).
   let [nativeValidity, setNativeValidity] = useState(DEFAULT_VALIDITY);
   let updateNativeValidity = e => {
-    // Use serverError/clientError if set so we get the original (separate) error messages.
-    e = serverError || clientError || e;
-    setNativeValidity(e);
-    onValidationChange?.(e);
+    if (!controlledError) {
+      // Use serverError/clientError if set so we get the original (separate) error messages.
+      e = serverError || clientError || e;
+      setNativeValidity(e);
+      onValidationChange?.(e);
+    }
   };
 
   useInputValidity(validationBehavior === 'native' ? ref : null, updateNativeValidity);
@@ -153,29 +146,9 @@ export function useFormValidation<T>(props: FormValidationProps<T>, value: T, re
   }
 }
 
-const DEFAULT_VALIDATION_DETAILS: ValidityState = {
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valueMissing: false,
-  valid: true
-};
-
-const CUSTOM_VALIDATION_DETAILS: ValidityState = {
-  ...DEFAULT_VALIDATION_DETAILS,
-  customError: true,
-  valid: false
-};
-
 const DEFAULT_VALIDITY: ValidationResult = {
   isInvalid: false,
-  validationDetails: DEFAULT_VALIDATION_DETAILS,
+  validationDetails: VALID_VALIDITY_STATE,
   errors: []
 };
 
@@ -198,16 +171,6 @@ function getValidity(input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectE
   };
 }
 
-function isEqual(a: ValidityState, b: ValidityState) {
-  for (let key in a) {
-    if (b[key] !== a[key]) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
 function useInputValidity(
   inputRef: RefObject<ValidatableElement> | null,
   onValidationChange?: (value: ValidationResult) => void
@@ -215,10 +178,7 @@ function useInputValidity(
   let validation = useRef(DEFAULT_VALIDITY);
   let updateValidation = useEffectEvent((newValidation: ValidationResult) => {
     // Ignore duplicate events.
-    if (
-      validation.current.errors[0] === newValidation.errors[0] &&
-      isEqual(validation.current.validationDetails, newValidation.validationDetails)
-    ) {
+    if (isEqualValidation(validation.current, newValidation)) {
       return;
     }
 
diff --git a/packages/@react-spectrum/radio/src/RadioGroup.tsx b/packages/@react-spectrum/radio/src/RadioGroup.tsx
index dbb25b58158..9e274cf8d23 100644
--- a/packages/@react-spectrum/radio/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/radio/src/RadioGroup.tsx
@@ -33,16 +33,14 @@ function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
 
   let domRef = useDOMRef(ref);
   let state = useRadioGroupState(props);
-  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps} = useRadioGroup(props, state);
+  let {radioGroupProps, ...otherProps} = useRadioGroup(props, state);
 
   return (
     <Field
       {...props}
+      {...otherProps}
       ref={domRef}
       wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}
-      labelProps={labelProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
       elementType="span">
       <div
         {...radioGroupProps}
diff --git a/packages/@react-spectrum/radio/test/Radio.test.js b/packages/@react-spectrum/radio/test/Radio.test.js
index c28c9084138..22e38d3dbd5 100644
--- a/packages/@react-spectrum/radio/test/Radio.test.js
+++ b/packages/@react-spectrum/radio/test/Radio.test.js
@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, pointerMap, render} from '@react-spectrum/test-utils';
+import {act, createValidationResult, pointerMap, render} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
+import {Form} from '@react-spectrum/form';
 import {Provider} from '@react-spectrum/provider';
 import {Radio, RadioGroup} from '../';
 import React from 'react';
@@ -678,4 +679,218 @@ describe('Radios', function () {
       }
     });
   });
+
+  describe('validation', () => {
+    describe('validationBehavior=native', () => {
+      it('supports isRequired', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <RadioGroup aria-label="favorite pet" isRequired validationBehavior="native" onValidationChange={onValidationChange}>
+                <Radio value="dogs">Dogs</Radio>
+                <Radio value="cats">Cats</Radio>
+                <Radio value="dragons">Dragons</Radio>
+              </RadioGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('radiogroup');
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let radios = getAllByRole('radio');
+        for (let input of radios) {
+          expect(input).toHaveAttribute('required');
+          expect(input).not.toHaveAttribute('aria-required');
+          expect(input.validity.valid).toBe(false);
+        }
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.click(radios[0]);
+        for (let input of radios) {
+          expect(input.validity.valid).toBe(true);
+        }
+
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <RadioGroup aria-label="favorite pet" defaultValue="dragons" validationBehavior="native" validate={v => v === 'dragons' ? 'Too scary' : null} onValidationChange={onValidationChange}>
+                <Radio value="dogs">Dogs</Radio>
+                <Radio value="cats">Cats</Radio>
+                <Radio value="dragons">Dragons</Radio>
+              </RadioGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('radiogroup');
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        let radios = getAllByRole('radio');
+        for (let input of radios) {
+          expect(input).not.toHaveAttribute('required');
+          expect(input).not.toHaveAttribute('aria-required');
+          expect(input.validity.valid).toBe(false);
+        }
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Too scary']));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent(['Too scary']);
+
+        await user.click(radios[0]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        for (let input of radios) {
+          expect(input.validity.valid).toBe(true);
+        }
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        function Test() {
+          let [serverErrors, setServerErrors] = React.useState({});
+          let onSubmit = e => {
+            e.preventDefault();
+            setServerErrors({
+              pet: 'You must choose a pet.'
+            });
+          };
+
+          return (
+            <Provider theme={theme}>
+              <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                <RadioGroup aria-label="favorite pet" name="pet" validationBehavior="native">
+                  <Radio value="dogs">Dogs</Radio>
+                  <Radio value="cats">Cats</Radio>
+                  <Radio value="dragons">Dragons</Radio>
+                </RadioGroup>
+                <Button type="submit">Submit</Button>
+              </Form>
+            </Provider>
+          );
+        }
+
+        let {getAllByRole, getByRole} = render(<Test />);
+
+        let group = getByRole('radiogroup');
+        expect(group).not.toHaveAttribute('aria-describedby');
+
+        await user.click(getByRole('button'));
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must choose a pet.');
+
+        let radios = getAllByRole('radio');
+        for (let input of radios) {
+          expect(input.validity.valid).toBe(false);
+        }
+
+        await user.click(radios[0]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        for (let input of radios) {
+          expect(input.validity.valid).toBe(true);
+        }
+      });
+
+      it('supports customizing native error messages', async () => {
+        let {getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <RadioGroup aria-label="favorite pet" name="pet" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please select a pet' : null}>
+                <Radio value="dogs">Dogs</Radio>
+                <Radio value="cats">Cats</Radio>
+                <Radio value="dragons">Dragons</Radio>
+              </RadioGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('radiogroup');
+        expect(group).not.toHaveAttribute('aria-describedby');
+
+        act(() => getByTestId('form').checkValidity());
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please select a pet');
+      });
+    });
+
+    describe('validationBehavior=aria', () => {
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getAllByRole, getByRole} = render(
+          <Provider theme={theme}>
+            <RadioGroup aria-label="favorite pet" defaultValue="dragons" validate={v => v === 'dragons' ? 'Too scary' : null} onValidationChange={onValidationChange}>
+              <Radio value="dogs">Dogs</Radio>
+              <Radio value="cats">Cats</Radio>
+              <Radio value="dragons">Dragons</Radio>
+            </RadioGroup>
+          </Provider>
+        );
+
+        let group = getByRole('radiogroup');
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(group).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Too scary');
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Too scary']));
+
+        let radios = getAllByRole('radio');
+        for (let input of radios) {
+          expect(input.validity.valid).toBe(true);
+        }
+
+        await user.click(radios[0]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(group).not.toHaveAttribute('aria-invalid');
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        let {getAllByRole, getByRole} = render(
+          <Provider theme={theme}>
+            <Form validationErrors={{pet: 'You must choose a pet'}}>
+              <RadioGroup aria-label="favorite pet" name="pet">
+                <Radio value="dogs">Dogs</Radio>
+                <Radio value="cats">Cats</Radio>
+                <Radio value="dragons">Dragons</Radio>
+              </RadioGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('radiogroup');
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(group).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must choose a pet');
+
+        let radios = getAllByRole('radio');
+
+        await user.click(radios[0]);
+        expect(group).not.toHaveAttribute('aria-describedby');
+        expect(group).not.toHaveAttribute('aria-invalid');
+      });
+    });
+  });
 });
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index c0c92833cb4..1318e202d53 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -11,7 +11,7 @@
  */
 
 import {CheckboxGroupProps} from '@react-types/checkbox';
-import {useControlledState} from '@react-stately/utils';
+import {useControlledState, useValidate, VALID_VALIDITY_STATE} from '@react-stately/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {ValidationResult, ValidationState} from '@react-types/shared';
 
@@ -78,16 +78,7 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
   let isRequired = props.isRequired && selectedValues.length === 0;
 
   let {validate, onValidationChange} = props;
-  let groupValidationErrors = useMemo(() => {
-    if (typeof validate === 'function') {
-      let e = validate(selectedValues);
-      if (e && typeof e !== 'boolean') {
-        return Array.isArray(e) ? e : [e];
-      }
-    }
-
-    return [];
-  }, [validate, selectedValues]);
+  let groupValidationErrors = useValidate(validate, selectedValues);
 
   // Aggregate errors from all invalid checkboxes for checkbox group level validation.
   let aggregatedValidation = useMemo(() => aggregateValidation(invalidValues), [invalidValues]);
@@ -168,16 +159,7 @@ function aggregateValidation(invalidValues: Map<string, ValidationResult>): Vali
   let errors = new Set<string>();
   let isInvalid = invalidValues.size > 0;
   let validationDetails = {
-    badInput: false,
-    customError: false,
-    patternMismatch: false,
-    rangeOverflow: false,
-    rangeUnderflow: false,
-    stepMismatch: false,
-    tooLong: false,
-    tooShort: false,
-    typeMismatch: false,
-    valueMissing: false,
+    ...VALID_VALIDITY_STATE,
     valid: !isInvalid
   };
 
diff --git a/packages/@react-stately/radio/src/useRadioGroupState.ts b/packages/@react-stately/radio/src/useRadioGroupState.ts
index 6fb6014e3a8..a17ded4435d 100644
--- a/packages/@react-stately/radio/src/useRadioGroupState.ts
+++ b/packages/@react-stately/radio/src/useRadioGroupState.ts
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {isEqualValidation, useControlledState, useValidate, VALID_VALIDITY_STATE} from '@react-stately/utils';
 import {RadioGroupProps} from '@react-types/radio';
-import {useControlledState} from '@react-stately/utils';
-import {useMemo, useState} from 'react';
-import {ValidationState} from '@react-types/shared';
+import {useMemo, useRef, useState} from 'react';
+import {ValidationResult, ValidationState} from '@react-types/shared';
 
 export interface RadioGroupState {
   /**
@@ -41,6 +41,15 @@ export interface RadioGroupState {
   /** Whether the radio group is invalid. */
   readonly isInvalid: boolean,
 
+  /** A list of group level validation error messages resulting from the `validate` prop. */
+  readonly groupValidationErrors: string[],
+
+  /** The error messages for the radio group. */
+  readonly validationErrors: string[],
+
+  /** The validation details for the radio group. */
+  readonly validationDetails: ValidityState,
+
   /** The currently selected value. */
   readonly selectedValue: string | null | undefined,
 
@@ -51,7 +60,9 @@ export interface RadioGroupState {
   readonly lastFocusedValue: string | null,
 
   /** Sets the last focused value. */
-  setLastFocusedValue(value: string): void
+  setLastFocusedValue(value: string): void,
+
+  setValidation(validation: ValidationResult): void
 }
 
 let instance = Math.round(Math.random() * 10000000000);
@@ -66,6 +77,11 @@ export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
   let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);
   let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue, props.onChange);
   let [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
+  let [validation, setValidation] = useState({
+    isInvalid: false,
+    errors: [],
+    validationDetails: VALID_VALIDITY_STATE
+  });
 
   let setSelectedValue = (value) => {
     if (!props.isReadOnly && !props.isDisabled) {
@@ -73,6 +89,11 @@ export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
     }
   };
 
+  let {validate, onValidationChange} = props;
+  let groupValidationErrors = useValidate(validate, selectedValue);
+  let isInvalid = props.isInvalid || props.validationState === 'invalid' || validation.isInvalid;
+  let lastValidation = useRef(validation);
+
   return {
     name,
     selectedValue: selectedValue,
@@ -82,7 +103,18 @@ export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
     isDisabled: props.isDisabled || false,
     isReadOnly: props.isReadOnly || false,
     isRequired: props.isRequired || false,
-    validationState: props.validationState || null,
-    isInvalid: props.isInvalid || props.validationState === 'invalid'
+    validationState: props.validationState || (isInvalid ? 'invalid' : null),
+    isInvalid,
+    groupValidationErrors,
+    validationErrors: validation.errors,
+    validationDetails: validation.validationDetails,
+    setValidation(e) {
+      if (!isEqualValidation(lastValidation.current, e)) {
+        lastValidation.current = e;
+        setValidation(e);
+        onValidationChange?.(e);
+        return e;
+      }
+    }
   };
 }
diff --git a/packages/@react-stately/utils/package.json b/packages/@react-stately/utils/package.json
index a2edf4835a8..dab9c171c9a 100644
--- a/packages/@react-stately/utils/package.json
+++ b/packages/@react-stately/utils/package.json
@@ -25,6 +25,7 @@
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "dependencies": {
+    "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0"
   },
   "publishConfig": {
diff --git a/packages/@react-stately/utils/src/index.ts b/packages/@react-stately/utils/src/index.ts
index ff98cc62647..f43971ecf6a 100644
--- a/packages/@react-stately/utils/src/index.ts
+++ b/packages/@react-stately/utils/src/index.ts
@@ -11,3 +11,4 @@
  */
 export {useControlledState} from './useControlledState';
 export {clamp, snapValueToStep, toFixedNumber} from './number';
+export {VALID_VALIDITY_STATE, CUSTOM_VALIDITY_STATE, isEqualValidation, useValidate} from './validation';
diff --git a/packages/@react-stately/utils/src/validation.ts b/packages/@react-stately/utils/src/validation.ts
new file mode 100644
index 00000000000..7f1afb48081
--- /dev/null
+++ b/packages/@react-stately/utils/src/validation.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {useMemo} from 'react';
+import {ValidationFunction, ValidationResult} from '@react-types/shared';
+
+export const VALID_VALIDITY_STATE: ValidityState = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+
+export const CUSTOM_VALIDITY_STATE: ValidityState = {
+  ...VALID_VALIDITY_STATE,
+  customError: true,
+  valid: false
+};
+
+export function isEqualValidation(a: ValidationResult, b: ValidationResult): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  return a.isInvalid === b.isInvalid
+    && a.errors.length === b.errors.length
+    && a.errors.every((a, i) => a === b.errors[i])
+    && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
+
+export function useValidate<T>(validate: ValidationFunction<T>, value: T): string[] {
+  return useMemo(() => {
+    if (typeof validate === 'function') {
+      let e = validate(value);
+      if (e && typeof e !== 'boolean') {
+        return Array.isArray(e) ? e : [e];
+      }
+    }
+
+    return [];
+  }, [validate, value]);
+}
diff --git a/packages/@react-types/radio/src/index.d.ts b/packages/@react-types/radio/src/index.d.ts
index b7312adb0b3..fe6e2184bfe 100644
--- a/packages/@react-types/radio/src/index.d.ts
+++ b/packages/@react-types/radio/src/index.d.ts
@@ -28,7 +28,7 @@ import {
 } from '@react-types/shared';
 import {ReactElement, ReactNode} from 'react';
 
-export interface RadioGroupProps extends ValueBase<string>, InputBase, InputDOMProps, Validation, LabelableProps, HelpTextProps {
+export interface RadioGroupProps extends ValueBase<string>, InputBase, InputDOMProps, Validation<string>, LabelableProps, HelpTextProps {
   /**
    * The axis the Radio Button(s) should align with.
    * @default 'vertical'

From 8ca7b641c7663ddb13210d12601b3bf6e65ed275 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 16 Oct 2023 10:45:47 -0700
Subject: [PATCH 03/38] Text fields

---
 .../searchfield/src/useSearchField.ts         |   9 +-
 packages/@react-aria/textfield/package.json   |   1 +
 .../textfield/src/useFormattedTextField.ts    |   5 +-
 .../@react-aria/textfield/src/useTextField.ts |  38 +--
 .../@react-spectrum/searchfield/package.json  |   1 +
 .../searchfield/src/SearchField.tsx           |  16 +-
 .../@react-spectrum/textfield/package.json    |   1 +
 .../textfield/src/TextArea.tsx                |   9 +-
 .../textfield/src/TextField.tsx               |   9 +-
 .../textfield/src/TextFieldBase.tsx           |   6 +-
 .../textfield/test/TextField.test.js          | 218 +++++++++++++++++-
 .../@react-types/textfield/src/index.d.ts     |   4 +-
 12 files changed, 272 insertions(+), 45 deletions(-)

diff --git a/packages/@react-aria/searchfield/src/useSearchField.ts b/packages/@react-aria/searchfield/src/useSearchField.ts
index 0e8ac480526..4c07b31c1c6 100644
--- a/packages/@react-aria/searchfield/src/useSearchField.ts
+++ b/packages/@react-aria/searchfield/src/useSearchField.ts
@@ -13,7 +13,7 @@
 import {AriaButtonProps} from '@react-types/button';
 import {AriaSearchFieldProps} from '@react-types/searchfield';
 import {chain} from '@react-aria/utils';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
 import {InputHTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -21,7 +21,7 @@ import {SearchFieldState} from '@react-stately/searchfield';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useTextField} from '@react-aria/textfield';
 
-export interface SearchFieldAria {
+export interface SearchFieldAria extends ValidationResult {
   /** Props for the text field's visible label element (if any). */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
@@ -91,7 +91,7 @@ export function useSearchField(
     inputRef.current.focus();
   };
 
-  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
+  let {labelProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTextField({
     ...props,
     value: state.value,
     onChange: state.setValue,
@@ -116,6 +116,7 @@ export function useSearchField(
       onPressStart
     },
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    ...validation
   };
 }
diff --git a/packages/@react-aria/textfield/package.json b/packages/@react-aria/textfield/package.json
index cfe73588e3d..585a1ce7036 100644
--- a/packages/@react-aria/textfield/package.json
+++ b/packages/@react-aria/textfield/package.json
@@ -25,6 +25,7 @@
     "@react-aria/focus": "^3.14.2",
     "@react-aria/label": "^3.7.1",
     "@react-aria/utils": "^3.21.0",
+    "@react-stately/utils": "^3.8.0",
     "@react-types/shared": "^3.21.0",
     "@react-types/textfield": "^3.8.1",
     "@swc/helpers": "^0.5.0"
diff --git a/packages/@react-aria/textfield/src/useFormattedTextField.ts b/packages/@react-aria/textfield/src/useFormattedTextField.ts
index d4cb134f126..c607ea17a29 100644
--- a/packages/@react-aria/textfield/src/useFormattedTextField.ts
+++ b/packages/@react-aria/textfield/src/useFormattedTextField.ts
@@ -113,7 +113,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
     }
     : null;
 
-  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);
+  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);
 
   let compositionStartState = useRef(null);
   return {
@@ -151,6 +151,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
     ),
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    ...validation
   };
 }
diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
index bb01bbf52ad..653eec45b0a 100644
--- a/packages/@react-aria/textfield/src/useTextField.ts
+++ b/packages/@react-aria/textfield/src/useTextField.ts
@@ -19,8 +19,9 @@ import {
   ReactDOM,
   RefObject
 } from 'react';
-import {DOMAttributes} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
+import {DOMAttributes, ValidationResult} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
+import {useControlledState} from '@react-stately/utils';
 import {useField} from '@react-aria/label';
 import {useFocusable} from '@react-aria/focus';
 
@@ -85,7 +86,7 @@ export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> exte
  */
 type TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T]>;
 
-export interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {
+export interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {
   /** Props for the input element. */
   inputProps: TextFieldInputProps<T>,
   /** Props for the text field's visible label element, if any. */
@@ -110,15 +111,17 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     isDisabled = false,
     isRequired = false,
     isReadOnly = false,
-    validationState,
-    isInvalid = false,
     type = 'text',
-    value,
-    defaultValue,
-    onChange = () => {}
+    validationBehavior = 'aria'
   }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;
+  let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);
   let {focusableProps} = useFocusable(props, ref);
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);
+  let {isInvalid, errors, validationDetails} = useFormValidation(props, value, ref);
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
+    ...props,
+    isInvalid,
+    errorMessage: errors
+  });
   let domProps = filterDOMProps(props, {labelable: true});
 
   const inputOnlyProps = {
@@ -126,7 +129,7 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     pattern: props.pattern
   };
 
-  useFormReset(ref, value ?? defaultValue ?? '', onChange);
+  useFormReset(ref, value, setValue);
 
   return {
     labelProps,
@@ -136,15 +139,15 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
       {
         disabled: isDisabled,
         readOnly: isReadOnly,
-        'aria-required': isRequired || undefined,
-        'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
+        required: isRequired && validationBehavior === 'native',
+        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+        'aria-invalid': isInvalid || undefined,
         'aria-errormessage': props['aria-errormessage'],
         'aria-activedescendant': props['aria-activedescendant'],
         'aria-autocomplete': props['aria-autocomplete'],
         'aria-haspopup': props['aria-haspopup'],
-        value: props.value,
-        defaultValue: props.value ? undefined : props.defaultValue,
-        onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
+        value,
+        onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),
         autoComplete: props.autoComplete,
         maxLength: props.maxLength,
         minLength: props.minLength,
@@ -173,6 +176,9 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
       }
     ),
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-spectrum/searchfield/package.json b/packages/@react-spectrum/searchfield/package.json
index 1ed8c2bcfc2..f0cfc1d54b3 100644
--- a/packages/@react-spectrum/searchfield/package.json
+++ b/packages/@react-spectrum/searchfield/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@react-aria/searchfield": "^3.5.6",
     "@react-spectrum/button": "^3.14.0",
+    "@react-spectrum/form": "^3.6.6",
     "@react-spectrum/textfield": "^3.10.6",
     "@react-spectrum/utils": "^3.11.0",
     "@react-stately/searchfield": "^3.4.6",
diff --git a/packages/@react-spectrum/searchfield/src/SearchField.tsx b/packages/@react-spectrum/searchfield/src/SearchField.tsx
index 0d6eb17f525..2aba34eb0d4 100644
--- a/packages/@react-spectrum/searchfield/src/SearchField.tsx
+++ b/packages/@react-spectrum/searchfield/src/SearchField.tsx
@@ -18,6 +18,7 @@ import {SpectrumSearchFieldProps} from '@react-types/searchfield';
 import styles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
 import {TextFieldRef} from '@react-types/textfield';
+import {useFormProps} from '@react-spectrum/form';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useSearchField} from '@react-aria/searchfield';
 import {useSearchFieldState} from '@react-stately/searchfield';
@@ -25,6 +26,7 @@ import {useSearchFieldState} from '@react-stately/searchfield';
 function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRef>) {
   props = useSlotProps(props, 'searchfield');
   props = useProviderProps(props);
+  props = useFormProps(props);
   let defaultIcon = (
     <Magnifier data-testid="searchicon" />
   );
@@ -43,7 +45,7 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
 
   let state = useSearchFieldState(props);
   let inputRef = useRef<HTMLInputElement>();
-  let {labelProps, inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField(props, state, inputRef);
+  let {clearButtonProps, ...result} = useSearchField(props, state, inputRef);
 
   let clearButton = (
     <ClearButton
@@ -58,13 +60,13 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
       isDisabled={isDisabled} />
   );
 
+  let validationState = props.validationState || (result.isInvalid ? 'invalid' : null);
+
   return (
     <TextFieldBase
       {...otherProps}
-      labelProps={labelProps}
-      inputProps={inputProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
+      {...result}
+      validationState={validationState}
       UNSAFE_className={
         classNames(
           styles,
@@ -73,8 +75,8 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
           {
             'is-disabled': isDisabled,
             'is-quiet': props.isQuiet,
-            'spectrum-Search--invalid': props.validationState === 'invalid' && !isDisabled,
-            'spectrum-Search--valid': props.validationState === 'valid' && !isDisabled
+            'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
+            'spectrum-Search--valid': validationState === 'valid' && !isDisabled
           },
           UNSAFE_className
         )
diff --git a/packages/@react-spectrum/textfield/package.json b/packages/@react-spectrum/textfield/package.json
index ad0e5315929..6eafc868167 100644
--- a/packages/@react-spectrum/textfield/package.json
+++ b/packages/@react-spectrum/textfield/package.json
@@ -41,6 +41,7 @@
     "@react-aria/interactions": "^3.19.0",
     "@react-aria/textfield": "^3.12.1",
     "@react-aria/utils": "^3.21.0",
+    "@react-spectrum/form": "^3.6.6",
     "@react-spectrum/label": "^3.15.0",
     "@react-spectrum/utils": "^3.11.0",
     "@react-stately/utils": "^3.8.0",
diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx
index 99d88f36f32..0a391539bb3 100644
--- a/packages/@react-spectrum/textfield/src/TextArea.tsx
+++ b/packages/@react-spectrum/textfield/src/TextArea.tsx
@@ -15,11 +15,13 @@ import React, {Ref, useCallback, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import {TextFieldBase} from './TextFieldBase';
 import {useControlledState} from '@react-stately/utils';
+import {useFormProps} from '@react-spectrum/form';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useTextField} from '@react-aria/textfield';
 
 function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     isDisabled = false,
     isQuiet = false,
@@ -66,7 +68,7 @@ function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
     console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
   }
 
-  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
+  let result = useTextField({
     ...props,
     onChange: chain(onChange, setInputValue),
     inputElementType: 'textarea'
@@ -77,10 +79,7 @@ function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
       {...otherProps}
       ref={ref}
       inputRef={inputRef}
-      labelProps={labelProps}
-      inputProps={inputProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
+      {...result}
       multiLine
       isDisabled={isDisabled}
       isQuiet={isQuiet}
diff --git a/packages/@react-spectrum/textfield/src/TextField.tsx b/packages/@react-spectrum/textfield/src/TextField.tsx
index 2afb90e6de2..327b9a7e5d1 100644
--- a/packages/@react-spectrum/textfield/src/TextField.tsx
+++ b/packages/@react-spectrum/textfield/src/TextField.tsx
@@ -13,14 +13,16 @@
 import React, {forwardRef, Ref, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import {TextFieldBase} from './TextFieldBase';
+import {useFormProps} from '@react-spectrum/form';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useTextField} from '@react-aria/textfield';
 
 function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
 
   let inputRef = useRef<HTMLInputElement>(null);
-  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);
+  let result = useTextField(props, inputRef);
 
   if (props.placeholder) {
     console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
@@ -29,10 +31,7 @@ function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   return (
     <TextFieldBase
       {...props}
-      labelProps={labelProps}
-      inputProps={inputProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
+      {...result}
       ref={ref}
       inputRef={inputRef} />
   );
diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
index 5a21832db0e..b94ca17f322 100644
--- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
+++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
@@ -15,14 +15,14 @@ import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, createFocusableRef} from '@react-spectrum/utils';
 import {Field} from '@react-spectrum/label';
 import {mergeProps} from '@react-aria/utils';
-import {PressEvents} from '@react-types/shared';
+import {PressEvents, ValidationResult} from '@react-types/shared';
 import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 import {useHover} from '@react-aria/interactions';
 
-interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {
+interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {
   wrapperChildren?: ReactElement | ReactElement[],
   inputClassName?: string,
   validationIconClassName?: string,
@@ -39,7 +39,7 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, P
 
 function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
   let {
-    validationState,
+    validationState = props.isInvalid ? 'invalid' : null,
     icon,
     isQuiet = false,
     isDisabled,
diff --git a/packages/@react-spectrum/textfield/test/TextField.test.js b/packages/@react-spectrum/textfield/test/TextField.test.js
index a724f54efe6..3a5487fa118 100644
--- a/packages/@react-spectrum/textfield/test/TextField.test.js
+++ b/packages/@react-spectrum/textfield/test/TextField.test.js
@@ -10,11 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, pointerMap, render, waitFor} from '@react-spectrum/test-utils';
+import {act, createValidationResult, fireEvent, pointerMap, render, waitFor} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
 import Checkmark from '@spectrum-icons/workflow/Checkmark';
+import {Form} from '@react-spectrum/form';
+import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {TextArea, TextField} from '../';
+import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
 let testId = 'test-id';
@@ -470,4 +474,216 @@ describe('Shared TextField behavior', () => {
     await user.click(button);
     expect(input).toHaveValue('Devon');
   });
+
+  describe('validation', () => {
+    describe('validationBehavior=native', () => {
+      it.each`
+        Name                | Component
+        ${'v3 TextField'}   | ${TextField}
+        ${'v3 TextArea'}    | ${TextArea}
+        ${'v3 SearchField'} | ${SearchField}
+      `('$Name supports isRequired', async ({Component}) => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <Component data-testid="input" label="Name" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('required');
+        expect(input).not.toHaveAttribute('aria-required');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.tab();
+        await user.keyboard('Devon');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it.each`
+        Name                | Component
+        ${'v3 TextField'}   | ${TextField}
+        ${'v3 TextArea'}    | ${TextArea}
+        ${'v3 SearchField'} | ${SearchField}
+      `('$Name supports validate function', async ({Component}) => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <Component data-testid="input" label="Name" defaultValue="Foo" validationBehavior="native" validate={v => v === 'Foo' ? 'Invalid name' : null} onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid name']));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name');
+
+        await user.tab();
+        await user.keyboard('Devon');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it.each`
+        Name                | Component
+        ${'v3 TextField'}   | ${TextField}
+        ${'v3 TextArea'}    | ${TextArea}
+        ${'v3 SearchField'} | ${SearchField}
+      `('$Name supports server validation', async ({Component}) => {
+        function Test() {
+          let [serverErrors, setServerErrors] = React.useState({});
+          let onSubmit = e => {
+            e.preventDefault();
+            setServerErrors({
+              name: 'Invalid name.'
+            });
+          };
+
+          return (
+            <Provider theme={theme}>
+              <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                <Component data-testid="input" label="Name" name="name" validationBehavior="native" />
+                <Button type="submit">Submit</Button>
+              </Form>
+            </Provider>
+          );
+        }
+
+        let {getByTestId, getByRole} = render(<Test />);
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        await user.click(getByRole('button'));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name.');
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab({shift: true});
+        await user.keyboard('Devon');
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+      });
+
+      it.each`
+        Name                | Component
+        ${'v3 TextField'}   | ${TextField}
+        ${'v3 TextArea'}    | ${TextArea}
+        ${'v3 SearchField'} | ${SearchField}
+      `('$Name supports customizing native error messages', async ({Component}) => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <Component data-testid="input" label="Name" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a name' : null} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        act(() => getByTestId('form').checkValidity());
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a name');
+      });
+    });
+
+    describe('validationBehavior=aria', () => {
+      it.each`
+        Name                | Component
+        ${'v3 TextField'}   | ${TextField}
+        ${'v3 TextArea'}    | ${TextArea}
+        ${'v3 SearchField'} | ${SearchField}
+      `('$Name supports validate function', async ({Component}) => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <Component data-testid="input" label="Name" defaultValue="Foo" validate={v => v === 'Foo' ? 'Invalid name' : null} onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name');
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid name']));
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+        await user.keyboard('Devon');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it.each`
+        Name                | Component
+        ${'v3 TextField'}   | ${TextField}
+        ${'v3 TextArea'}    | ${TextArea}
+        ${'v3 SearchField'} | ${SearchField}
+      `('$Name supports server validation', async ({Component}) => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form validationErrors={{name: 'Invalid name'}}>
+              <Component data-testid="input" label="Name" name="name" validationBehavior="native" />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name');
+
+        await user.tab();
+        await user.keyboard('Devon');
+        await user.tab();
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+      });
+    });
+  });
 });
diff --git a/packages/@react-types/textfield/src/index.d.ts b/packages/@react-types/textfield/src/index.d.ts
index 55957c36aa6..63df07d1ba9 100644
--- a/packages/@react-types/textfield/src/index.d.ts
+++ b/packages/@react-types/textfield/src/index.d.ts
@@ -30,7 +30,7 @@ import {
 } from '@react-types/shared';
 import {ReactElement} from 'react';
 
-export interface TextFieldProps extends InputBase, Validation, HelpTextProps, FocusableProps, TextInputBase, ValueBase<string>, LabelableProps {}
+export interface TextFieldProps extends InputBase, Validation<string>, HelpTextProps, FocusableProps, TextInputBase, ValueBase<string>, LabelableProps {}
 
 export interface AriaTextFieldProps extends TextFieldProps, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps, AriaValidationProps {
   // https://www.w3.org/TR/wai-aria-1.2/#textbox
@@ -45,7 +45,7 @@ export interface AriaTextFieldProps extends TextFieldProps, AriaLabelingProps, F
   'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
 }
 
-export interface SpectrumTextFieldProps extends SpectrumTextInputBase, Omit<AriaTextFieldProps, 'isInvalid' | 'validationState'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {
+export interface SpectrumTextFieldProps extends SpectrumTextInputBase, Omit<AriaTextFieldProps, 'isInvalid' | 'validationState'>, SpectrumFieldValidation<string>, SpectrumLabelableProps, StyleProps {
   /** An icon to display at the start of the input. */
   icon?: ReactElement | null,
   /** Whether the input should be displayed with a quiet style. */

From bf114e324b2ea4f479c377eadd4529ac48778daa Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 16 Oct 2023 11:42:19 -0700
Subject: [PATCH 04/38] NumberField

---
 .../numberfield/src/useNumberField.ts         |  50 ++++-
 .../spinbutton/src/useSpinButton.ts           |   2 +-
 .../utils/src/useFormValidation.ts            |  12 +-
 .../@react-spectrum/numberfield/package.json  |   1 +
 .../numberfield/src/NumberField.tsx           |  16 +-
 .../numberfield/test/NumberField.test.js      | 186 +++++++++++++++++-
 .../@react-types/numberfield/src/index.d.ts   |   4 +-
 packages/@react-types/shared/src/inputs.d.ts  |   3 +-
 8 files changed, 252 insertions(+), 22 deletions(-)

diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index eea6efa21de..3f78bdeb08a 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -13,13 +13,15 @@
 import {AriaButtonProps} from '@react-types/button';
 import {AriaNumberFieldProps} from '@react-types/numberfield';
 import {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';
-import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps} from '@react-types/shared';
+import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';
 import {
   InputHTMLAttributes,
   LabelHTMLAttributes,
   RefObject,
   useCallback,
+  useEffect,
   useMemo,
+  useRef,
   useState
 } from 'react';
 // @ts-ignore
@@ -33,7 +35,7 @@ import {
 } from '@react-aria/i18n';
 import {useSpinButton} from '@react-aria/spinbutton';
 
-export interface NumberFieldAria {
+export interface NumberFieldAria extends ValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the group wrapper around the input and stepper buttons. */
@@ -67,6 +69,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     autoFocus,
     validationState,
     isInvalid,
+    validate,
+    validationBehavior = 'aria',
     label,
     formatOptions,
     onBlur = () => {},
@@ -85,15 +89,38 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     decrement,
     decrementToMin,
     numberValue,
-    inputValue,
-    commit
+    inputValue
   } = state;
 
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let inputId = useId(id);
 
+  let valueOnFocus = useRef(state.numberValue);
+  let didCommit = useRef(false);
+  let commit = useCallback(() => {
+    state.commit();
+    didCommit.current = true;
+  }, [state]);
+
+  useEffect(() => {
+    // After the value is committed, check if the value changed and emit a native "change" event
+    // for form validation to pick up. Wait until the end of the microtask so that all later
+    // useEffects have already run.
+    queueMicrotask(() => {
+      if (didCommit.current) {
+        didCommit.current = false;
+        if (state.numberValue !== valueOnFocus.current) {
+          inputRef.current?.dispatchEvent(new Event('change', {bubbles: true}));
+        }
+      }
+    });
+  });
+
   let {focusProps} = useFocus({
+    onFocus: () => {
+      valueOnFocus.current = state.numberValue;
+    },
     onBlur: () => {
       // Set input value to normalized valid value
       commit();
@@ -190,10 +217,9 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   }, [commit]);
 
-  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
+  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useFormattedTextField({
     ...otherProps,
     ...domProps,
-    name: undefined,
     label,
     autoFocus,
     isDisabled,
@@ -201,6 +227,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     isRequired,
     validationState,
     isInvalid,
+    validate: useCallback(() => validate?.(state.numberValue), [state.numberValue, validate]),
+    validationBehavior,
     value: inputValue,
     defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here
     autoComplete: 'off',
@@ -235,10 +263,15 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
       'aria-valuenow': null,
       'aria-valuetext': null,
       autoCorrect: 'off',
-      spellCheck: 'false'
+      spellCheck: 'false',
+      name: null
     }
   );
 
+  if (validationBehavior === 'native') {
+    inputProps['aria-required'] = undefined;
+  }
+
   let onButtonPressStart = (e) => {
     // If focus is already on the input, keep it there so we don't hide the
     // software keyboard when tapping the increment/decrement buttons.
@@ -311,6 +344,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     incrementButtonProps,
     decrementButtonProps,
     errorMessageProps,
-    descriptionProps
+    descriptionProps,
+    ...validation
   };
 }
diff --git a/packages/@react-aria/spinbutton/src/useSpinButton.ts b/packages/@react-aria/spinbutton/src/useSpinButton.ts
index e7245c791c6..d60b10211a1 100644
--- a/packages/@react-aria/spinbutton/src/useSpinButton.ts
+++ b/packages/@react-aria/spinbutton/src/useSpinButton.ts
@@ -20,7 +20,7 @@ import {useEffectEvent, useGlobalListeners} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
-export interface SpinButtonProps extends InputBase, Validation, ValueBase<number>, RangeInputBase<number> {
+export interface SpinButtonProps extends InputBase, Validation<number>, ValueBase<number>, RangeInputBase<number> {
   textValue?: string,
   onIncrement?: () => void,
   onIncrementPage?: () => void,
diff --git a/packages/@react-aria/utils/src/useFormValidation.ts b/packages/@react-aria/utils/src/useFormValidation.ts
index 2e0dba3b936..8f5d5702320 100644
--- a/packages/@react-aria/utils/src/useFormValidation.ts
+++ b/packages/@react-aria/utils/src/useFormValidation.ts
@@ -53,20 +53,20 @@ export function useFormValidation<T>(props: FormValidationProps<T>, value: T, re
   useEffect(() => {
     let input = ref.current!;
     let form = input.form;
-    let onReset = () => setServerErrorCleared(true);
-    let onChange = (e) => {
+    let onChange = () => setServerErrorCleared(true);
+    let onFormChange = (e) => {
       // Clear if any input with the same name is updated (e.g. in a checkbox/radio group).
       if (e.target.name === name) {
         setServerErrorCleared(true);
       }
     };
     input.addEventListener('change', onChange);
-    form?.addEventListener('change', onChange);
-    form?.addEventListener('reset', onReset);
+    form?.addEventListener('change', onFormChange);
+    form?.addEventListener('reset', onChange);
     return () => {
       input.removeEventListener('change', onChange);
-      form?.removeEventListener('change', onChange);
-      form?.removeEventListener('reset', onReset);
+      form?.removeEventListener('change', onFormChange);
+      form?.removeEventListener('reset', onChange);
     };
   }, [ref, name]);
 
diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json
index ac1dc75d8db..3820071b398 100644
--- a/packages/@react-spectrum/numberfield/package.json
+++ b/packages/@react-spectrum/numberfield/package.json
@@ -43,6 +43,7 @@
     "@react-aria/numberfield": "^3.9.0",
     "@react-aria/utils": "^3.21.0",
     "@react-spectrum/button": "^3.14.0",
+    "@react-spectrum/form": "^3.6.6",
     "@react-spectrum/label": "^3.15.0",
     "@react-spectrum/textfield": "^3.10.6",
     "@react-spectrum/utils": "^3.11.0",
diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx
index 92db77b564c..ddf5e5f1e94 100644
--- a/packages/@react-spectrum/numberfield/src/NumberField.tsx
+++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx
@@ -22,6 +22,7 @@ import {SpectrumNumberFieldProps} from '@react-types/numberfield';
 import {StepButton} from './StepButton';
 import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
+import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useNumberField} from '@react-aria/numberfield';
@@ -29,6 +30,7 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let provider = useProvider();
   let {
     isQuiet,
@@ -50,13 +52,17 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
     incrementButtonProps,
     decrementButtonProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    errors,
+    validationDetails
   } = useNumberField(props, state, inputRef);
   let isMobile = provider.scale === 'large';
   let showStepper = !hideStepper;
 
   let {isHovered, hoverProps} = useHover({isDisabled});
 
+  let validationState = props.validationState || (isInvalid ? 'invalid' : null);
   let className =
     classNames(
       stepperStyle,
@@ -65,7 +71,7 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
         'spectrum-Stepper--isQuiet': isQuiet,
         'is-disabled': isDisabled,
         'spectrum-Stepper--readonly': isReadOnly,
-        'is-invalid': props.validationState === 'invalid' && !isDisabled,
+        'is-invalid': validationState === 'invalid' && !isDisabled,
         'spectrum-Stepper--showStepper': showStepper,
         'spectrum-Stepper--isMobile': isMobile,
         'is-hovered': isHovered,
@@ -79,6 +85,9 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
       {...props as Omit<SpectrumNumberFieldProps, 'onChange'>}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
+      isInvalid={isInvalid}
+      errors={errors}
+      validationDetails={validationDetails}
       labelProps={labelProps}
       ref={domRef}
       wrapperClassName={classNames(
@@ -97,7 +106,8 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
         decrementProps={decrementButtonProps}
         className={className}
         style={style}
-        state={state} />
+        state={state}
+        validationState={validationState} />
     </Field>
   );
 }
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
index 9431aaafbfd..5e9637c44c2 100644
--- a/packages/@react-spectrum/numberfield/test/NumberField.test.js
+++ b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -11,10 +11,11 @@
  */
 
 jest.mock('@react-aria/live-announcer');
-import {act, fireEvent, pointerMap, render, triggerPress, within} from '@react-spectrum/test-utils';
+import {act, createValidationResult, fireEvent, pointerMap, render, triggerPress, within} from '@react-spectrum/test-utils';
 import {announce} from '@react-aria/live-announcer';
 import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
+import {Form} from '@react-spectrum/form';
 import messages from '../../../@react-aria/numberfield/intl/*';
 import {NumberField} from '../';
 import {Provider} from '@react-spectrum/provider';
@@ -2260,4 +2261,187 @@ describe('NumberField', function () {
     await user.click(button);
     expect(input).toHaveValue('10');
   });
+
+  describe('validation', () => {
+    describe('validationBehavior=native', () => {
+      it('supports isRequired', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <NumberField data-testid="input" label="Value" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('required');
+        expect(input).not.toHaveAttribute('aria-required');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.tab();
+        await user.keyboard('4');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <NumberField data-testid="input" label="Value" defaultValue={2} step={2} validationBehavior="native" validate={v => v !== 4 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+        await user.tab();
+        await user.keyboard('3');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        function Test() {
+          let [serverErrors, setServerErrors] = React.useState({});
+          let onSubmit = e => {
+            e.preventDefault();
+            setServerErrors({
+              value: 'Invalid value.'
+            });
+          };
+
+          return (
+            <Provider theme={theme}>
+              <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                <NumberField data-testid="input" label="Value" name="value" validationBehavior="native" />
+                <Button type="submit" data-testid="submit">Submit</Button>
+              </Form>
+            </Provider>
+          );
+        }
+
+        let {getByTestId} = render(<Test />);
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        await user.click(getByTestId('submit'));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value.');
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab({shift: true});
+        await user.keyboard('4');
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+      });
+
+      it('supports customizing native error messages', async () => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <NumberField data-testid="input" label="Value" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        act(() => getByTestId('form').checkValidity());
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+      });
+    });
+
+    describe('validationBehavior=aria', () => {
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <NumberField data-testid="input" label="Value" defaultValue={2} validate={v => v === 2 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+        await user.keyboard('4');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form validationErrors={{value: 'Invalid value'}}>
+              <NumberField data-testid="input" label="Value" name="value" validationBehavior="native" />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+        await user.tab();
+        await user.keyboard('4');
+        await user.tab();
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+      });
+    });
+  });
 });
diff --git a/packages/@react-types/numberfield/src/index.d.ts b/packages/@react-types/numberfield/src/index.d.ts
index 26dd4707d70..e3075a67c35 100644
--- a/packages/@react-types/numberfield/src/index.d.ts
+++ b/packages/@react-types/numberfield/src/index.d.ts
@@ -24,7 +24,7 @@ import {
   ValueBase
 } from '@react-types/shared';
 
-export interface NumberFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, ValueBase<number>, RangeInputBase<number>, LabelableProps, HelpTextProps {
+export interface NumberFieldProps extends InputBase, Validation<number>, FocusableProps, TextInputBase, ValueBase<number>, RangeInputBase<number>, LabelableProps, HelpTextProps {
   /**
    * Formatting options for the value displayed in the number field.
    * This also affects what characters are allowed to be typed by the user.
@@ -39,7 +39,7 @@ export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLa
   incrementAriaLabel?: string
 }
 
-export interface SpectrumNumberFieldProps extends Omit<AriaNumberFieldProps, 'placeholder' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation, InputDOMProps, StyleProps, SpectrumLabelableProps {
+export interface SpectrumNumberFieldProps extends Omit<AriaNumberFieldProps, 'placeholder' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation<number>, InputDOMProps, StyleProps, SpectrumLabelableProps {
   /** Whether the numberfield should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** Whether to hide the increment and decrement buttons. */
diff --git a/packages/@react-types/shared/src/inputs.d.ts b/packages/@react-types/shared/src/inputs.d.ts
index 4b162d2c402..30291a6dd06 100644
--- a/packages/@react-types/shared/src/inputs.d.ts
+++ b/packages/@react-types/shared/src/inputs.d.ts
@@ -16,6 +16,7 @@ export type ValidationState = 'valid' | 'invalid';
 
 export type ValidationError = string | string[];
 export type ValidationErrors = Record<string, ValidationError>;
+export type ValidationFunction<T> = (value: T) => ValidationError | true | null | undefined;
 
 export interface Validation<T> {
   /** Whether user input is required on the input before form submission. */
@@ -37,7 +38,7 @@ export interface Validation<T> {
    * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
    * prop instead.
    */
-  validate?: (value: T) => ValidationError | true | null | undefined,
+  validate?: ValidationFunction<T>,
   /**
    * Handler that is called when input validation changes.
    */

From 2606859b39acbd7aa42ac334a74d61af1d7f2ceb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 16 Oct 2023 11:53:59 -0700
Subject: [PATCH 05/38] Deprecated validation in SliderThumb because it makes
 no sense

---
 .../numberfield/src/useNumberField.ts         | 25 ++++++++-----------
 packages/@react-types/slider/src/index.d.ts   | 12 ++++++---
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index 3f78bdeb08a..e42e5d8cfcc 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -103,20 +103,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     didCommit.current = true;
   }, [state]);
 
-  useEffect(() => {
-    // After the value is committed, check if the value changed and emit a native "change" event
-    // for form validation to pick up. Wait until the end of the microtask so that all later
-    // useEffects have already run.
-    queueMicrotask(() => {
-      if (didCommit.current) {
-        didCommit.current = false;
-        if (state.numberValue !== valueOnFocus.current) {
-          inputRef.current?.dispatchEvent(new Event('change', {bubbles: true}));
-        }
-      }
-    });
-  });
-
   let {focusProps} = useFocus({
     onFocus: () => {
       valueOnFocus.current = state.numberValue;
@@ -332,6 +318,17 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onPressStart: onButtonPressStart
   });
 
+  // After the value is committed, check if the value changed and emit a native "change" event for form validation to pick up.
+  // NOTE: This useEffect must be last so that form validation effects have already run.
+  useEffect(() => {
+    if (didCommit.current) {
+      didCommit.current = false;
+      if (state.numberValue !== valueOnFocus.current) {
+        inputRef.current?.dispatchEvent(new Event('change', {bubbles: true}));
+      }
+    }
+  });
+
   return {
     groupProps: {
       ...focusWithinProps,
diff --git a/packages/@react-types/slider/src/index.d.ts b/packages/@react-types/slider/src/index.d.ts
index 10642f70d3b..ec9c1558c25 100644
--- a/packages/@react-types/slider/src/index.d.ts
+++ b/packages/@react-types/slider/src/index.d.ts
@@ -11,7 +11,7 @@ import {
   RangeInputBase,
   RangeValue,
   StyleProps,
-  Validation,
+  ValidationState,
   ValueBase
 } from '@react-types/shared';
 import {ReactNode} from 'react';
@@ -44,7 +44,7 @@ export interface SliderProps<T = number | number[]> extends RangeInputBase<numbe
   step?: number
 }
 
-export interface SliderThumbProps extends FocusableProps, Validation, LabelableProps {
+export interface SliderThumbProps extends FocusableProps, LabelableProps {
   /**
    * The orientation of the Slider.
    * @default 'horizontal'
@@ -57,7 +57,13 @@ export interface SliderThumbProps extends FocusableProps, Validation, LabelableP
    * Index of the thumb within the slider.
    * @default 0
    */
-  index?: number
+  index?: number,
+  /** @deprecated */
+  isRequired?: boolean,
+  /** @deprecated */
+  isInvalid?: boolean,
+  /** @deprecated */
+  validationState?: ValidationState
 }
 
 export interface AriaSliderProps<T = number | number[]> extends SliderProps<T>, DOMProps, AriaLabelingProps {}

From ec0285a72948139288c9eec7875eac53a34e2637 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 16 Oct 2023 12:34:54 -0700
Subject: [PATCH 06/38] ColorField

---
 .../@react-aria/color/src/useColorField.ts    |  61 ++++--
 .../utils/src/useFormValidation.ts            |   4 +-
 packages/@react-spectrum/color/package.json   |   1 +
 .../@react-spectrum/color/src/ColorField.tsx  |  12 +-
 .../color/test/ColorField.test.js             | 188 +++++++++++++++++-
 .../@react-stately/utils/src/validation.ts    |   5 +-
 packages/@react-types/color/src/index.d.ts    |   4 +-
 7 files changed, 248 insertions(+), 27 deletions(-)

diff --git a/packages/@react-aria/color/src/useColorField.ts b/packages/@react-aria/color/src/useColorField.ts
index a94e3bc9c3b..39e40ffccee 100644
--- a/packages/@react-aria/color/src/useColorField.ts
+++ b/packages/@react-aria/color/src/useColorField.ts
@@ -17,14 +17,17 @@ import {
   LabelHTMLAttributes,
   RefObject,
   useCallback,
+  useEffect,
+  useRef,
   useState
 } from 'react';
 import {mergeProps, useId} from '@react-aria/utils';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {useSpinButton} from '@react-aria/spinbutton';
+import {ValidationResult} from '@react-types/shared';
 
-export interface ColorFieldAria {
+export interface ColorFieldAria extends ValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
@@ -43,13 +46,14 @@ export function useColorField(
   let {
     isDisabled,
     isReadOnly,
-    isRequired
+    isRequired,
+    validate,
+    validationBehavior = 'aria'
   } = props;
 
   let {
     colorValue,
     inputValue,
-    commit,
     increment,
     decrement,
     incrementToMax,
@@ -96,27 +100,56 @@ export function useColorField(
     }
   };
 
-  let {labelProps, inputProps} = useFormattedTextField(
+  let {labelProps, inputProps, ...validation} = useFormattedTextField(
     mergeProps(props, {
       id: inputId,
       value: inputValue,
       defaultValue: undefined,
+      validate: useCallback(() => validate?.(state.colorValue), [state.colorValue, validate]),
       type: 'text',
       autoComplete: 'off',
       onChange
     }), state, ref);
 
+  let valueOnFocus = useRef(state.colorValue);
+  let didCommit = useRef(false);
+  let commit = useCallback(() => {
+    state.commit();
+    didCommit.current = true;
+  }, [state]);
+
+  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
+    role: 'textbox',
+    'aria-valuemax': null,
+    'aria-valuemin': null,
+    'aria-valuenow': null,
+    'aria-valuetext': null,
+    autoCorrect: 'off',
+    spellCheck: 'false',
+    onFocus: () => {
+      valueOnFocus.current = state.colorValue;
+    },
+    onBlur: commit
+  });
+
+  // After the value is committed, check if the value changed and emit a native "change" event for form validation to pick up.
+  // NOTE: This useEffect must be last so that form validation effects have already run.
+  useEffect(() => {
+    if (didCommit.current) {
+      didCommit.current = false;
+      if (state.colorValue !== valueOnFocus.current) {
+        ref.current?.dispatchEvent(new Event('change', {bubbles: true}));
+      }
+    }
+  });
+
+  if (validationBehavior === 'native') {
+    inputProps['aria-required'] = undefined;
+  }
+
   return {
     labelProps,
-    inputProps: mergeProps(inputProps, spinButtonProps, focusWithinProps, {
-      role: 'textbox',
-      'aria-valuemax': null,
-      'aria-valuemin': null,
-      'aria-valuenow': null,
-      'aria-valuetext': null,
-      autoCorrect: 'off',
-      spellCheck: 'false',
-      onBlur: commit
-    })
+    inputProps,
+    ...validation
   };
 }
diff --git a/packages/@react-aria/utils/src/useFormValidation.ts b/packages/@react-aria/utils/src/useFormValidation.ts
index 8f5d5702320..1ba7273ddf0 100644
--- a/packages/@react-aria/utils/src/useFormValidation.ts
+++ b/packages/@react-aria/utils/src/useFormValidation.ts
@@ -113,13 +113,13 @@ export function useFormValidation<T>(props: FormValidationProps<T>, value: T, re
       }
 
       // Report server errors immediately.
-      if (serverError !== lastError.current && ref.current) {
+      if (!isEqualValidation(serverError, lastError.current) && ref.current) {
         lastError.current = serverError;
         updateNativeValidity(getNativeValidity(ref.current));
       }
     } else {
       let e = serverError || clientError || DEFAULT_VALIDITY;
-      if (!controlledError && e !== lastError.current) {
+      if (!controlledError && !isEqualValidation(e, lastError.current)) {
         lastError.current = e;
         onValidationChange?.(e);
       }
diff --git a/packages/@react-spectrum/color/package.json b/packages/@react-spectrum/color/package.json
index f8150386ef4..985dfacc8ed 100644
--- a/packages/@react-spectrum/color/package.json
+++ b/packages/@react-spectrum/color/package.json
@@ -42,6 +42,7 @@
     "@react-aria/interactions": "^3.19.0",
     "@react-aria/slider": "^3.7.1",
     "@react-aria/utils": "^3.21.0",
+    "@react-spectrum/form": "^3.6.6",
     "@react-spectrum/label": "^3.15.0",
     "@react-spectrum/layout": "^3.5.6",
     "@react-spectrum/textfield": "^3.10.6",
diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx
index 7f94e9b0991..81975b8b457 100644
--- a/packages/@react-spectrum/color/src/ColorField.tsx
+++ b/packages/@react-spectrum/color/src/ColorField.tsx
@@ -18,10 +18,12 @@ import {TextFieldBase} from '@react-spectrum/textfield';
 import {TextFieldRef} from '@react-types/textfield';
 import {useColorField} from '@react-aria/color';
 import {useColorFieldState} from '@react-stately/color';
+import {useFormProps} from '@react-spectrum/form';
 import {useProviderProps} from '@react-spectrum/provider';
 
 function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     // These disabled props are handled by the state hook
     value,          // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -31,10 +33,7 @@ function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
   } = props;
   let state = useColorFieldState(props);
   let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
-  let {
-    labelProps,
-    inputProps
-  } = useColorField(otherProps, state, inputRef);
+  let result = useColorField(otherProps, state, inputRef);
 
   if (props.placeholder) {
     console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
@@ -45,8 +44,9 @@ function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
       {...otherProps}
       ref={ref}
       inputRef={inputRef}
-      labelProps={labelProps}
-      inputProps={inputProps}
+      {...result}
+      validationState={props.validationState || (result.isInvalid ? 'invalid' : null)}
+      errorMessage={props.errorMessage ?? result.errors.join(' ')}
       inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />
   );
 }
diff --git a/packages/@react-spectrum/color/test/ColorField.test.js b/packages/@react-spectrum/color/test/ColorField.test.js
index 26c60837675..47964f3797a 100644
--- a/packages/@react-spectrum/color/test/ColorField.test.js
+++ b/packages/@react-spectrum/color/test/ColorField.test.js
@@ -10,9 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, pointerMap, render} from '@react-spectrum/test-utils';
+import {act, createValidationResult, fireEvent, pointerMap, render} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
 import {ColorField} from '../';
+import {Form} from '@react-spectrum/form';
 import {parseColor} from '@react-stately/color';
 import {Provider} from '@react-spectrum/provider';
 import React, {useState} from 'react';
@@ -371,4 +373,188 @@ describe('ColorField', function () {
     fireEvent.keyUp(colorField, {key});
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
   });
+
+  describe('validation', () => {
+    describe('validationBehavior=native', () => {
+      it('supports isRequired', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <ColorField data-testid="input" label="Color" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('required');
+        expect(input).not.toHaveAttribute('aria-required');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.tab();
+        await user.keyboard('#000');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <ColorField data-testid="input" label="Color" defaultValue="#000" step={2} validationBehavior="native" validate={v => v.red === 0 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => getByTestId('form').checkValidity());
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+        await user.tab();
+        await user.keyboard('#111');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        function Test() {
+          let [serverErrors, setServerErrors] = React.useState({});
+          let onSubmit = e => {
+            e.preventDefault();
+            setServerErrors({
+              value: 'Invalid value.'
+            });
+          };
+
+          return (
+            <Provider theme={theme}>
+              <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                <ColorField data-testid="input" label="Color" name="value" validationBehavior="native" />
+                <Button type="submit" data-testid="submit">Submit</Button>
+              </Form>
+            </Provider>
+          );
+        }
+
+        let {getByTestId} = render(<Test />);
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        await user.click(getByTestId('submit'));
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value.');
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab({shift: true});
+        await user.keyboard('#333');
+        await user.tab();
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+      });
+
+      it('supports customizing native error messages', async () => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <ColorField data-testid="input" label="Color" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        act(() => getByTestId('form').checkValidity());
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+      });
+    });
+
+    describe('validationBehavior=aria', () => {
+      it('supports validate function', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <ColorField data-testid="input" label="Color" defaultValue="#000" validate={v => v.red === 0 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+        await user.keyboard('#333');
+        await user.tab();
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+      });
+
+      it('supports server validation', async () => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form validationErrors={{value: 'Invalid value'}}>
+              <ColorField data-testid="input" label="Color" name="value" validationBehavior="native" />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+        await user.tab();
+        await user.keyboard('#fff');
+        await user.tab();
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+      });
+    });
+  });
 });
diff --git a/packages/@react-stately/utils/src/validation.ts b/packages/@react-stately/utils/src/validation.ts
index 7f1afb48081..07402478d7e 100644
--- a/packages/@react-stately/utils/src/validation.ts
+++ b/packages/@react-stately/utils/src/validation.ts
@@ -33,12 +33,13 @@ export const CUSTOM_VALIDITY_STATE: ValidityState = {
   valid: false
 };
 
-export function isEqualValidation(a: ValidationResult, b: ValidationResult): boolean {
+export function isEqualValidation(a: ValidationResult | null, b: ValidationResult | null): boolean {
   if (a === b) {
     return true;
   }
 
-  return a.isInvalid === b.isInvalid
+  return a && b
+    && a.isInvalid === b.isInvalid
     && a.errors.length === b.errors.length
     && a.errors.every((a, i) => a === b.errors[i])
     && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
diff --git a/packages/@react-types/color/src/index.d.ts b/packages/@react-types/color/src/index.d.ts
index c540416ab37..0e6d9dd3482 100644
--- a/packages/@react-types/color/src/index.d.ts
+++ b/packages/@react-types/color/src/index.d.ts
@@ -97,14 +97,14 @@ export interface Color {
   getColorChannels(): [ColorChannel, ColorChannel, ColorChannel]
 }
 
-export interface ColorFieldProps extends Omit<ValueBase<string | Color | null>, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps, HelpTextProps {
+export interface ColorFieldProps extends Omit<ValueBase<string | Color | null>, 'onChange'>, InputBase, Validation<Color | null>, FocusableProps, TextInputBase, LabelableProps, HelpTextProps {
   /** Handler that is called when the value changes. */
   onChange?: (color: Color | null) => void
 }
 
 export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit<TextInputDOMProps, 'minLength' | 'maxLength' | 'pattern' | 'type' | 'inputMode' | 'autoComplete'>, AriaValidationProps {}
 
-export interface SpectrumColorFieldProps extends SpectrumTextInputBase, Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps {
+export interface SpectrumColorFieldProps extends SpectrumTextInputBase, Omit<AriaColorFieldProps, 'isInvalid' | 'validationState'>, SpectrumFieldValidation<Color | null>, SpectrumLabelableProps, StyleProps {
   /** Whether the ColorField should be displayed with a quiet style. */
   isQuiet?: boolean
 }

From 9c7bff6ae2abcb8ce6548a7af081eb604413ebcb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 18 Oct 2023 21:51:39 -0700
Subject: [PATCH 07/38] Refactor into stately and aria hooks

---
 packages/@react-aria/checkbox/package.json    |   2 +
 .../@react-aria/checkbox/src/useCheckbox.ts   |  16 +-
 .../checkbox/src/useCheckboxGroup.ts          |  12 +-
 .../checkbox/src/useCheckboxGroupItem.ts      |  25 +-
 packages/@react-aria/form/README.md           |   3 +
 packages/@react-aria/form/index.ts            |  13 +
 packages/@react-aria/form/package.json        |  38 +++
 packages/@react-aria/form/src/index.ts        |  13 +
 .../@react-aria/form/src/useFormValidation.ts | 103 ++++++++
 packages/@react-aria/numberfield/package.json |   1 +
 .../numberfield/src/useNumberField.ts         |  59 ++---
 packages/@react-aria/radio/package.json       |   1 +
 packages/@react-aria/radio/src/useRadio.ts    |  16 +-
 .../@react-aria/radio/src/useRadioGroup.ts    |   9 +-
 packages/@react-aria/textfield/package.json   |   2 +
 .../@react-aria/textfield/src/useTextField.ts |  11 +-
 packages/@react-aria/toggle/src/useToggle.ts  |  15 +-
 packages/@react-aria/utils/src/index.ts       |   1 -
 .../utils/src/useFormValidation.ts            | 232 ------------------
 .../checkbox/test/CheckboxGroup.test.js       |  93 +------
 packages/@react-spectrum/form/package.json    |   1 +
 packages/@react-spectrum/form/src/Form.tsx    |   3 +-
 .../numberfield/test/NumberField.test.js      |   3 +-
 .../textfield/test/TextField.test.js          |   2 +-
 packages/@react-stately/checkbox/package.json |   1 +
 .../checkbox/src/useCheckboxGroupState.ts     |  67 ++---
 packages/@react-stately/form/README.md        |   3 +
 packages/@react-stately/form/index.ts         |  13 +
 packages/@react-stately/form/package.json     |  36 +++
 packages/@react-stately/form/src/index.ts     |  14 ++
 .../form/src/useFormValidationState.ts        | 172 +++++++++++++
 .../@react-stately/numberfield/package.json   |   1 +
 .../numberfield/src/useNumberFieldState.ts    |  12 +-
 packages/@react-stately/radio/package.json    |   1 +
 .../radio/src/useRadioGroupState.ts           |  51 ++--
 packages/@react-stately/utils/src/index.ts    |   1 -
 .../@react-stately/utils/src/validation.ts    |  59 -----
 packages/@react-types/checkbox/src/index.d.ts |   4 +-
 packages/@react-types/label/src/index.d.ts    |   4 +-
 packages/@react-types/radio/src/index.d.ts    |   2 +-
 40 files changed, 564 insertions(+), 551 deletions(-)
 create mode 100644 packages/@react-aria/form/README.md
 create mode 100644 packages/@react-aria/form/index.ts
 create mode 100644 packages/@react-aria/form/package.json
 create mode 100644 packages/@react-aria/form/src/index.ts
 create mode 100644 packages/@react-aria/form/src/useFormValidation.ts
 delete mode 100644 packages/@react-aria/utils/src/useFormValidation.ts
 create mode 100644 packages/@react-stately/form/README.md
 create mode 100644 packages/@react-stately/form/index.ts
 create mode 100644 packages/@react-stately/form/package.json
 create mode 100644 packages/@react-stately/form/src/index.ts
 create mode 100644 packages/@react-stately/form/src/useFormValidationState.ts
 delete mode 100644 packages/@react-stately/utils/src/validation.ts

diff --git a/packages/@react-aria/checkbox/package.json b/packages/@react-aria/checkbox/package.json
index dc9fd7e617a..cfe476148ad 100644
--- a/packages/@react-aria/checkbox/package.json
+++ b/packages/@react-aria/checkbox/package.json
@@ -22,10 +22,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/label": "^3.7.1",
     "@react-aria/toggle": "^3.8.1",
     "@react-aria/utils": "^3.21.0",
     "@react-stately/checkbox": "^3.5.1",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/toggle": "^3.6.3",
     "@react-types/checkbox": "^3.5.2",
     "@react-types/shared": "^3.21.0",
diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts
index 59140c54d01..827ee1805ac 100644
--- a/packages/@react-aria/checkbox/src/useCheckbox.ts
+++ b/packages/@react-aria/checkbox/src/useCheckbox.ts
@@ -13,6 +13,8 @@
 import {AriaCheckboxProps} from '@react-types/checkbox';
 import {InputHTMLAttributes, RefObject, useEffect} from 'react';
 import {ToggleState} from '@react-stately/toggle';
+import {useFormValidation} from '@react-aria/form';
+import {useFormValidationState} from '@react-stately/form';
 import {useToggle} from '@react-aria/toggle';
 import {ValidationResult} from '@react-types/shared';
 
@@ -26,9 +28,7 @@ export interface CheckboxAria extends ValidationResult {
   /** Whether the checkbox is disabled. */
   isDisabled: boolean,
   /** Whether the checkbox is read only. */
-  isReadOnly: boolean,
-  /** Whether the checkbox is invalid. */
-  isInvalid: boolean
+  isReadOnly: boolean
 }
 
 /**
@@ -40,7 +40,15 @@ export interface CheckboxAria extends ValidationResult {
  * @param inputRef - A ref for the HTML input element.
  */
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
-  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid, errors, validationDetails} = useToggle(props, state, inputRef);
+  // Create validation state here because it doesn't make sense to add to general useToggleState.
+  let validationState = useFormValidationState({...props, value: state.isSelected});
+  let {isInvalid, errors, validationDetails} = validationState.displayValidation;
+  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({
+    ...props,
+    isInvalid
+  }, state, inputRef);
+
+  useFormValidation(props, validationState, inputRef);
 
   let {isIndeterminate} = props;
   useEffect(() => {
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
index 51c28fefbbc..e3e7d8c3be9 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
@@ -36,15 +36,17 @@ export interface CheckboxGroupAria extends ValidationResult {
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {
   let {isDisabled, name, validationBehavior} = props;
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     // Checkbox group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
     labelElementType: 'span',
-    isInvalid: state.isInvalid,
-    errorMessage: props.errorMessage || state.validationErrors
+    isInvalid,
+    errorMessage: props.errorMessage || errors
   });
+
   checkboxGroupData.set(state, {
     name,
     descriptionId: descriptionProps.id,
@@ -63,8 +65,8 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
     labelProps,
     descriptionProps,
     errorMessageProps,
-    isInvalid: state.isInvalid,
-    errors: state.validationErrors,
-    validationDetails: state.validationDetails
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
index 68b0d1c80ee..445e9154520 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
@@ -14,7 +14,7 @@ import {AriaCheckboxGroupItemProps} from '@react-types/checkbox';
 import {CheckboxAria, useCheckbox} from './useCheckbox';
 import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {RefObject, useCallback} from 'react';
+import {RefObject} from 'react';
 import {useToggleState} from '@react-stately/toggle';
 
 /**
@@ -42,7 +42,6 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
   });
 
   let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
-  let {validate} = props;
   let res = useCheckbox({
     ...props,
     isReadOnly: props.isReadOnly || state.isReadOnly,
@@ -50,27 +49,14 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     name: props.name || name,
     isRequired: props.isRequired ?? state.isRequired,
     validationBehavior: props.validationBehavior ?? validationBehavior,
-    validate: useCallback((v) => {
-      // Merge group errors and local errors so form submission is blocked for group level errors.
-      let res = validate?.(v);
-      let arr = [];
-      if (res && typeof res !== 'boolean') {
-        arr = Array.isArray(res) ? res : [res];
-      }
-      return [...state.groupValidationErrors, ...arr];
-    }, [validate, state.groupValidationErrors]),
+    // @ts-ignore - this is passed through to useFormValidation but we don't want it exposed as public API.
+    builtinValidation: state.realtimeValidation,
     onValidationChange(e) {
-      props.onValidationChange?.({
-        ...e,
-        errors: e.errors.slice(state.groupValidationErrors.length)
-      });
+      props.onValidationChange?.(e);
       state.setInvalid(props.value, e);
     }
   }, toggleState, inputRef);
 
-  // Remove group error messages from what we expose to local checkbox item.
-  let errors = res.errors.slice(state.groupValidationErrors.length);
-
   return {
     ...res,
     inputProps: {
@@ -80,7 +66,6 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
         state.isInvalid ? errorMessageId : null,
         descriptionId
       ].filter(Boolean).join(' ') || undefined
-    },
-    errors
+    }
   };
 }
diff --git a/packages/@react-aria/form/README.md b/packages/@react-aria/form/README.md
new file mode 100644
index 00000000000..4774dc19e61
--- /dev/null
+++ b/packages/@react-aria/form/README.md
@@ -0,0 +1,3 @@
+# @react-aria/form
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
diff --git a/packages/@react-aria/form/index.ts b/packages/@react-aria/form/index.ts
new file mode 100644
index 00000000000..7e5b036e91f
--- /dev/null
+++ b/packages/@react-aria/form/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';
diff --git a/packages/@react-aria/form/package.json b/packages/@react-aria/form/package.json
new file mode 100644
index 00000000000..33586575f53
--- /dev/null
+++ b/packages/@react-aria/form/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@react-aria/form",
+  "version": "3.0.0-alpha.1",
+  "private": true,
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/utils": "^3.21.0",
+    "@react-stately/form": "3.0.0-alpha.1",
+    "@react-stately/utils": "^3.8.0",
+    "@react-types/shared": "^3.21.0",
+    "@swc/helpers": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/@react-aria/form/src/index.ts b/packages/@react-aria/form/src/index.ts
new file mode 100644
index 00000000000..138d89c20a1
--- /dev/null
+++ b/packages/@react-aria/form/src/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export {useFormValidation} from './useFormValidation';
diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
new file mode 100644
index 00000000000..7db1f2ca6b1
--- /dev/null
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -0,0 +1,103 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {FormValidationState, VALID_VALIDITY_STATE} from '@react-stately/form';
+import {RefObject, useEffect} from 'react';
+import {useEffectEvent} from '@react-aria/utils';
+import {Validation, ValidationResult} from '@react-types/shared';
+
+type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+export function useFormValidation<T>(props: Validation<T>, state: FormValidationState<T>, ref: RefObject<ValidatableElement>) {
+  let {validationBehavior} = props;
+
+  useEffect(() => {
+    if (validationBehavior === 'native') {
+      let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.errors.join(' ') || 'Invalid value.' : '';
+      ref.current?.setCustomValidity(errorMessage);
+
+      // Prevent default tooltip for validation message.
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
+      if (!ref.current.hasAttribute('title')) {
+        ref.current.title = '';
+      }
+
+      if (!state.realtimeValidation.isInvalid) {
+        state.updateValidation(getNativeValidity(ref.current));
+      }
+    }
+  });
+
+  let onReset = useEffectEvent(() => {
+    state.updateValidation(DEFAULT_VALIDITY);
+    state.commitValidation();
+  });
+
+  let commitValidation = useEffectEvent(() => {
+    state.commitValidation();
+  });
+
+  useEffect(() => {
+    let input = ref.current!;
+    let form = input.form;
+    let onInvalid = (e: Event) => {
+      e.preventDefault();
+      commitValidation();
+    };
+
+    let onChange = () => {
+      commitValidation();
+    };
+
+    input.addEventListener('invalid', onInvalid);
+    form?.addEventListener('change', onChange);
+    form?.addEventListener('reset', onReset);
+    return () => {
+      input.removeEventListener('invalid', onInvalid);
+      form?.removeEventListener('change', onChange);
+      form?.removeEventListener('reset', onReset);
+    };
+  }, [ref, commitValidation, onReset, validationBehavior]);
+}
+
+const DEFAULT_VALIDITY: ValidationResult = {
+  isInvalid: false,
+  validationDetails: VALID_VALIDITY_STATE,
+  errors: []
+};
+
+function getValidity(input: ValidatableElement) {
+  // The native ValidityState object is live, meaning each property is a getter that returns the current state.
+  // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
+  let validity = input.validity;
+  return {
+    badInput: validity.badInput,
+    customError: validity.customError,
+    patternMismatch: validity.patternMismatch,
+    rangeOverflow: validity.rangeOverflow,
+    rangeUnderflow: validity.rangeUnderflow,
+    stepMismatch: validity.stepMismatch,
+    tooLong: validity.tooLong,
+    tooShort: validity.tooShort,
+    typeMismatch: validity.typeMismatch,
+    valueMissing: validity.valueMissing,
+    valid: validity.valid
+  };
+}
+
+function getNativeValidity(input: ValidatableElement): ValidationResult {
+  return {
+    isInvalid: !input.validity.valid,
+    validationDetails: getValidity(input),
+    errors: input.validationMessage ? [input.validationMessage] : []
+  };
+}
diff --git a/packages/@react-aria/numberfield/package.json b/packages/@react-aria/numberfield/package.json
index a8c851ebc2d..ca1737eb483 100644
--- a/packages/@react-aria/numberfield/package.json
+++ b/packages/@react-aria/numberfield/package.json
@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.3",
     "@react-aria/interactions": "^3.19.0",
     "@react-aria/live-announcer": "^3.3.1",
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index e42e5d8cfcc..30d1bac5b29 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -19,9 +19,7 @@ import {
   LabelHTMLAttributes,
   RefObject,
   useCallback,
-  useEffect,
   useMemo,
-  useRef,
   useState
 } from 'react';
 // @ts-ignore
@@ -29,6 +27,7 @@ import intlMessages from '../intl/*.json';
 import {NumberFieldState} from '@react-stately/numberfield';
 import {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
+import {useFormValidation} from '@react-aria/form';
 import {
   useLocalizedStringFormatter,
   useNumberFormatter
@@ -67,10 +66,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     minValue,
     maxValue,
     autoFocus,
-    validationState,
-    isInvalid,
-    validate,
-    validationBehavior = 'aria',
     label,
     formatOptions,
     onBlur = () => {},
@@ -89,24 +84,14 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     decrement,
     decrementToMin,
     numberValue,
-    inputValue
+    inputValue,
+    commit
   } = state;
 
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let inputId = useId(id);
-
-  let valueOnFocus = useRef(state.numberValue);
-  let didCommit = useRef(false);
-  let commit = useCallback(() => {
-    state.commit();
-    didCommit.current = true;
-  }, [state]);
-
   let {focusProps} = useFocus({
-    onFocus: () => {
-      valueOnFocus.current = state.numberValue;
-    },
     onBlur: () => {
       // Set input value to normalized valid value
       commit();
@@ -203,18 +188,22 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   }, [commit]);
 
-  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useFormattedTextField({
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
     ...otherProps,
     ...domProps,
+    name: undefined,
     label,
     autoFocus,
     isDisabled,
     isReadOnly,
     isRequired,
-    validationState,
     isInvalid,
-    validate: useCallback(() => validate?.(state.numberValue), [state.numberValue, validate]),
-    validationBehavior,
+    // Disable validation in useTextField. We handle it below.
+    validationState: undefined,
+    validate: undefined,
+    validationBehavior: undefined,
+    onValidationChange: undefined,
     value: inputValue,
     defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here
     autoComplete: 'off',
@@ -230,10 +219,11 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),
     onKeyUp,
     description,
-    errorMessage
+    errorMessage: errorMessage || errors
   }, state, inputRef);
 
   useFormReset(inputRef, state.numberValue, state.setNumberValue);
+  useFormValidation(props, state, inputRef);
 
   let inputProps = mergeProps(
     spinButtonProps,
@@ -249,12 +239,12 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
       'aria-valuenow': null,
       'aria-valuetext': null,
       autoCorrect: 'off',
-      spellCheck: 'false',
-      name: null
+      spellCheck: 'false'
     }
   );
 
-  if (validationBehavior === 'native') {
+  if (props.validationBehavior === 'native') {
+    inputProps.required = isRequired;
     inputProps['aria-required'] = undefined;
   }
 
@@ -318,23 +308,12 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onPressStart: onButtonPressStart
   });
 
-  // After the value is committed, check if the value changed and emit a native "change" event for form validation to pick up.
-  // NOTE: This useEffect must be last so that form validation effects have already run.
-  useEffect(() => {
-    if (didCommit.current) {
-      didCommit.current = false;
-      if (state.numberValue !== valueOnFocus.current) {
-        inputRef.current?.dispatchEvent(new Event('change', {bubbles: true}));
-      }
-    }
-  });
-
   return {
     groupProps: {
       ...focusWithinProps,
       role: 'group',
       'aria-disabled': isDisabled,
-      'aria-invalid': isInvalid || validationState === 'invalid' ? 'true' : undefined
+      'aria-invalid': isInvalid ? 'true' : undefined
     },
     labelProps,
     inputProps,
@@ -342,6 +321,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     decrementButtonProps,
     errorMessageProps,
     descriptionProps,
-    ...validation
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/radio/package.json b/packages/@react-aria/radio/package.json
index ebb2f6a7658..82d9c719721 100644
--- a/packages/@react-aria/radio/package.json
+++ b/packages/@react-aria/radio/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@react-aria/focus": "^3.14.2",
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.3",
     "@react-aria/interactions": "^3.19.0",
     "@react-aria/label": "^3.7.1",
diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts
index 7db653f661f..ef67f70c428 100644
--- a/packages/@react-aria/radio/src/useRadio.ts
+++ b/packages/@react-aria/radio/src/useRadio.ts
@@ -11,11 +11,12 @@
  */
 
 import {AriaRadioProps} from '@react-types/radio';
-import {filterDOMProps, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
-import {InputHTMLAttributes, RefObject, useCallback} from 'react';
+import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
+import {InputHTMLAttributes, RefObject} from 'react';
 import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {useFocusable} from '@react-aria/focus';
+import {useFormValidation} from '@react-aria/form';
 import {usePress} from '@react-aria/interactions';
 
 export interface RadioAria {
@@ -81,17 +82,8 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
   }
 
   let {name, descriptionId, errorMessageId, validationBehavior} = radioGroupData.get(state)!;
-
-  useFormValidation({
-    name,
-    validationBehavior,
-    validate: useCallback(() => state.groupValidationErrors, [state.groupValidationErrors]),
-    onValidationChange(e) {
-      state.setValidation(e);
-    }
-  }, state.selectedValue, ref);
-
   useFormReset(ref, state.selectedValue, state.setSelectedValue);
+  useFormValidation({validationBehavior}, state, ref);
 
   return {
     inputProps: mergeProps(domProps, {
diff --git a/packages/@react-aria/radio/src/useRadioGroup.ts b/packages/@react-aria/radio/src/useRadioGroup.ts
index cb246699339..6f5e9ae1b59 100644
--- a/packages/@react-aria/radio/src/useRadioGroup.ts
+++ b/packages/@react-aria/radio/src/useRadioGroup.ts
@@ -48,13 +48,14 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
   } = props;
   let {direction} = useLocale();
 
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     // Radio group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
     labelElementType: 'span',
     isInvalid: state.isInvalid,
-    errorMessage: props.errorMessage || state.validationErrors
+    errorMessage: props.errorMessage || errors
   });
 
   let domProps = filterDOMProps(props, {labelable: true});
@@ -144,8 +145,8 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     labelProps,
     descriptionProps,
     errorMessageProps,
-    isInvalid: state.isInvalid,
-    errors: state.validationErrors,
-    validationDetails: state.validationDetails
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/textfield/package.json b/packages/@react-aria/textfield/package.json
index 585a1ce7036..13cbc662132 100644
--- a/packages/@react-aria/textfield/package.json
+++ b/packages/@react-aria/textfield/package.json
@@ -23,8 +23,10 @@
   },
   "dependencies": {
     "@react-aria/focus": "^3.14.2",
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/label": "^3.7.1",
     "@react-aria/utils": "^3.21.0",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/utils": "^3.8.0",
     "@react-types/shared": "^3.21.0",
     "@react-types/textfield": "^3.8.1",
diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
index 653eec45b0a..a168e3bcc29 100644
--- a/packages/@react-aria/textfield/src/useTextField.ts
+++ b/packages/@react-aria/textfield/src/useTextField.ts
@@ -20,10 +20,12 @@ import {
   RefObject
 } from 'react';
 import {DOMAttributes, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
 import {useControlledState} from '@react-stately/utils';
 import {useField} from '@react-aria/label';
 import {useFocusable} from '@react-aria/focus';
+import {useFormValidation} from '@react-aria/form';
+import {useFormValidationState} from '@react-stately/form';
 
 /**
  * A map of HTML element names and their interface types.
@@ -116,7 +118,11 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
   }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;
   let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);
   let {focusableProps} = useFocusable(props, ref);
-  let {isInvalid, errors, validationDetails} = useFormValidation(props, value, ref);
+  let validationState = useFormValidationState({
+    ...props,
+    value
+  });
+  let {isInvalid, errors, validationDetails} = validationState.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     isInvalid,
@@ -130,6 +136,7 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
   };
 
   useFormReset(ref, value, setValue);
+  useFormValidation(props, validationState, ref);
 
   return {
     labelProps,
diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts
index 8c4235ceb54..a3c2fdaf5e0 100644
--- a/packages/@react-aria/toggle/src/useToggle.ts
+++ b/packages/@react-aria/toggle/src/useToggle.ts
@@ -11,14 +11,13 @@
  */
 
 import {AriaToggleProps} from '@react-types/checkbox';
-import {filterDOMProps, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
 import {InputHTMLAttributes, RefObject} from 'react';
 import {ToggleState} from '@react-stately/toggle';
 import {useFocusable} from '@react-aria/focus';
 import {usePress} from '@react-aria/interactions';
-import {ValidationResult} from '@react-types/shared';
 
-export interface ToggleAria extends ValidationResult {
+export interface ToggleAria {
   /**
    * Props to be spread on the input element.
    */
@@ -48,7 +47,9 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     children,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
-    validationBehavior = 'aria'
+    validationBehavior = 'aria',
+    validationState = 'valid',
+    isInvalid
   } = props;
 
   let onChange = (e) => {
@@ -75,8 +76,6 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
 
   useFormReset(ref, state.isSelected, state.setSelected);
 
-  let {isInvalid, errors, validationDetails} = useFormValidation(props, state.isSelected, ref);
-
   return {
     inputProps: mergeProps(domProps, {
       'aria-invalid': isInvalid || undefined,
@@ -96,8 +95,6 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
     isPressed,
     isDisabled,
     isReadOnly,
-    isInvalid,
-    errors,
-    validationDetails
+    isInvalid: isInvalid || validationState === 'invalid'
   };
 }
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index 19de8ff79db..a689bf6f77d 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -39,4 +39,3 @@ export {isVirtualClick, isVirtualPointerEvent} from './isVirtualEvent';
 export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
-export {useFormValidation, FormValidationContext} from './useFormValidation';
diff --git a/packages/@react-aria/utils/src/useFormValidation.ts b/packages/@react-aria/utils/src/useFormValidation.ts
deleted file mode 100644
index 1ba7273ddf0..00000000000
--- a/packages/@react-aria/utils/src/useFormValidation.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {createContext, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {CUSTOM_VALIDITY_STATE, isEqualValidation, useValidate, VALID_VALIDITY_STATE} from '@react-stately/utils';
-import {useEffectEvent} from './useEffectEvent';
-import {Validation, ValidationErrors, ValidationResult} from '@react-types/shared';
-
-type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-
-export const FormValidationContext = createContext<ValidationErrors>({});
-
-interface FormValidationProps<T> extends Validation<T> {
-  name?: string
-}
-
-export function useFormValidation<T>(props: FormValidationProps<T>, value: T, ref: RefObject<ValidatableElement>): ValidationResult {
-  let {isInvalid, validationState, name, validate, validationBehavior, onValidationChange} = props;
-
-  // backward compatibility.
-  if (validationState) {
-    isInvalid ||= validationState === 'invalid';
-  }
-
-  // If the isInvalid prop is true, update validation result in realtime (controlled).
-  let controlledError: ValidationResult | null = isInvalid ? {
-    isInvalid: true,
-    errors: [],
-    validationDetails: CUSTOM_VALIDITY_STATE
-  } : null;
-
-  // Perform custom client side validation.
-  let clientErrors = useValidate(validate, value);
-  let clientError: ValidationResult | null = useMemo(() => {
-    return clientErrors.length ? {
-      isInvalid: true,
-      errors: clientErrors,
-      validationDetails: CUSTOM_VALIDITY_STATE
-    } : null;
-  }, [clientErrors]);
-
-  // Clear server errors when the user changes the value.
-  let [isServerErrorCleared, setServerErrorCleared] = useState(false);
-  useEffect(() => {
-    let input = ref.current!;
-    let form = input.form;
-    let onChange = () => setServerErrorCleared(true);
-    let onFormChange = (e) => {
-      // Clear if any input with the same name is updated (e.g. in a checkbox/radio group).
-      if (e.target.name === name) {
-        setServerErrorCleared(true);
-      }
-    };
-    input.addEventListener('change', onChange);
-    form?.addEventListener('change', onFormChange);
-    form?.addEventListener('reset', onChange);
-    return () => {
-      input.removeEventListener('change', onChange);
-      form?.removeEventListener('change', onFormChange);
-      form?.removeEventListener('reset', onChange);
-    };
-  }, [ref, name]);
-
-  // Get relevant server errors from the form.
-  let serverErrors = useContext(FormValidationContext);
-  let serverErrorMessages = useMemo(() => {
-    if (name) {
-      setServerErrorCleared(false);
-      let errors = serverErrors[name];
-      if (!errors) {
-        return [];
-      }
-      return Array.isArray(errors) ? errors : [errors];
-    }
-    return [];
-  }, [serverErrors, name]);
-
-  let serverError: ValidationResult | null = useMemo(() => {
-    return serverErrorMessages.length && !isServerErrorCleared ? {
-      isInvalid: true,
-      errors: serverErrorMessages,
-      validationDetails: CUSTOM_VALIDITY_STATE
-    } : null;
-  }, [isServerErrorCleared, serverErrorMessages]);
-
-  // Update the native element's validity based on custom client and server validation.
-  let lastError = useRef(null);
-  useEffect(() => {
-    if (validationBehavior === 'native') {
-      let errorMessage = '';
-      if (isInvalid) {
-        // This is not shown to the user, it's just there to prevent form submission.
-        // A custom localized string should be provided to the component the the errorMessage prop/slot.
-        errorMessage = 'Invalid value.';
-      } else {
-        errorMessage = serverError ? serverError.errors.join(' ') : clientErrors.join(' ');
-      }
-      ref.current?.setCustomValidity(errorMessage);
-
-      // Prevent default tooltip for validation message.
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
-      if (!ref.current.hasAttribute('title')) {
-        ref.current.title = '';
-      }
-
-      // Report server errors immediately.
-      if (!isEqualValidation(serverError, lastError.current) && ref.current) {
-        lastError.current = serverError;
-        updateNativeValidity(getNativeValidity(ref.current));
-      }
-    } else {
-      let e = serverError || clientError || DEFAULT_VALIDITY;
-      if (!controlledError && !isEqualValidation(e, lastError.current)) {
-        lastError.current = e;
-        onValidationChange?.(e);
-      }
-    }
-  });
-
-  // Track native element validity for built in validation (e.g. required).
-  let [nativeValidity, setNativeValidity] = useState(DEFAULT_VALIDITY);
-  let updateNativeValidity = e => {
-    if (!controlledError) {
-      // Use serverError/clientError if set so we get the original (separate) error messages.
-      e = serverError || clientError || e;
-      setNativeValidity(e);
-      onValidationChange?.(e);
-    }
-  };
-
-  useInputValidity(validationBehavior === 'native' ? ref : null, updateNativeValidity);
-
-  if (validationBehavior === 'native') {
-    return controlledError || serverError || nativeValidity;
-  } else {
-    return controlledError || serverError || clientError || DEFAULT_VALIDITY;
-  }
-}
-
-const DEFAULT_VALIDITY: ValidationResult = {
-  isInvalid: false,
-  validationDetails: VALID_VALIDITY_STATE,
-  errors: []
-};
-
-function getValidity(input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) {
-  // The native ValidityState object is live, meaning each property is a getter that returns the current state.
-  // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
-  let validity = input.validity;
-  return {
-    badInput: validity.badInput,
-    customError: validity.customError,
-    patternMismatch: validity.patternMismatch,
-    rangeOverflow: validity.rangeOverflow,
-    rangeUnderflow: validity.rangeUnderflow,
-    stepMismatch: validity.stepMismatch,
-    tooLong: validity.tooLong,
-    tooShort: validity.tooShort,
-    typeMismatch: validity.typeMismatch,
-    valueMissing: validity.valueMissing,
-    valid: validity.valid
-  };
-}
-
-function useInputValidity(
-  inputRef: RefObject<ValidatableElement> | null,
-  onValidationChange?: (value: ValidationResult) => void
-) {
-  let validation = useRef(DEFAULT_VALIDITY);
-  let updateValidation = useEffectEvent((newValidation: ValidationResult) => {
-    // Ignore duplicate events.
-    if (isEqualValidation(validation.current, newValidation)) {
-      return;
-    }
-
-    validation.current = newValidation;
-    if (onValidationChange) {
-      onValidationChange(newValidation);
-    }
-  });
-
-  useEffect(() => {
-    if (!inputRef) {
-      return;
-    }
-
-    let input = inputRef.current!;
-    let form = input.form;
-    let onInvalid = (e: Event) => {
-      e.preventDefault();
-      updateValidation(getNativeValidity(input));
-    };
-
-    let onChange = () => {
-      if (input.validity.valid || !validation.current.validationDetails.valid) {
-        updateValidation(getNativeValidity(input));
-      }
-    };
-
-    let onReset = () => {
-      updateValidation(DEFAULT_VALIDITY);
-    };
-
-    input.addEventListener('invalid', onInvalid);
-    form?.addEventListener('change', onChange);
-    // form?.addEventListener('focusout', onChange);
-    form?.addEventListener('reset', onReset);
-    return () => {
-      input.removeEventListener('invalid', onInvalid);
-      form?.removeEventListener('change', onChange);
-      form?.removeEventListener('focusout', onChange);
-      form?.removeEventListener('reset', onReset);
-    };
-  }, [inputRef, updateValidation]);
-}
-
-function getNativeValidity(input: ValidatableElement): ValidationResult {
-  return {
-    isInvalid: !input.validity.valid,
-    validationDetails: getValidity(input),
-    errors: input.validationMessage ? [input.validationMessage] : []
-  };
-}
diff --git a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
index 9cafcf70026..1bca86e637f 100644
--- a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
+++ b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
@@ -294,7 +294,7 @@ describe('CheckboxGroup', () => {
     expect(checkboxes[2]).toHaveAttribute('aria-required');
   });
 
-  it('does not add aria-invalid to every checkbox by default', () => {
+  it('adds aria-invalid to all checkboxes when the group is invalid', () => {
     let {getAllByRole} = render(
       <Provider theme={theme}>
         <CheckboxGroup label="Favorite Pet" isInvalid>
@@ -306,9 +306,9 @@ describe('CheckboxGroup', () => {
     );
 
     let checkboxes = getAllByRole('checkbox');
-    expect(checkboxes[0]).not.toHaveAttribute('aria-invalid');
-    expect(checkboxes[1]).not.toHaveAttribute('aria-invalid');
-    expect(checkboxes[2]).not.toHaveAttribute('aria-invalid');
+    expect(checkboxes[0]).toHaveAttribute('aria-invalid');
+    expect(checkboxes[1]).toHaveAttribute('aria-invalid');
+    expect(checkboxes[2]).toHaveAttribute('aria-invalid');
   });
 
   it('supports invalid state on individual checkboxes', () => {
@@ -504,7 +504,7 @@ describe('CheckboxGroup', () => {
         await user.click(checkboxes[1]);
         expect(checkboxes[1].validity.valid).toBe(true);
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(3);
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
         expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
@@ -610,50 +610,6 @@ describe('CheckboxGroup', () => {
         expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
-      it('combines group and checkbox level validation messages', async () => {
-        let onValidationChange = jest.fn();
-        let {getAllByRole, getByRole, getByTestId} = render(
-          <Provider theme={theme}>
-            <Form data-testid="form">
-              <CheckboxGroup label="Agree to the following" validationBehavior="native" validate={v => v.length < 3 ? 'You must accept all terms.' : null} onValidationChange={onValidationChange}>
-                <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
-                <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
-                <Checkbox value="privacy">Privacy policy</Checkbox>
-              </CheckboxGroup>
-            </Form>
-          </Provider>
-        );
-
-        let group = getByRole('group');
-        expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).not.toHaveBeenCalled();
-
-        let checkboxes = getAllByRole('checkbox');
-        act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.', 'You must accept the terms.', 'You must accept the cookies.']));
-
-        expect(group).toHaveAttribute('aria-describedby');
-        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the terms. You must accept the cookies.');
-
-        await user.click(checkboxes[0]);
-        expect(group).toHaveAttribute('aria-describedby');
-        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the cookies.');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.', 'You must accept the cookies.']));
-
-        await user.click(checkboxes[1]);
-        expect(group).toHaveAttribute('aria-describedby');
-        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms.');
-        expect(onValidationChange).toHaveBeenCalledTimes(3);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.']));
-
-        await user.click(checkboxes[2]);
-        expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(4);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
-      });
-
       it('supports server validation', async () => {
         function Test() {
           let [serverErrors, setServerErrors] = React.useState({});
@@ -756,7 +712,7 @@ describe('CheckboxGroup', () => {
         await user.click(checkboxes[2]);
         expect(group).not.toHaveAttribute('aria-describedby');
 
-        expect(onValidationChange).toHaveBeenCalledTimes(4);
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
         expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
@@ -798,43 +754,6 @@ describe('CheckboxGroup', () => {
         expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
-      it('combines group and checkbox level validation messages', async () => {
-        let onValidationChange = jest.fn();
-        let {getAllByRole, getByRole} = render(
-          <Provider theme={theme}>
-            <CheckboxGroup label="Agree to the following" validate={v => v.length < 3 ? 'You must accept all terms.' : null} onValidationChange={onValidationChange}>
-              <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
-              <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
-              <Checkbox value="privacy">Privacy policy</Checkbox>
-            </CheckboxGroup>
-          </Provider>
-        );
-
-        let group = getByRole('group');
-        let checkboxes = getAllByRole('checkbox');
-        for (let input of checkboxes) {
-          expect(input).toHaveAttribute('aria-invalid', 'true');
-        }
-
-        expect(group).toHaveAttribute('aria-describedby');
-        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the terms. You must accept the cookies.');
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms.', 'You must accept the terms.', 'You must accept the cookies.']));
-
-        await user.click(checkboxes[0]);
-        expect(group).toHaveAttribute('aria-describedby');
-        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms. You must accept the cookies.');
-
-        await user.click(checkboxes[1]);
-        expect(group).toHaveAttribute('aria-describedby');
-        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms.');
-
-        await user.click(checkboxes[2]);
-        expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(4);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
-      });
-
       it('supports server validation', async () => {
         let {getAllByRole, getByRole} = render(
           <Provider theme={theme}>
diff --git a/packages/@react-spectrum/form/package.json b/packages/@react-spectrum/form/package.json
index 0100b46fc2f..eb100e301e4 100644
--- a/packages/@react-spectrum/form/package.json
+++ b/packages/@react-spectrum/form/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@react-aria/utils": "^3.21.0",
     "@react-spectrum/utils": "^3.11.0",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-types/form": "^3.5.4",
     "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0"
diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx
index e491143968a..ffd9cbb47fd 100644
--- a/packages/@react-spectrum/form/src/Form.tsx
+++ b/packages/@react-spectrum/form/src/Form.tsx
@@ -12,7 +12,8 @@
 
 import {Alignment, DOMRef, LabelPosition, SpectrumLabelableProps} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {filterDOMProps, FormValidationContext} from '@react-aria/utils';
+import {filterDOMProps} from '@react-aria/utils';
+import {FormValidationContext} from '@react-stately/form';
 import {Provider, useProviderProps} from '@react-spectrum/provider';
 import React, {useContext} from 'react';
 import {SpectrumFormProps} from '@react-types/form';
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
index 5e9637c44c2..881bf48c74e 100644
--- a/packages/@react-spectrum/numberfield/test/NumberField.test.js
+++ b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -2415,6 +2415,7 @@ describe('NumberField', function () {
 
         await user.tab();
         await user.keyboard('4');
+        await user.tab();
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input).not.toHaveAttribute('aria-invalid');
 
@@ -2426,7 +2427,7 @@ describe('NumberField', function () {
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form validationErrors={{value: 'Invalid value'}}>
-              <NumberField data-testid="input" label="Value" name="value" validationBehavior="native" />
+              <NumberField data-testid="input" label="Value" name="value" />
             </Form>
           </Provider>
         );
diff --git a/packages/@react-spectrum/textfield/test/TextField.test.js b/packages/@react-spectrum/textfield/test/TextField.test.js
index 3a5487fa118..06a2f66acd7 100644
--- a/packages/@react-spectrum/textfield/test/TextField.test.js
+++ b/packages/@react-spectrum/textfield/test/TextField.test.js
@@ -668,7 +668,7 @@ describe('Shared TextField behavior', () => {
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form validationErrors={{name: 'Invalid name'}}>
-              <Component data-testid="input" label="Name" name="name" validationBehavior="native" />
+              <Component data-testid="input" label="Name" name="name" />
             </Form>
           </Provider>
         );
diff --git a/packages/@react-stately/checkbox/package.json b/packages/@react-stately/checkbox/package.json
index 5f122caf5fb..c232bf64327 100644
--- a/packages/@react-stately/checkbox/package.json
+++ b/packages/@react-stately/checkbox/package.json
@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/toggle": "^3.6.3",
     "@react-stately/utils": "^3.8.0",
     "@react-types/checkbox": "^3.5.2",
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index 1318e202d53..8cc9137dbf9 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -11,8 +11,9 @@
  */
 
 import {CheckboxGroupProps} from '@react-types/checkbox';
-import {useControlledState, useValidate, VALID_VALIDITY_STATE} from '@react-stately/utils';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useControlledState} from '@react-stately/utils';
+import {useFormValidationState, VALID_VALIDITY_STATE} from '@react-stately/form';
+import {useMemo, useState} from 'react';
 import {ValidationResult, ValidationState} from '@react-types/shared';
 
 export interface CheckboxGroupState {
@@ -34,14 +35,8 @@ export interface CheckboxGroupState {
   /** Whether the checkbox group is invalid. */
   readonly isInvalid: boolean,
 
-  /** A list of group level validation error messages resulting from the `validate` prop. */
-  readonly groupValidationErrors: string[],
-
-  /** The aggregated error messages for the group and all checkboxes. */
-  readonly validationErrors: string[],
-
-  /** The aggregated validation details for all checkboxes in the group. */
-  readonly validationDetails: ValidityState,
+  realtimeValidation: ValidationResult,
+  displayValidation: ValidationResult,
 
   /**
    * Whether the checkboxes in the group are required.
@@ -77,19 +72,26 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
   let [invalidValues, setInvalidValues] = useState(new Map<string, ValidationResult>());
   let isRequired = props.isRequired && selectedValues.length === 0;
 
-  let {validate, onValidationChange} = props;
-  let groupValidationErrors = useValidate(validate, selectedValues);
+  // Keep realtime validation separate so we isolate group level validation from checkbox level validation.
+  // This handles the isInvalid and validate props.
+  let {realtimeValidation} = useFormValidationState({
+    isInvalid: props.isInvalid,
+    validationState: props.validationState,
+    validate: props.validate,
+    value: selectedValues
+  });
 
-  // Aggregate errors from all invalid checkboxes for checkbox group level validation.
+  // Aggregate errors from all invalid checkboxes.
   let aggregatedValidation = useMemo(() => aggregateValidation(invalidValues), [invalidValues]);
   let isInvalid = props.isInvalid || props.validationState === 'invalid' || aggregatedValidation.isInvalid;
 
-  let lastValidation = useRef(aggregatedValidation);
-  useEffect(() => {
-    if (aggregatedValidation !== lastValidation.current) {
-      lastValidation.current = aggregatedValidation;
-      onValidationChange?.(aggregatedValidation);
-    }
+  // Get display validation for the group. This handles the aggregated errors from each checkbox,
+  // along with server errors, and reports validation changes to the user.
+  let validation = useFormValidationState({
+    value: selectedValues,
+    builtinValidation: aggregatedValidation,
+    name: props.name,
+    onValidationChange: props.onValidationChange
   });
 
   const state: CheckboxGroupState = {
@@ -100,6 +102,7 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
       }
 
       setValue(value);
+      validation.commitValidation(value);
     },
     isDisabled: props.isDisabled || false,
     isReadOnly: props.isReadOnly || false,
@@ -111,7 +114,9 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
         return;
       }
       if (!selectedValues.includes(value)) {
-        setValue(selectedValues.concat(value));
+        let newValue = selectedValues.concat(value);
+        setValue(newValue);
+        validation.commitValidation(newValue);
       }
     },
     removeValue(value) {
@@ -119,18 +124,21 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
         return;
       }
       if (selectedValues.includes(value)) {
-        setValue(selectedValues.filter(existingValue => existingValue !== value));
+        let newValue = selectedValues.filter(existingValue => existingValue !== value);
+        setValue(newValue);
+        validation.commitValidation(newValue);
       }
     },
     toggleValue(value) {
       if (props.isReadOnly || props.isDisabled) {
         return;
       }
-      if (selectedValues.includes(value)) {
-        setValue(selectedValues.filter(existingValue => existingValue !== value));
-      } else {
-        setValue(selectedValues.concat(value));
-      }
+
+      let newValue = selectedValues.includes(value)
+        ? selectedValues.filter(existingValue => existingValue !== value)
+        : selectedValues.concat(value);
+      setValue(newValue);
+      validation.commitValidation(newValue);
     },
     setInvalid(value, validation) {
       setInvalidValues(invalidValues => {
@@ -146,10 +154,9 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
     },
     validationState: props.validationState ?? (isInvalid ? 'invalid' : null),
     isInvalid,
-    groupValidationErrors,
-    isRequired,
-    validationErrors: aggregatedValidation.errors,
-    validationDetails: aggregatedValidation.validationDetails
+    realtimeValidation,
+    displayValidation: validation.displayValidation,
+    isRequired
   };
 
   return state;
diff --git a/packages/@react-stately/form/README.md b/packages/@react-stately/form/README.md
new file mode 100644
index 00000000000..41d98ae83d7
--- /dev/null
+++ b/packages/@react-stately/form/README.md
@@ -0,0 +1,3 @@
+# @react-stately/form
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
diff --git a/packages/@react-stately/form/index.ts b/packages/@react-stately/form/index.ts
new file mode 100644
index 00000000000..7e5b036e91f
--- /dev/null
+++ b/packages/@react-stately/form/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';
diff --git a/packages/@react-stately/form/package.json b/packages/@react-stately/form/package.json
new file mode 100644
index 00000000000..458a388e471
--- /dev/null
+++ b/packages/@react-stately/form/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@react-stately/form",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "private": true,
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-stately/utils": "^3.0.0",
+    "@react-types/shared": "^3.21.0",
+    "@swc/helpers": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/@react-stately/form/src/index.ts b/packages/@react-stately/form/src/index.ts
new file mode 100644
index 00000000000..a0be408e1f6
--- /dev/null
+++ b/packages/@react-stately/form/src/index.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export {FormValidationContext, useFormValidationState, VALID_VALIDITY_STATE} from './useFormValidationState';
+export type {FormValidationState} from './useFormValidationState';
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
new file mode 100644
index 00000000000..9b66945e148
--- /dev/null
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -0,0 +1,172 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {Validation, ValidationErrors, ValidationFunction, ValidationResult} from '@react-types/shared';
+
+export const VALID_VALIDITY_STATE: ValidityState = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+
+const CUSTOM_VALIDITY_STATE: ValidityState = {
+  ...VALID_VALIDITY_STATE,
+  customError: true,
+  valid: false
+};
+
+const DEFAULT_VALIDITY: ValidationResult = {
+  isInvalid: false,
+  validationDetails: VALID_VALIDITY_STATE,
+  errors: []
+};
+
+export const FormValidationContext = createContext<ValidationErrors>({});
+
+interface FormValidationProps<T> extends Validation<T> {
+  builtinValidation?: ValidationResult,
+  name?: string,
+  value: T
+}
+
+export interface FormValidationState<T> {
+  realtimeValidation: ValidationResult,
+  displayValidation: ValidationResult,
+  updateValidation(result: ValidationResult): void,
+  commitValidation(nextValue?: T): void
+}
+
+export function useFormValidationState<T>(props: FormValidationProps<T>): FormValidationState<T> {
+  let {isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = 'aria', onValidationChange} = props;
+
+  // backward compatibility.
+  if (validationState) {
+    isInvalid ||= validationState === 'invalid';
+  }
+
+  // If the isInvalid prop is true, update validation result in realtime (controlled).
+  let controlledError: ValidationResult | null = isInvalid ? {
+    isInvalid: true,
+    errors: [],
+    validationDetails: CUSTOM_VALIDITY_STATE
+  } : null;
+
+  // Perform custom client side validation.
+  let clientError: ValidationResult | null = useMemo(() => getValidationResult(runValidate(validate, value)), [validate, value]);
+
+  if (builtinValidation?.validationDetails.valid) {
+    builtinValidation = null;
+  }
+
+  // Clear server errors when the user changes the value.
+  let [isServerErrorCleared, setServerErrorCleared] = useState(false);
+
+  // Get relevant server errors from the form.
+  let serverErrors = useContext(FormValidationContext);
+  let serverErrorMessages = useMemo(() => {
+    if (name) {
+      setServerErrorCleared(false);
+      let errors = serverErrors[name];
+      if (!errors) {
+        return [];
+      }
+      return Array.isArray(errors) ? errors : [errors];
+    }
+    return [];
+  }, [serverErrors, name]);
+
+  let serverError: ValidationResult | null = useMemo(() => getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
+
+  let nativeValidity = useRef(DEFAULT_VALIDITY);
+  let [currentValidity, setCurrentValidity] = useState(DEFAULT_VALIDITY);
+  let lastError = useRef(DEFAULT_VALIDITY);
+  let commitValidation = (value?: T) => {
+    if (controlledError) {
+      return;
+    }
+
+    let nextClientError = clientError;
+    if (value !== undefined) {
+      nextClientError = getValidationResult(runValidate(validate, value));
+    }
+
+    let error = nextClientError || builtinValidation || nativeValidity.current;
+    if (!isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+      onValidationChange?.(error);
+    }
+  };
+
+  useEffect(() => {
+    if (validationBehavior === 'aria' && onValidationChange) {
+      commitValidation();
+    }
+  });
+
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || DEFAULT_VALIDITY;
+  let displayValidation = validationBehavior === 'native'
+    ? controlledError || serverError || currentValidity
+    : realtimeValidation;
+
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value) {
+      nativeValidity.current = value;
+    },
+    commitValidation(value) {
+      commitValidation(value);
+      setServerErrorCleared(true);
+    }
+  };
+}
+
+function runValidate<T>(validate: ValidationFunction<T>, value: T): string[] {
+  if (typeof validate === 'function') {
+    let e = validate(value);
+    if (e && typeof e !== 'boolean') {
+      return Array.isArray(e) ? e : [e];
+    }
+  }
+
+  return [];
+}
+
+function getValidationResult(errors: string[]): ValidationResult | null {
+  return errors.length ? {
+    isInvalid: true,
+    errors: errors,
+    validationDetails: CUSTOM_VALIDITY_STATE
+  } : null;
+}
+
+function isEqualValidation(a: ValidationResult | null, b: ValidationResult | null): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  return a && b
+    && a.isInvalid === b.isInvalid
+    && a.errors.length === b.errors.length
+    && a.errors.every((a, i) => a === b.errors[i])
+    && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
diff --git a/packages/@react-stately/numberfield/package.json b/packages/@react-stately/numberfield/package.json
index 9a56cd37189..f9a496fa655 100644
--- a/packages/@react-stately/numberfield/package.json
+++ b/packages/@react-stately/numberfield/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@internationalized/number": "^3.3.0",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/utils": "^3.8.0",
     "@react-types/numberfield": "^3.6.1",
     "@react-types/shared": "^3.21.0",
diff --git a/packages/@react-stately/numberfield/src/useNumberFieldState.ts b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
index c658d2ab89e..acaec587d4a 100644
--- a/packages/@react-stately/numberfield/src/useNumberFieldState.ts
+++ b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
@@ -11,11 +11,12 @@
  */
 
 import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {NumberFieldProps} from '@react-types/numberfield';
 import {NumberFormatter, NumberParser} from '@internationalized/number';
 import {useCallback, useMemo, useState} from 'react';
 
-export interface NumberFieldState {
+export interface NumberFieldState extends FormValidationState<number> {
   /**
    * The current text value of the input. Updated as the user types,
    * and formatted according to `formatOptions` on blur.
@@ -98,6 +99,11 @@ export function useNumberFieldState(
   let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);
   let format = useCallback((value: number) => (isNaN(value) || value === null) ? '' : formatter.format(value), [formatter]);
 
+  let validation = useFormValidationState({
+    ...props,
+    value: numberValue
+  });
+
   let clampStep = !isNaN(step) ? step : 1;
   if (intlOptions.style === 'percent' && isNaN(step)) {
     clampStep = 0.01;
@@ -122,12 +128,14 @@ export function useNumberFieldState(
     if (!inputValue.length) {
       setNumberValue(NaN);
       setInputValue(value === undefined ? '' : format(numberValue));
+      validation.commitValidation(NaN);
       return;
     }
 
     // if it failed to parse, then reset input to formatted version of current number
     if (isNaN(parsedValue)) {
       setInputValue(format(numberValue));
+      validation.commitValidation();
       return;
     }
 
@@ -141,6 +149,7 @@ export function useNumberFieldState(
 
     clampedValue = numberParser.parse(format(clampedValue));
     setNumberValue(clampedValue);
+    validation.commitValidation(clampedValue);
 
     // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
     setInputValue(format(value === undefined ? clampedValue : numberValue));
@@ -232,6 +241,7 @@ export function useNumberFieldState(
   let validate = (value: string) => numberParser.isValidPartialNumber(value, minValue, maxValue);
 
   return {
+    ...validation,
     validate,
     increment,
     incrementToMax,
diff --git a/packages/@react-stately/radio/package.json b/packages/@react-stately/radio/package.json
index d75b52af64c..b367f6a0305 100644
--- a/packages/@react-stately/radio/package.json
+++ b/packages/@react-stately/radio/package.json
@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/utils": "^3.8.0",
     "@react-types/radio": "^3.5.2",
     "@react-types/shared": "^3.21.0",
diff --git a/packages/@react-stately/radio/src/useRadioGroupState.ts b/packages/@react-stately/radio/src/useRadioGroupState.ts
index a17ded4435d..cad35a7ba77 100644
--- a/packages/@react-stately/radio/src/useRadioGroupState.ts
+++ b/packages/@react-stately/radio/src/useRadioGroupState.ts
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {isEqualValidation, useControlledState, useValidate, VALID_VALIDITY_STATE} from '@react-stately/utils';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {RadioGroupProps} from '@react-types/radio';
-import {useMemo, useRef, useState} from 'react';
-import {ValidationResult, ValidationState} from '@react-types/shared';
+import {useControlledState} from '@react-stately/utils';
+import {useMemo, useState} from 'react';
+import {ValidationState} from '@react-types/shared';
 
-export interface RadioGroupState {
+export interface RadioGroupState extends FormValidationState<string | null> {
   /**
    * The name for the group, used for native form submission.
    * @deprecated
@@ -41,15 +42,6 @@ export interface RadioGroupState {
   /** Whether the radio group is invalid. */
   readonly isInvalid: boolean,
 
-  /** A list of group level validation error messages resulting from the `validate` prop. */
-  readonly groupValidationErrors: string[],
-
-  /** The error messages for the radio group. */
-  readonly validationErrors: string[],
-
-  /** The validation details for the radio group. */
-  readonly validationDetails: ValidityState,
-
   /** The currently selected value. */
   readonly selectedValue: string | null | undefined,
 
@@ -60,9 +52,7 @@ export interface RadioGroupState {
   readonly lastFocusedValue: string | null,
 
   /** Sets the last focused value. */
-  setLastFocusedValue(value: string): void,
-
-  setValidation(validation: ValidationResult): void
+  setLastFocusedValue(value: string): void
 }
 
 let instance = Math.round(Math.random() * 10000000000);
@@ -77,11 +67,6 @@ export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
   let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);
   let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue, props.onChange);
   let [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
-  let [validation, setValidation] = useState({
-    isInvalid: false,
-    errors: [],
-    validationDetails: VALID_VALIDITY_STATE
-  });
 
   let setSelectedValue = (value) => {
     if (!props.isReadOnly && !props.isDisabled) {
@@ -89,12 +74,15 @@ export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
     }
   };
 
-  let {validate, onValidationChange} = props;
-  let groupValidationErrors = useValidate(validate, selectedValue);
-  let isInvalid = props.isInvalid || props.validationState === 'invalid' || validation.isInvalid;
-  let lastValidation = useRef(validation);
+  let validation = useFormValidationState({
+    ...props,
+    value: selectedValue
+  });
+
+  let isInvalid = validation.displayValidation.isInvalid;
 
   return {
+    ...validation,
     name,
     selectedValue: selectedValue,
     setSelectedValue,
@@ -104,17 +92,6 @@ export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
     isReadOnly: props.isReadOnly || false,
     isRequired: props.isRequired || false,
     validationState: props.validationState || (isInvalid ? 'invalid' : null),
-    isInvalid,
-    groupValidationErrors,
-    validationErrors: validation.errors,
-    validationDetails: validation.validationDetails,
-    setValidation(e) {
-      if (!isEqualValidation(lastValidation.current, e)) {
-        lastValidation.current = e;
-        setValidation(e);
-        onValidationChange?.(e);
-        return e;
-      }
-    }
+    isInvalid
   };
 }
diff --git a/packages/@react-stately/utils/src/index.ts b/packages/@react-stately/utils/src/index.ts
index f43971ecf6a..ff98cc62647 100644
--- a/packages/@react-stately/utils/src/index.ts
+++ b/packages/@react-stately/utils/src/index.ts
@@ -11,4 +11,3 @@
  */
 export {useControlledState} from './useControlledState';
 export {clamp, snapValueToStep, toFixedNumber} from './number';
-export {VALID_VALIDITY_STATE, CUSTOM_VALIDITY_STATE, isEqualValidation, useValidate} from './validation';
diff --git a/packages/@react-stately/utils/src/validation.ts b/packages/@react-stately/utils/src/validation.ts
deleted file mode 100644
index 07402478d7e..00000000000
--- a/packages/@react-stately/utils/src/validation.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {useMemo} from 'react';
-import {ValidationFunction, ValidationResult} from '@react-types/shared';
-
-export const VALID_VALIDITY_STATE: ValidityState = {
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valueMissing: false,
-  valid: true
-};
-
-export const CUSTOM_VALIDITY_STATE: ValidityState = {
-  ...VALID_VALIDITY_STATE,
-  customError: true,
-  valid: false
-};
-
-export function isEqualValidation(a: ValidationResult | null, b: ValidationResult | null): boolean {
-  if (a === b) {
-    return true;
-  }
-
-  return a && b
-    && a.isInvalid === b.isInvalid
-    && a.errors.length === b.errors.length
-    && a.errors.every((a, i) => a === b.errors[i])
-    && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
-}
-
-export function useValidate<T>(validate: ValidationFunction<T>, value: T): string[] {
-  return useMemo(() => {
-    if (typeof validate === 'function') {
-      let e = validate(value);
-      if (e && typeof e !== 'boolean') {
-        return Array.isArray(e) ? e : [e];
-      }
-    }
-
-    return [];
-  }, [validate, value]);
-}
diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts
index eb1e84d0800..20bafde7ef0 100644
--- a/packages/@react-types/checkbox/src/index.d.ts
+++ b/packages/@react-types/checkbox/src/index.d.ts
@@ -59,7 +59,7 @@ export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLab
   'aria-controls'?: string
 }
 
-export interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, LabelableProps, HelpTextProps, Validation<string[]> {}
+export interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, InputDOMProps, LabelableProps, HelpTextProps, Validation<string[]> {}
 
 export interface CheckboxProps extends ToggleProps {
   /**
@@ -71,7 +71,7 @@ export interface CheckboxProps extends ToggleProps {
 
 export interface AriaCheckboxProps extends CheckboxProps, AriaToggleProps {}
 
-export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, InputDOMProps, AriaLabelingProps, AriaValidationProps {}
+export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, AriaLabelingProps, AriaValidationProps {}
 
 export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {
   value: string
diff --git a/packages/@react-types/label/src/index.d.ts b/packages/@react-types/label/src/index.d.ts
index 47e221ec1c4..5ca78dce69d 100644
--- a/packages/@react-types/label/src/index.d.ts
+++ b/packages/@react-types/label/src/index.d.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Alignment, DOMProps, LabelPosition, NecessityIndicator, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
+import {Alignment, DOMProps, LabelPosition, NecessityIndicator, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation, ValidationResult} from '@react-types/shared';
 import {ElementType, HTMLAttributes, ReactElement, ReactNode} from 'react';
 
 export interface LabelProps {
@@ -30,7 +30,7 @@ interface SpectrumLabelPropsBase extends LabelProps, DOMProps, StyleProps {
 
 export interface SpectrumLabelProps extends SpectrumLabelPropsBase, HTMLAttributes<HTMLElement> {}
 
-export interface SpectrumFieldProps extends SpectrumLabelPropsBase, SpectrumHelpTextProps, Omit<Validation, 'validationState'>, SpectrumFieldValidation {
+export interface SpectrumFieldProps extends SpectrumLabelPropsBase, SpectrumHelpTextProps, Omit<Validation<any>, 'validationState'>, SpectrumFieldValidation<any>, Partial<ValidationResult> {
   children: ReactElement,
   label?: ReactNode,
   contextualHelp?: ReactNode,
diff --git a/packages/@react-types/radio/src/index.d.ts b/packages/@react-types/radio/src/index.d.ts
index fe6e2184bfe..54788522166 100644
--- a/packages/@react-types/radio/src/index.d.ts
+++ b/packages/@react-types/radio/src/index.d.ts
@@ -28,7 +28,7 @@ import {
 } from '@react-types/shared';
 import {ReactElement, ReactNode} from 'react';
 
-export interface RadioGroupProps extends ValueBase<string>, InputBase, InputDOMProps, Validation<string>, LabelableProps, HelpTextProps {
+export interface RadioGroupProps extends ValueBase<string>, InputBase, InputDOMProps, Validation<string | null>, LabelableProps, HelpTextProps {
   /**
    * The axis the Radio Button(s) should align with.
    * @default 'vertical'

From 1b01e5a24e5d13fe74e2ad79d0022583b6bd2d8f Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 18 Oct 2023 21:54:58 -0700
Subject: [PATCH 08/38] DateField

---
 packages/@react-aria/datepicker/package.json  |   2 +
 .../datepicker/src/useDateField.ts            |  40 ++-
 .../@react-spectrum/datepicker/package.json   |   1 +
 .../datepicker/src/DateField.tsx              |  13 +-
 .../@react-spectrum/datepicker/src/utils.ts   |   2 +-
 .../datepicker/test/DateField.test.js         | 305 +++++++++++++++++-
 .../@react-stately/datepicker/package.json    |   1 +
 .../datepicker/src/useDateFieldState.ts       |  34 +-
 .../@react-stately/datepicker/src/utils.ts    |  18 ++
 .../@react-types/datepicker/src/index.d.ts    |  16 +-
 10 files changed, 404 insertions(+), 28 deletions(-)

diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json
index 212d9718565..594479a2335 100644
--- a/packages/@react-aria/datepicker/package.json
+++ b/packages/@react-aria/datepicker/package.json
@@ -26,12 +26,14 @@
     "@internationalized/number": "^3.3.0",
     "@internationalized/string": "^3.1.1",
     "@react-aria/focus": "^3.14.2",
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.3",
     "@react-aria/interactions": "^3.19.0",
     "@react-aria/label": "^3.7.1",
     "@react-aria/spinbutton": "^3.5.3",
     "@react-aria/utils": "^3.21.0",
     "@react-stately/datepicker": "^3.8.0",
+    "@react-stately/utils": "^3.8.0",
     "@react-types/button": "^3.9.0",
     "@react-types/calendar": "^3.4.1",
     "@react-types/datepicker": "^3.6.1",
diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index aac72195517..9931b2d3d40 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -13,14 +13,15 @@
 import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {createFocusManager, FocusManager} from '@react-aria/focus';
 import {DateFieldState, TimeFieldState} from '@react-stately/datepicker';
-import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';
-import {FocusEvent, InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
+import {InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
+import {useFormValidation} from '@react-aria/form';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
@@ -29,7 +30,7 @@ export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDate
   inputRef?: RefObject<HTMLInputElement>
 }
 
-export interface DateFieldAria {
+export interface DateFieldAria extends ValidationResult {
    /** Props for the field's visible label element, if any. */
   labelProps: DOMAttributes,
    /** Props for the field grouping element. */
@@ -63,9 +64,12 @@ export const focusManagerSymbol = '__focusManager_' + Date.now();
  * Each part of a date value is displayed in an individually editable segment.
  */
 export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || errors
   });
 
   let {focusWithinProps} = useFocusWithin({
@@ -131,6 +135,23 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
   }, [focusManager]);
 
   useFormReset(props.inputRef, state.value, state.setValue);
+  useFormValidation(props, state, props.inputRef);
+
+  let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+    type: 'hidden',
+    name: props.name,
+    value: state.value?.toString() || ''
+  };
+
+  if (props.validationBehavior === 'native') {
+    // Use a hidden <input type="text"> rather than <input type="hidden">
+    // so that an empty value blocks HTML form submission when the field is required.
+    inputProps.type = 'text';
+    inputProps.hidden = true;
+    inputProps.required = props.isRequired;
+    // Ignore react warning.
+    inputProps.onChange = () => {};
+  }
 
   let domProps = filterDOMProps(props);
   return {
@@ -152,13 +173,12 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
         }
       }
     }),
-    inputProps: {
-      type: 'hidden',
-      name: props.name,
-      value: state.value?.toString() || ''
-    },
+    inputProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
 
diff --git a/packages/@react-spectrum/datepicker/package.json b/packages/@react-spectrum/datepicker/package.json
index 5cab3c90d6d..343724479f9 100644
--- a/packages/@react-spectrum/datepicker/package.json
+++ b/packages/@react-spectrum/datepicker/package.json
@@ -46,6 +46,7 @@
     "@react-spectrum/button": "^3.14.0",
     "@react-spectrum/calendar": "^3.4.1",
     "@react-spectrum/dialog": "^3.8.3",
+    "@react-spectrum/form": "^3.6.6",
     "@react-spectrum/label": "^3.15.0",
     "@react-spectrum/layout": "^3.5.6",
     "@react-spectrum/utils": "^3.11.0",
diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx
index 7d888d09067..47503846392 100644
--- a/packages/@react-spectrum/datepicker/src/DateField.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateField.tsx
@@ -22,11 +22,13 @@ import React, {ReactElement, useRef} from 'react';
 import {useDateField} from '@react-aria/datepicker';
 import {useDateFieldState} from '@react-stately/datepicker';
 import {useFocusManagerRef, useFormatHelpText} from './utils';
+import {useFormProps} from '@react-spectrum/form';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
 function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     autoFocus,
     isDisabled,
@@ -45,7 +47,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
 
   let fieldRef = useRef(null);
   let inputRef = useRef(null);
-  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useDateField({
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useDateField({
     ...props,
     inputRef
   }, state, fieldRef);
@@ -57,6 +59,8 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
     descriptionProps.id = null;
   }
 
+  let validationState = state.validationState || (isInvalid ? 'invalid' : null);
+
   return (
     <Field
       {...props}
@@ -66,7 +70,10 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
+      isInvalid={isInvalid}
+      errors={errors}
+      validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <Input
         ref={fieldRef}
@@ -74,7 +81,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
         isDisabled={isDisabled}
         isQuiet={isQuiet}
         autoFocus={autoFocus}
-        validationState={state.validationState}
+        validationState={validationState}
         className={classNames(datepickerStyles, 'react-spectrum-DateField')}>
         {state.segments.map((segment, i) =>
           (<DatePickerSegment
diff --git a/packages/@react-spectrum/datepicker/src/utils.ts b/packages/@react-spectrum/datepicker/src/utils.ts
index 41533e1c75e..1593a745e1b 100644
--- a/packages/@react-spectrum/datepicker/src/utils.ts
+++ b/packages/@react-spectrum/datepicker/src/utils.ts
@@ -19,7 +19,7 @@ import {useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useProvider} from '@react-spectrum/provider';
 
-export function useFormatHelpText(props: Pick<SpectrumDatePickerBase, 'description' | 'showFormatHelpText'>) {
+export function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>) {
   let formatter = useDateFormatter({dateStyle: 'short'});
   let displayNames = useDisplayNames();
   return useMemo(() => {
diff --git a/packages/@react-spectrum/datepicker/test/DateField.test.js b/packages/@react-spectrum/datepicker/test/DateField.test.js
index c31a58018b4..6a9d49a1342 100644
--- a/packages/@react-spectrum/datepicker/test/DateField.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateField.test.js
@@ -10,9 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, pointerMap, render as render_, within} from '@react-spectrum/test-utils';
+import {act, createValidationResult, fireEvent, pointerMap, render as render_, within} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
 import {CalendarDate, CalendarDateTime, ZonedDateTime} from '@internationalized/date';
 import {DateField} from '../';
+import {Form} from '@react-spectrum/form';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -351,5 +353,306 @@ describe('DateField', function () {
       expect(getDescription()).toBe('Selected Date: February 3, 2020');
       expect(input).toHaveValue('2020-02-03');
     });
+
+    describe('validation', () => {
+      describe('validationBehavior=native', () => {
+        it('supports isRequired', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.keyboard('[Tab][ArrowUp][Tab][ArrowUp][Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Constraints not satisfied');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Constraints not satisfied');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports minValue and maxValue', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(input.validity.valid).toBe(false);
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+
+          await user.tab({shift: true});
+          await user.keyboard('2025');
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(input.validity.valid).toBe(false);
+          await user.tab();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(3);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
+
+          await user.tab({shift: true});
+          await user.keyboard('[ArrowDown]');
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(input.validity.valid).toBe(true);
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(4);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports validate function', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField name="date" label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validationBehavior="native" validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(false);
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+
+          expect(getDescription()).toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports server validation', async () => {
+          function Test() {
+            let [serverErrors, setServerErrors] = React.useState({});
+            let onSubmit = e => {
+              e.preventDefault();
+              setServerErrors({
+                date: 'Invalid value'
+              });
+            };
+
+            return (
+              <Provider theme={theme}>
+                <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                  <DateField name="date" label="Value" validationBehavior="native" />
+                  <Button type="submit" data-testid="submit">Submit</Button>
+                </Form>
+              </Provider>
+            );
+          }
+
+          let {getByTestId, getByRole} = render(<Test />);
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          await user.click(getByTestId('submit'));
+
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+          expect(input.validity.valid).toBe(false);
+
+          await user.tab({shift: true});
+          await user.keyboard('2024[ArrowLeft]3[ArrowLeft]2');
+          act(() => document.activeElement.blur());
+
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+        });
+
+        it('supports customizing native error messages', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField name="date" label="Value" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          act(() => getByTestId('form').checkValidity());
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+        });
+
+        it('clears validation on form reset', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <Button type="reset" data-testid="reset">Reset</Button>
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.click(getByTestId('reset'));
+
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+      });
+
+      describe('validationBehavior=aria', () => {
+        it('supports minValue and maxValue', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
+
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+
+          await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(3);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
+
+          await user.keyboard('[ArrowDown]');
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(4);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports validate function', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+          expect(getDescription()).not.toContain('Invalid value');
+
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports server validation', async () => {
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form validationErrors={{value: 'Invalid value'}}>
+                <DateField label="Value" name="value" defaultValue={new CalendarDate(2020, 2, 3)} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
+          expect(getDescription()).not.toContain('Invalid value');
+        });
+      });
+    });
   });
 });
diff --git a/packages/@react-stately/datepicker/package.json b/packages/@react-stately/datepicker/package.json
index adf8af39440..879426c7b1a 100644
--- a/packages/@react-stately/datepicker/package.json
+++ b/packages/@react-stately/datepicker/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@internationalized/date": "^3.5.0",
     "@internationalized/string": "^3.1.1",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/overlays": "^3.6.3",
     "@react-stately/utils": "^3.8.0",
     "@react-types/datepicker": "^3.6.1",
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index 12098cf0c3d..42772d923ea 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -11,8 +11,9 @@
  */
 
 import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
-import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, isInvalid, useDefaultProps} from './utils';
+import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, getValidationDetails, useDefaultProps} from './utils';
 import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
@@ -38,7 +39,7 @@ export interface DateSegment {
   isEditable: boolean
 }
 
-export interface DateFieldState {
+export interface DateFieldState extends FormValidationState<DateValue> {
   /** The current field value. */
   value: DateValue,
   /** The current value, converted to a native JavaScript `Date` object.  */
@@ -314,11 +315,30 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     }
   };
 
-  let isValueInvalid = props.isInvalid || props.validationState === 'invalid' ||
-    isInvalid(calendarValue, props.minValue, props.maxValue);
+  let validationDetails = getValidationDetails(calendarValue, props.minValue, props.maxValue);
+  let isValueInvalid = props.isInvalid || props.validationState === 'invalid' || !validationDetails.valid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let errors = [];
+  if (validationDetails.rangeUnderflow) {
+    errors = [`Value must be on or after ${dateFormatter.format(props.minValue.toDate(timeZone))}`];
+  }
+
+  if (validationDetails.rangeOverflow) {
+    errors = [`Value must be on or before ${dateFormatter.format(props.maxValue.toDate(timeZone))}`];
+  }
+
+  let validation = useFormValidationState({
+    ...props,
+    value,
+    builtinValidation: {
+      isInvalid: !validationDetails.valid,
+      errors,
+      validationDetails
+    }
+  });
 
   return {
+    ...validation,
     value: calendarValue,
     dateValue,
     calendar,
@@ -359,7 +379,11 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       if (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) {
         validSegments = {...allSegments};
         setValidSegments(validSegments);
-        setValue(displayValue.copy());
+        let newValue = displayValue.copy();
+        setValue(newValue);
+        validation.commitValidation(newValue);
+      } else {
+        validation.commitValidation();
       }
     },
     clearSegment(part) {
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index aaf55ea3f05..50ee93a48eb 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -21,6 +21,24 @@ export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateV
   );
 }
 
+export function getValidationDetails(value: DateValue, minValue: DateValue, maxValue: DateValue) {
+  let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;
+  let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;
+  return {
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow,
+    rangeUnderflow,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valueMissing: false,
+    valid: !rangeOverflow && !rangeUnderflow
+  };
+}
+
 export type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;
 interface FormatterOptions {
   timeZone?: string,
diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts
index 987351f96a5..4be03f7e511 100644
--- a/packages/@react-types/datepicker/src/index.d.ts
+++ b/packages/@react-types/datepicker/src/index.d.ts
@@ -37,7 +37,7 @@ type MappedDateValue<T> =
   never;
 
 export type Granularity = 'day' | 'hour' | 'minute' | 'second';
-interface DateFieldBase<T extends DateValue> extends InputBase, Validation, FocusableProps, LabelableProps, HelpTextProps, OverlayTriggerProps {
+interface DateFieldBase<T extends DateValue> extends InputBase, Validation<MappedDateValue<T>>, FocusableProps, LabelableProps, HelpTextProps, OverlayTriggerProps {
   /** The minimum allowed date that a user may select. */
   minValue?: DateValue,
   /** The maximum allowed date that a user may select. */
@@ -98,7 +98,7 @@ export interface AriaDateRangePickerProps<T extends DateValue> extends AriaDateP
   endName?: string
 }
 
-interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation, StyleProps {
+interface SpectrumDateFieldBase<T extends DateValue> extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation<MappedDateValue<T>>, StyleProps {
   /**
    * Whether the date picker should be displayed with a quiet style.
    * @default false
@@ -111,7 +111,7 @@ interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, S
   showFormatHelpText?: boolean
 }
 
-interface SpectrumDatePickerBase extends SpectrumDateFieldBase, SpectrumLabelableProps, StyleProps {
+interface SpectrumDatePickerBase<T extends DateValue> extends SpectrumDateFieldBase<T>, SpectrumLabelableProps, StyleProps {
   /**
    * The maximum number of months to display at once in the calendar popover, if screen space permits.
    * @default 1
@@ -124,9 +124,9 @@ interface SpectrumDatePickerBase extends SpectrumDateFieldBase, SpectrumLabelabl
   shouldFlip?: boolean
 }
 
-export interface SpectrumDatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'isInvalid' | 'validationState'>, SpectrumDatePickerBase {}
-export interface SpectrumDateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>, SpectrumDatePickerBase {}
-export interface SpectrumDateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'isInvalid' | 'validationState'>, SpectrumDateFieldBase {}
+export interface SpectrumDatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'isInvalid' | 'validationState'>, SpectrumDatePickerBase<T> {}
+export interface SpectrumDateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>, SpectrumDatePickerBase<T> {}
+export interface SpectrumDateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'isInvalid' | 'validationState'>, SpectrumDateFieldBase<T> {}
 
 export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
 type MappedTimeValue<T> =
@@ -135,7 +135,7 @@ type MappedTimeValue<T> =
   T extends Time ? Time :
   never;
 
-export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation, FocusableProps, LabelableProps, HelpTextProps, ValueBase<T | null, MappedTimeValue<T>> {
+export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation<MappedTimeValue<T>>, FocusableProps, LabelableProps, HelpTextProps, ValueBase<T | null, MappedTimeValue<T>> {
   /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
   hourCycle?: 12 | 24,
   /**
@@ -163,7 +163,7 @@ export interface TimePickerProps<T extends TimeValue> extends InputBase, Validat
 
 export interface AriaTimeFieldProps<T extends TimeValue> extends TimePickerProps<T>, AriaLabelingProps, DOMProps, InputDOMProps {}
 
-export interface SpectrumTimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'isInvalid' | 'validationState'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, InputDOMProps {
+export interface SpectrumTimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'isInvalid' | 'validationState'>, SpectrumFieldValidation<MappedTimeValue<T>>, SpectrumLabelableProps, StyleProps, InputDOMProps {
   /**
    * Whether the time field should be displayed with a quiet style.
    * @default false

From b9e2c22fb4d7347224e131c1889d1890600e9aa2 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 20 Oct 2023 11:15:34 -0700
Subject: [PATCH 09/38] DatePicker/DateRangePicker

---
 packages/@react-aria/datepicker/package.json  |   1 +
 .../datepicker/src/useDateField.ts            |   2 +-
 .../datepicker/src/useDatePicker.ts           |  21 +-
 .../datepicker/src/useDateRangePicker.ts      |  59 ++-
 .../datepicker/src/DatePicker.tsx             |  18 +-
 .../datepicker/src/DateRangePicker.tsx        |  18 +-
 .../datepicker/test/DatePicker.test.js        | 339 ++++++++++++++++-
 .../datepicker/test/DateRangePicker.test.js   | 341 +++++++++++++++++-
 .../datepicker/src/useDateFieldState.ts       |  30 +-
 .../datepicker/src/useDatePickerState.ts      |  47 ++-
 .../datepicker/src/useDateRangePickerState.ts |  67 +++-
 .../@react-stately/datepicker/src/utils.ts    |  47 ++-
 packages/@react-stately/form/src/index.ts     |   2 +-
 .../form/src/useFormValidationState.ts        |  39 ++
 .../@react-types/datepicker/src/index.d.ts    |   6 +-
 packages/dev/test-utils/src/validation.ts     |  10 +-
 16 files changed, 957 insertions(+), 90 deletions(-)

diff --git a/packages/@react-aria/datepicker/package.json b/packages/@react-aria/datepicker/package.json
index f94a7883305..c57fb6e15d7 100644
--- a/packages/@react-aria/datepicker/package.json
+++ b/packages/@react-aria/datepicker/package.json
@@ -33,6 +33,7 @@
     "@react-aria/spinbutton": "^3.5.4",
     "@react-aria/utils": "^3.21.1",
     "@react-stately/datepicker": "^3.8.0",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/utils": "^3.8.0",
     "@react-types/button": "^3.9.0",
     "@react-types/calendar": "^3.4.1",
diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index 9931b2d3d40..73f8a156690 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -74,7 +74,7 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
 
   let {focusWithinProps} = useFocusWithin({
     ...props,
-    onBlurWithin: (e: FocusEvent) => {
+    onBlurWithin: (e) => {
       state.confirmPlaceholder();
 
       if (props.onBlur) {
diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts
index 11e7bb83460..33b6436e2e5 100644
--- a/packages/@react-aria/datepicker/src/useDatePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDatePicker.ts
@@ -16,10 +16,11 @@ import {AriaDialogProps} from '@react-types/dialog';
 import {CalendarProps} from '@react-types/calendar';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerState} from '@react-stately/datepicker';
-import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {privateValidationStateProp} from '@react-stately/form';
 import {RefObject, useMemo} from 'react';
 import {roleSymbol} from './useDateField';
 import {useDatePickerGroup} from './useDatePickerGroup';
@@ -27,7 +28,7 @@ import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
-export interface DatePickerAria {
+export interface DatePickerAria extends ValidationResult {
   /** Props for the date picker's visible label element, if any. */
   labelProps: DOMAttributes,
   /** Props for the grouping element containing the date field and button. */
@@ -56,9 +57,12 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let fieldId = useId();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || errors
   });
 
   let groupProps = useDatePickerGroup(state, ref);
@@ -119,8 +123,6 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       'aria-describedby': ariaDescribedBy,
       value: state.value,
       onChange: state.setValue,
-      minValue: props.minValue,
-      maxValue: props.maxValue,
       placeholderValue: props.placeholderValue,
       hideTimeZone: props.hideTimeZone,
       hourCycle: props.hourCycle,
@@ -129,7 +131,9 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
       isRequired: props.isRequired,
-      isInvalid: state.isInvalid,
+      validationBehavior: props.validationBehavior,
+      // DatePicker owns the validation state for the date field.
+      [privateValidationStateProp]: state,
       autoFocus: props.autoFocus,
       name: props.name
     },
@@ -161,6 +165,9 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
       isInvalid: state.isInvalid,
       errorMessage: props.errorMessage
-    }
+    },
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index 74932d24c4d..cdac99f1895 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -15,19 +15,20 @@ import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-t
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
 import {DateRangePickerState} from '@react-stately/datepicker';
-import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeValidation, privateValidationStateProp, VALID_VALIDITY_STATE} from '@react-stately/form';
 import {RangeCalendarProps} from '@react-types/calendar';
-import {RefObject, useMemo} from 'react';
+import {RefObject, useMemo, useRef} from 'react';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
-export interface DateRangePickerAria {
+export interface DateRangePickerAria extends ValidationResult {
   /** Props for the date range picker's visible label element, if any. */
   labelProps: DOMAttributes,
   /** Props for the grouping element containing the date fields and button. */
@@ -55,9 +56,12 @@ export interface DateRangePickerAria {
  */
 export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element>): DateRangePickerAria {
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || errors
   });
 
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
@@ -92,8 +96,6 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     [focusManagerSymbol]: focusManager,
     [roleSymbol]: 'presentation',
     'aria-describedby': ariaDescribedBy,
-    minValue: props.minValue,
-    maxValue: props.maxValue,
     placeholderValue: props.placeholderValue,
     hideTimeZone: props.hideTimeZone,
     hourCycle: props.hourCycle,
@@ -102,7 +104,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     isRequired: props.isRequired,
-    isInvalid: state.isInvalid
+    validationBehavior: props.validationBehavior
   };
 
   let domProps = filterDOMProps(props);
@@ -115,6 +117,18 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     onFocusWithinChange: props.onFocusChange
   });
 
+  let startFieldValidation = useRef({
+    isInvalid: false,
+    validationDetails: VALID_VALIDITY_STATE,
+    errors: []
+  });
+
+  let endFieldValidation = useRef({
+    isInvalid: false,
+    validationDetails: VALID_VALIDITY_STATE,
+    errors: []
+  });
+
   return {
     groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
       role: 'group' as const,
@@ -165,14 +179,36 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       value: state.value?.start,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
-      name: props.startName
+      name: props.startName,
+      [privateValidationStateProp]: {
+        realtimeValidation: state.realtimeValidation,
+        displayValidation: state.displayValidation,
+        updateValidation(e) {
+          startFieldValidation.current = e;
+          state.updateValidation(mergeValidation(e, endFieldValidation.current));
+        },
+        commitValidation() {
+          state.commitValidation();
+        }
+      }
     },
     endFieldProps: {
       ...endFieldProps,
       ...commonFieldProps,
       value: state.value?.end,
       onChange: end => state.setDateTime('end', end),
-      name: props.endName
+      name: props.endName,
+      [privateValidationStateProp]: {
+        realtimeValidation: state.realtimeValidation,
+        displayValidation: state.displayValidation,
+        updateValidation(e) {
+          endFieldValidation.current = e;
+          state.updateValidation(mergeValidation(startFieldValidation.current, e));
+        },
+        commitValidation() {
+          state.commitValidation();
+        }
+      }
     },
     descriptionProps,
     errorMessageProps,
@@ -189,6 +225,9 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
       isInvalid: state.isInvalid,
       errorMessage: props.errorMessage
-    }
+    },
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
index de3bf674dcb..d6846862593 100644
--- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
@@ -54,7 +54,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
   });
-  let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps} = useDatePicker(props, state, targetRef);
+  let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, errors, validationDetails} = useDatePicker(props, state, targetRef);
   let {isOpen, setOpen} = state;
   let {direction} = useLocale();
   let domRef = useFocusManagerRef(ref);
@@ -77,7 +77,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     'spectrum-InputGroup',
     {
       'spectrum-InputGroup--quiet': isQuiet,
-      'spectrum-InputGroup--invalid': state.validationState === 'invalid' && !isDisabled,
+      'spectrum-InputGroup--invalid': isInvalid && !isDisabled,
       'is-disabled': isDisabled,
       'is-hovered': isHovered,
       'is-focused': isFocused,
@@ -90,7 +90,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     'spectrum-InputGroup-input',
     {
       'is-disabled': isDisabled,
-      'is-invalid': state.validationState === 'invalid' && !isDisabled
+      'is-invalid': isInvalid && !isDisabled
     }
   );
 
@@ -109,6 +109,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
   let showTimeField = !!timeGranularity;
 
   let visibleMonths = useVisibleMonths(maxVisibleMonths);
+  let validationState = state.validationState || (isInvalid ? 'invalid' : null);
 
   return (
     <Field
@@ -119,7 +120,10 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
+      isInvalid={isInvalid}
+      errors={errors}
+      validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <div
         {...mergeProps(groupProps, hoverProps, focusProps)}
@@ -128,7 +132,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
         <Input
           isDisabled={isDisabled}
           isQuiet={isQuiet}
-          validationState={state.validationState}
+          validationState={validationState}
           className={classNames(styles, 'spectrum-InputGroup-field')}
           inputClassName={fieldClassName}
           disableFocusRing>
@@ -150,7 +154,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
             {...mergeProps(buttonProps, focusPropsButton)}
             UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}
             isQuiet={isQuiet}
-            validationState={state.validationState}
+            validationState={validationState}
             isDisabled={isDisabled || isReadOnly}>
             <CalendarIcon />
           </FieldButton>
@@ -161,7 +165,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
                   {...calendarProps}
                   visibleMonths={visibleMonths}
                   pageBehavior={pageBehavior}
-                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': state.validationState === 'invalid'})} />
+                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />
                 {showTimeField &&
                   <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
                     <TimeField
diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
index 9d6f957f975..18a9bf01c17 100644
--- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
@@ -54,7 +54,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
   });
-  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps} = useDateRangePicker(props, state, targetRef);
+  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, errors, validationDetails} = useDateRangePicker(props, state, targetRef);
   let {isOpen, setOpen} = state;
   let {direction} = useLocale();
   let domRef = useFocusManagerRef(ref);
@@ -77,7 +77,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     'spectrum-InputGroup',
     {
       'spectrum-InputGroup--quiet': isQuiet,
-      'spectrum-InputGroup--invalid': state.validationState === 'invalid' && !isDisabled,
+      'spectrum-InputGroup--invalid': isInvalid && !isDisabled,
       'is-disabled': isDisabled,
       'is-hovered': isHovered,
       'is-focused': isFocused,
@@ -90,7 +90,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     'spectrum-InputGroup-input',
     {
       'is-disabled': isDisabled,
-      'is-invalid': state.validationState === 'invalid' && !isDisabled
+      'is-invalid': isInvalid && !isDisabled
     }
   );
 
@@ -109,6 +109,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
   let showTimeField = !!timeGranularity;
 
   let visibleMonths = useVisibleMonths(maxVisibleMonths);
+  let validationState = state.validationState || (isInvalid ? 'invalid' : null);
 
   return (
     <Field
@@ -119,7 +120,10 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
+      isInvalid={isInvalid}
+      errors={errors}
+      validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <div
         {...mergeProps(groupProps, hoverProps, focusProps)}
@@ -128,7 +132,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
         <Input
           isDisabled={isDisabled}
           isQuiet={isQuiet}
-          validationState={state.validationState}
+          validationState={validationState}
           className={classNames(styles, 'spectrum-InputGroup-field')}
           inputClassName={fieldClassName}
           disableFocusRing>
@@ -164,7 +168,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
             {...mergeProps(buttonProps, focusPropsButton)}
             UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}
             isQuiet={isQuiet}
-            validationState={state.validationState}
+            validationState={validationState}
             isDisabled={isDisabled || isReadOnly}>
             <CalendarIcon />
           </FieldButton>
@@ -175,7 +179,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
                   {...calendarProps}
                   visibleMonths={visibleMonths}
                   pageBehavior={pageBehavior}
-                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': state.validationState === 'invalid'})} />
+                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />
                 {showTimeField &&
                   <Flex gap="size-100" marginTop="size-100" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
                     <TimeField
diff --git a/packages/@react-spectrum/datepicker/test/DatePicker.test.js b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
index b06f1f69394..00560efa931 100644
--- a/packages/@react-spectrum/datepicker/test/DatePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
@@ -10,9 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
+import {act, createValidationResult, fireEvent, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
 import {CalendarDate, CalendarDateTime, EthiopicCalendar, getLocalTimeZone, JapaneseCalendar, toCalendarDateTime, today} from '@internationalized/date';
 import {DatePicker} from '../';
+import {Form} from '@react-spectrum/form';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -1931,5 +1933,340 @@ describe('DatePicker', function () {
       expect(getDescription()).toBe('Selected Date: February 3, 2020');
       expect(input).toHaveValue('2020-02-03');
     });
+
+    describe('validation', () => {
+      describe('validationBehavior=native', () => {
+        it('supports isRequired', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.keyboard('[Tab][ArrowUp][Tab][ArrowUp][Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Constraints not satisfied');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Constraints not satisfied');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports minValue and maxValue', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(input.validity.valid).toBe(false);
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+
+          await user.tab({shift: true});
+          await user.keyboard('2025');
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(input.validity.valid).toBe(false);
+          await user.tab();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(3);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
+
+          await user.tab({shift: true});
+          await user.keyboard('[ArrowDown]');
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(input.validity.valid).toBe(true);
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(4);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports validate function', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker name="date" label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validationBehavior="native" validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(false);
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+
+          expect(getDescription()).toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports server validation', async () => {
+          function Test() {
+            let [serverErrors, setServerErrors] = React.useState({});
+            let onSubmit = e => {
+              e.preventDefault();
+              setServerErrors({
+                date: 'Invalid value'
+              });
+            };
+
+            return (
+              <Provider theme={theme}>
+                <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                  <DatePicker name="date" label="Value" validationBehavior="native" />
+                  <Button type="submit" data-testid="submit">Submit</Button>
+                </Form>
+              </Provider>
+            );
+          }
+
+          let {getByTestId, getByRole} = render(<Test />);
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          await user.click(getByTestId('submit'));
+
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+          expect(input.validity.valid).toBe(false);
+
+          await user.tab({shift: true});
+          await user.keyboard('2024[ArrowLeft]3[ArrowLeft]2');
+          act(() => document.activeElement.blur());
+
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(true);
+        });
+
+        it('supports customizing native error messages', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker name="date" label="Value" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          act(() => getByTestId('form').checkValidity());
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+        });
+
+        it('clears validation on form reset', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <Button type="reset" data-testid="reset">Reset</Button>
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.click(getByTestId('reset'));
+
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('updates when selecting a date with the calendar', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.click(getByRole('button'));
+          await user.click(document.activeElement);
+
+          expect(input.validity.valid).toBe(true);
+          expect(getDescription()).not.toContain('Constraints not satisfied');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+      });
+
+      describe('validationBehavior=aria', () => {
+        it('supports minValue and maxValue', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
+
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+
+          await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(3);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
+
+          await user.keyboard('[ArrowDown]');
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(4);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports validate function', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DatePicker label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+          expect(getDescription()).not.toContain('Invalid value');
+
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports server validation', async () => {
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form validationErrors={{value: 'Invalid value'}}>
+                <DatePicker label="Value" name="value" defaultValue={new CalendarDate(2020, 2, 3)} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
+          expect(getDescription()).not.toContain('Invalid value');
+        });
+      });
+    });
   });
 });
diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index d2a08b85ea6..2453c813c7f 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -10,9 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, getAllByRole as getAllByRoleInContainer, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
+import {act, createValidationResult, fireEvent, getAllByRole as getAllByRoleInContainer, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
 import {CalendarDate, CalendarDateTime, getLocalTimeZone, toCalendarDateTime, today} from '@internationalized/date';
 import {DateRangePicker} from '../';
+import {Form} from '@react-spectrum/form';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -1520,5 +1522,342 @@ describe('DateRangePicker', function () {
       expect(start).toHaveValue('2020-02-03');
       expect(end).toHaveValue('2022-04-08');
     });
+
+    describe('validation', () => {
+      describe('validationBehavior=native', () => {
+        it('supports isRequired', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let startInput = document.querySelector('input[name=start]');
+          let endInput = document.querySelector('input[name=end]');
+          expect(startInput).toHaveAttribute('required');
+          expect(startInput.validity.valid).toBe(false);
+          expect(endInput).toHaveAttribute('required');
+          expect(endInput.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.keyboard('[Tab][ArrowUp][Tab][ArrowUp][Tab][ArrowUp]');
+          await user.keyboard('[Tab][ArrowUp][Tab][ArrowUp][Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Constraints not satisfied');
+          expect(startInput.validity.valid).toBe(true);
+          expect(endInput.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Constraints not satisfied');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports minValue and maxValue', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker label="Date" startName="start" endName="end" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let startInput = document.querySelector('input[name=start]');
+          let endInput = document.querySelector('input[name=end]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(startInput.validity.valid).toBe(false);
+          expect(endInput.validity.valid).toBe(false);
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020', 'Value must be on or before 2/3/2024'], 'rangeUnderflow', 'rangeOverflow'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
+
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
+          expect(startInput.validity.valid).toBe(false);
+          expect(endInput.validity.valid).toBe(false);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
+
+          await user.keyboard('[Tab][Tab][ArrowDown]');
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(startInput.validity.valid).toBe(true);
+          expect(endInput.validity.valid).toBe(true);
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(3);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports validate function', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker startName="start" endName="end" label="Value" defaultValue={{start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2021, 2, 3)}} validationBehavior="native" validate={v => v.start.year < 2022 || v.end.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let startInput = document.querySelector('input[name=start]');
+          let endInput = document.querySelector('input[name=end]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(startInput.validity.valid).toBe(false);
+          expect(endInput.validity.valid).toBe(false);
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+          expect(getDescription()).toContain('Invalid value');
+          expect(startInput.validity.valid).toBe(false);
+          expect(endInput.validity.valid).toBe(false);
+
+          await user.keyboard('[ArrowRight][ArrowRight]2026');
+          expect(getDescription()).toContain('Invalid value');
+          expect(startInput.validity.valid).toBe(true);
+          expect(endInput.validity.valid).toBe(true);
+
+          await user.tab();
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(startInput.validity.valid).toBe(true);
+          expect(endInput.validity.valid).toBe(true);
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports server validation', async () => {
+          function Test() {
+            let [serverErrors, setServerErrors] = React.useState({});
+            let onSubmit = e => {
+              e.preventDefault();
+              setServerErrors({
+                start: 'Invalid value'
+              });
+            };
+
+            return (
+              <Provider theme={theme}>
+                <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                  <DateRangePicker startName="start" endName="end" label="Value" validationBehavior="native" />
+                  <Button type="submit" data-testid="submit">Submit</Button>
+                </Form>
+              </Provider>
+            );
+          }
+
+          let {getByTestId, getByRole} = render(<Test />);
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=start]');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          await user.click(getByTestId('submit'));
+
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+          expect(input.validity.valid).toBe(false);
+
+          await user.tab({shift: true});
+          await user.keyboard('2024[ArrowLeft]3[ArrowLeft]2');
+          act(() => document.activeElement.blur());
+
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(true);
+        });
+
+        it('supports customizing native error messages', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker startName="start" endName="end" label="Value" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          act(() => getByTestId('form').checkValidity());
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+        });
+
+        it('clears validation on form reset', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <Button type="reset" data-testid="reset">Reset</Button>
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=start]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.click(getByTestId('reset'));
+
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('updates when selecting a date with the calendar', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=start]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(onValidationChange).not.toHaveBeenCalled();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.click(getByRole('button'));
+          await user.click(document.activeElement);
+          await user.click(document.activeElement);
+
+          expect(input.validity.valid).toBe(true);
+          expect(getDescription()).not.toContain('Constraints not satisfied');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+      });
+
+      describe('validationBehavior=aria', () => {
+        it('supports minValue and maxValue', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker label="Date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020', 'Value must be on or before 2/3/2024'], 'rangeUnderflow', 'rangeOverflow'));
+
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
+
+          await user.keyboard('[Tab][Tab][Tab][ArrowDown]');
+          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(onValidationChange).toHaveBeenCalledTimes(3);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports validate function', async () => {
+          let onValidationChange = jest.fn();
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateRangePicker label="Value" defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} validate={v => v.start.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+          expect(onValidationChange).toHaveBeenCalledTimes(1);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+          expect(getDescription()).not.toContain('Invalid value');
+
+          expect(onValidationChange).toHaveBeenCalledTimes(2);
+          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
+        });
+
+        it('supports server validation', async () => {
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form validationErrors={{start: 'Invalid value'}}>
+                <DateRangePicker label="Value" startName="start" endName="end" defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
+          expect(getDescription()).not.toContain('Invalid value');
+        });
+      });
+    });
   });
 });
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index f49098b91f8..f143d698663 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -11,7 +11,7 @@
  */
 
 import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
-import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, getValidationDetails, useDefaultProps} from './utils';
+import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils';
 import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getPlaceholder} from './placeholders';
@@ -318,28 +318,24 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
 
   // TODO: do we really need both isDateUnavailable AND validate??
   let isUnavailable = useMemo(() => (value && isDateUnavailable?.(value)) || false, [value, isDateUnavailable]);
-  let validationDetails = getValidationDetails(calendarValue, props.minValue, props.maxValue, isUnavailable);
-  let isValueInvalid = props.isInvalid || props.validationState === 'invalid' || !validationDetails.valid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
-  let errors = [];
-  if (validationDetails.rangeUnderflow) {
-    errors = [`Value must be on or after ${dateFormatter.format(props.minValue.toDate(timeZone))}`];
-  }
-
-  if (validationDetails.rangeOverflow) {
-    errors = [`Value must be on or before ${dateFormatter.format(props.maxValue.toDate(timeZone))}`];
-  }
+  let builtinValidation = getValidationResult(
+    calendarValue,
+    props.minValue,
+    props.maxValue,
+    isUnavailable,
+    dateFormatter,
+    timeZone
+  );
 
   let validation = useFormValidationState({
     ...props,
     value,
-    builtinValidation: {
-      isInvalid: !validationDetails.valid,
-      errors,
-      validationDetails
-    }
+    builtinValidation
   });
 
+  let isValueInvalid = validation.displayValidation.isInvalid;
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+
   return {
     ...validation,
     value: calendarValue,
diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts
index ed8e5896153..fd56f20291a 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts
@@ -12,10 +12,11 @@
 
 import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
-import {FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
+import {FieldOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
 export interface DatePickerStateOptions<T extends DateValue> extends DatePickerProps<T> {
@@ -26,7 +27,7 @@ export interface DatePickerStateOptions<T extends DateValue> extends DatePickerP
   shouldCloseOnSelect?: boolean | (() => boolean)
 }
 
-export interface DatePickerState extends OverlayTriggerState {
+export interface DatePickerState extends OverlayTriggerState, FormValidationState<DateValue> {
   /** The currently selected date. */
   value: DateValue | null,
   /** Sets the selected date. */
@@ -93,10 +94,41 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
+  let isDateUnavailable = props.isDateUnavailable;
+  let isUnavailable = useMemo(() => (value && isDateUnavailable?.(value)) || false, [value, isDateUnavailable]);
+  let dateFormatter = useMemo(() => new DateFormatter('en-US'), []);
+  let builtinValidation = getValidationResult(
+    value,
+    props.minValue,
+    props.maxValue,
+    isUnavailable,
+    dateFormatter,
+    'America/Los_Angeles'
+  );
+
+  let validation = useFormValidationState({
+    ...props,
+    value,
+    builtinValidation
+  });
+
+  let isValueInvalid = validation.displayValidation.isInvalid;
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+
+  let didCommit = useRef(false);
+  useEffect(() => {
+    if (didCommit.current) {
+      didCommit.current = false;
+      validation.commitValidation();
+    }
+  });
+
   let commitValue = (date: DateValue, time: TimeValue) => {
-    setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
+    let newValue = 'timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time);
+    setValue(newValue);
     setSelectedDate(null);
     setSelectedTime(null);
+    didCommit.current = true;
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
@@ -110,6 +142,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
       }
     } else {
       setValue(newValue);
+      didCommit.current = true;
     }
 
     if (shouldClose) {
@@ -125,12 +158,8 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     }
   };
 
-  let isValueInvalid = props.isInvalid || props.validationState === 'invalid' ||
-    isInvalid(value, props.minValue, props.maxValue) ||
-    value && props.isDateUnavailable?.(value);
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
-
   return {
+    ...validation,
     value,
     setValue,
     dateValue: selectedDate,
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index 94488a159ec..fdb3bfd70d1 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -12,11 +12,12 @@
 
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
-import {FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
+import {FieldOptions, getFormatOptions, getPlaceholderTime, getValidationResult, isInvalid, useDefaultProps} from './utils';
+import {FormValidationState, mergeValidation, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> {
   /**
@@ -27,7 +28,7 @@ export interface DateRangePickerStateOptions<T extends DateValue = DateValue> ex
 }
 
 type TimeRange = RangeValue<TimeValue>;
-export interface DateRangePickerState extends OverlayTriggerState {
+export interface DateRangePickerState extends OverlayTriggerState, FormValidationState<DateRange> {
   /** The currently selected date range. */
   value: DateRange | null,
   /** Sets the selected date range. */
@@ -120,6 +121,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     });
     setSelectedDateRange(null);
     setSelectedTimeRange(null);
+    didCommit.current = true;
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
@@ -136,6 +138,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       }
     } else if (range.start && range.end) {
       setValue(range);
+      didCommit.current = true;
     } else {
       setSelectedDateRange(range);
     }
@@ -153,17 +156,59 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 
-  let isValueInvalid = props.isInvalid || props.validationState === 'invalid'
-    || (value != null && (
-      isInvalid(value.start, props.minValue, props.maxValue) ||
-      isInvalid(value.end, props.minValue, props.maxValue) ||
-      (value.end != null && value.start != null && value.end.compare(value.start) < 0) ||
-      (value?.start && props.isDateUnavailable?.(value.start)) ||
-      (value?.end && props.isDateUnavailable?.(value.end))
-    ));
+  // let isValueInvalid = props.isInvalid || props.validationState === 'invalid'
+  //   || (value != null && (
+  //     isInvalid(value.start, props.minValue, props.maxValue) ||
+  //     isInvalid(value.end, props.minValue, props.maxValue) ||
+  //     (value.end != null && value.start != null && value.end.compare(value.start) < 0) ||
+  //     (value?.start && props.isDateUnavailable?.(value.start)) ||
+  //     (value?.end && props.isDateUnavailable?.(value.end))
+  //   ));
+  // let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+
+  let dateFormatter = useMemo(() => new DateFormatter('en-US'), []);
+  let startValidation = getValidationResult(
+    value?.start,
+    props.minValue,
+    props.maxValue,
+    (value?.start && props.isDateUnavailable?.(value.start)) || false,
+    dateFormatter,
+    'America/Los_Angeles'
+  );
+
+  let endValidation = getValidationResult(
+    value?.end,
+    props.minValue,
+    props.maxValue,
+    (value?.end && props.isDateUnavailable?.(value.end)) || false,
+    dateFormatter,
+    'America/Los_Angeles'
+  );
+
+  if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+    // TODO
+  }
+
+  let validation = useFormValidationState({
+    ...props,
+    value,
+    name: props.startName, // TODO
+    builtinValidation: mergeValidation(startValidation, endValidation)
+  });
+
+  let isValueInvalid = validation.displayValidation.isInvalid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
+  let didCommit = useRef(false);
+  useEffect(() => {
+    if (didCommit.current) {
+      didCommit.current = false;
+      validation.commitValidation();
+    }
+  });
+
   return {
+    ...validation,
     value,
     setValue,
     dateRange,
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index d731c25003b..df997192a0a 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
+import {Calendar, DateFormatter, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
 import {useState} from 'react';
+import {ValidationResult} from '@react-types/shared';
 
 export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateValue) {
   return value != null && (
@@ -21,21 +22,41 @@ export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateV
   );
 }
 
-export function getValidationDetails(value: DateValue, minValue: DateValue, maxValue: DateValue, isDateUnavailable: boolean): ValidityState {
+export function getValidationResult(
+  value: DateValue,
+  minValue: DateValue,
+  maxValue: DateValue,
+  isDateUnavailable: boolean,
+  dateFormatter: DateFormatter,
+  timeZone: string
+): ValidationResult {
   let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;
   let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;
+  let errors = [];
+  if (rangeUnderflow) {
+    errors = [`Value must be on or after ${dateFormatter.format(minValue.toDate(timeZone))}`];
+  }
+
+  if (rangeOverflow) {
+    errors = [`Value must be on or before ${dateFormatter.format(maxValue.toDate(timeZone))}`];
+  }
+
   return {
-    badInput: isDateUnavailable,
-    customError: false,
-    patternMismatch: false,
-    rangeOverflow,
-    rangeUnderflow,
-    stepMismatch: false,
-    tooLong: false,
-    tooShort: false,
-    typeMismatch: false,
-    valueMissing: false,
-    valid: !rangeOverflow && !rangeUnderflow && !isDateUnavailable
+    isInvalid: rangeOverflow || rangeUnderflow || isDateUnavailable,
+    errors,
+    validationDetails: {
+      badInput: isDateUnavailable,
+      customError: false,
+      patternMismatch: false,
+      rangeOverflow,
+      rangeUnderflow,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valueMissing: false,
+      valid: !rangeOverflow && !rangeUnderflow && !isDateUnavailable
+    }
   };
 }
 
diff --git a/packages/@react-stately/form/src/index.ts b/packages/@react-stately/form/src/index.ts
index a0be408e1f6..68acd09f026 100644
--- a/packages/@react-stately/form/src/index.ts
+++ b/packages/@react-stately/form/src/index.ts
@@ -10,5 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
-export {FormValidationContext, useFormValidationState, VALID_VALIDITY_STATE} from './useFormValidationState';
+export {FormValidationContext, useFormValidationState, VALID_VALIDITY_STATE, privateValidationStateProp, mergeValidation} from './useFormValidationState';
 export type {FormValidationState} from './useFormValidationState';
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index 9b66945e148..709ff6e3c81 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -41,6 +41,8 @@ const DEFAULT_VALIDITY: ValidationResult = {
 
 export const FormValidationContext = createContext<ValidationErrors>({});
 
+export const privateValidationStateProp = '__formValidationState' + Date.now();
+
 interface FormValidationProps<T> extends Validation<T> {
   builtinValidation?: ValidationResult,
   name?: string,
@@ -55,6 +57,16 @@ export interface FormValidationState<T> {
 }
 
 export function useFormValidationState<T>(props: FormValidationProps<T>): FormValidationState<T> {
+  if (props[privateValidationStateProp]) {
+    let {realtimeValidation, displayValidation, updateValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState<T>;
+    return {realtimeValidation, displayValidation, updateValidation, commitValidation};
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useFormValidationStateImpl(props);
+}
+
+function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValidationState<T> {
   let {isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = 'aria', onValidationChange} = props;
 
   // backward compatibility.
@@ -170,3 +182,30 @@ function isEqualValidation(a: ValidationResult | null, b: ValidationResult | nul
     && a.errors.every((a, i) => a === b.errors[i])
     && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
 }
+
+export function mergeValidation(...results: ValidationResult[]): ValidationResult {
+  let errors = new Set<string>();
+  let isInvalid = false;
+  let validationDetails = {
+    ...VALID_VALIDITY_STATE
+  };
+
+  for (let v of results) {
+    for (let e of v.errors) {
+      errors.add(e);
+    }
+
+    // Only these properties apply for checkboxes.
+    isInvalid ||= v.isInvalid;
+    for (let key in validationDetails) {
+      validationDetails[key] ||= v.validationDetails[key];
+    }
+  }
+
+  validationDetails.valid = !isInvalid;
+  return {
+    isInvalid,
+    errors: [...errors],
+    validationDetails
+  };
+}
diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts
index 4be03f7e511..1b8b6d3505b 100644
--- a/packages/@react-types/datepicker/src/index.d.ts
+++ b/packages/@react-types/datepicker/src/index.d.ts
@@ -79,7 +79,7 @@ export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>,
 export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<T>, InputDOMProps {}
 
 export type DateRange = RangeValue<DateValue>;
-export interface DateRangePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>>> {
+export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePickerBase<T>, 'validate'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>>> {
   /**
    * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
    * i.e. ranges containing unavailable dates, may be selected.
@@ -87,7 +87,7 @@ export interface DateRangePickerProps<T extends DateValue> extends DatePickerBas
   allowsNonContiguousRanges?: boolean
 }
 
-export interface AriaDateRangePickerProps<T extends DateValue> extends AriaDatePickerBaseProps<T>, DateRangePickerProps<T> {
+export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<AriaDatePickerBaseProps<T>, 'validate'>, DateRangePickerProps<T> {
   /**
    * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
    */
@@ -125,7 +125,7 @@ interface SpectrumDatePickerBase<T extends DateValue> extends SpectrumDateFieldB
 }
 
 export interface SpectrumDatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'isInvalid' | 'validationState'>, SpectrumDatePickerBase<T> {}
-export interface SpectrumDateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>, SpectrumDatePickerBase<T> {}
+export interface SpectrumDateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>, Omit<SpectrumDatePickerBase<T>, 'validate'> {}
 export interface SpectrumDateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'isInvalid' | 'validationState'>, SpectrumDateFieldBase<T> {}
 
 export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
diff --git a/packages/dev/test-utils/src/validation.ts b/packages/dev/test-utils/src/validation.ts
index adee7ada370..1b43a449155 100644
--- a/packages/dev/test-utils/src/validation.ts
+++ b/packages/dev/test-utils/src/validation.ts
@@ -12,7 +12,7 @@
 
 import {ValidationResult} from '@react-types/shared';
 
-export function createValidationResult(errors: string[], type: string = 'customError'): ValidationResult {
+export function createValidationResult(errors: string[], ...types: string[]): ValidationResult {
   let validationDetails = {
     badInput: false,
     customError: false,
@@ -28,7 +28,13 @@ export function createValidationResult(errors: string[], type: string = 'customE
   };
 
   if (!validationDetails.valid) {
-    validationDetails[type] = true;
+    if (types.length === 0) {
+      types = ['customError'];
+    }
+
+    for (let type of types) {
+      validationDetails[type] = true;
+    }
   }
 
   return {

From 1a04901a158193c9c1582aab529e2fee0ec46a7a Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 20 Oct 2023 11:32:53 -0700
Subject: [PATCH 10/38] Remove onValidationChange from public API

---
 .../checkbox/src/useCheckboxGroupItem.ts      | 20 ++++--
 .../numberfield/src/useNumberField.ts         |  1 -
 .../checkbox/test/Checkbox.test.js            | 28 +-------
 .../checkbox/test/CheckboxGroup.test.js       | 55 ++--------------
 .../datepicker/test/DateField.test.js         | 57 ++--------------
 .../datepicker/test/DatePicker.test.js        | 65 +++----------------
 .../datepicker/test/DateRangePicker.test.js   | 61 +++--------------
 .../numberfield/test/NumberField.test.js      | 26 ++------
 .../@react-spectrum/radio/test/Radio.test.js  | 27 ++------
 .../textfield/test/TextField.test.js          | 26 ++------
 .../checkbox/src/useCheckboxGroupState.ts     | 32 +--------
 .../form/src/useFormValidationState.ts        |  3 +-
 packages/@react-types/shared/src/inputs.d.ts  |  6 +-
 13 files changed, 65 insertions(+), 342 deletions(-)

diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
index 445e9154520..48a14466875 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
@@ -14,6 +14,7 @@ import {AriaCheckboxGroupItemProps} from '@react-types/checkbox';
 import {CheckboxAria, useCheckbox} from './useCheckbox';
 import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
+import {privateValidationStateProp, useFormValidationState} from '@react-stately/form';
 import {RefObject} from 'react';
 import {useToggleState} from '@react-stately/toggle';
 
@@ -42,6 +43,18 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
   });
 
   let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
+
+  let validationState = useFormValidationState({
+    ...props,
+    value: toggleState.isSelected,
+    builtinValidation: state.realtimeValidation,
+    name: props.name || name,
+    validationBehavior: props.validationBehavior ?? validationBehavior,
+    onValidationChange(e) {
+      state.setInvalid(props.value, e);
+    }
+  });
+
   let res = useCheckbox({
     ...props,
     isReadOnly: props.isReadOnly || state.isReadOnly,
@@ -49,12 +62,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     name: props.name || name,
     isRequired: props.isRequired ?? state.isRequired,
     validationBehavior: props.validationBehavior ?? validationBehavior,
-    // @ts-ignore - this is passed through to useFormValidation but we don't want it exposed as public API.
-    builtinValidation: state.realtimeValidation,
-    onValidationChange(e) {
-      props.onValidationChange?.(e);
-      state.setInvalid(props.value, e);
-    }
+    [privateValidationStateProp]: validationState
   }, toggleState, inputRef);
 
   return {
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index 30d1bac5b29..f491e29e320 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -203,7 +203,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     validationState: undefined,
     validate: undefined,
     validationBehavior: undefined,
-    onValidationChange: undefined,
     value: inputValue,
     defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here
     autoComplete: 'off',
diff --git a/packages/@react-spectrum/checkbox/test/Checkbox.test.js b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
index 5eed2325b3d..cb16701b163 100644
--- a/packages/@react-spectrum/checkbox/test/Checkbox.test.js
+++ b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
@@ -295,57 +295,41 @@ describe('Checkbox', function () {
   describe('validation', () => {
     describe('validationBehavior=native', () => {
       it('supports isRequired', async () => {
-        let onValidationChange = jest.fn();
         let {getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <Checkbox isRequired validationBehavior="native" onValidationChange={onValidationChange}>Terms and conditions</Checkbox>
+              <Checkbox isRequired validationBehavior="native">Terms and conditions</Checkbox>
             </Form>
           </Provider>
         );
 
-        expect(onValidationChange).not.toHaveBeenCalled();
-
         let checkbox = getByRole('checkbox');
         expect(checkbox).toHaveAttribute('required');
         expect(checkbox).not.toHaveAttribute('aria-required');
         expect(checkbox.validity.valid).toBe(false);
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
         await user.click(checkbox);
         expect(checkbox.validity.valid).toBe(true);
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <Checkbox validationBehavior="native" onValidationChange={onValidationChange} validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+              <Checkbox validationBehavior="native" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
             </Form>
           </Provider>
         );
 
-        expect(onValidationChange).not.toHaveBeenCalled();
-
         let checkbox = getByRole('checkbox');
         expect(checkbox.validity.valid).toBe(false);
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.']));
 
         await user.click(checkbox);
         expect(checkbox.validity.valid).toBe(true);
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
@@ -381,22 +365,16 @@ describe('Checkbox', function () {
 
     describe('validationBehavior=aria', () => {
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getByRole} = render(
           <Provider theme={theme}>
-            <Checkbox value="terms" onValidationChange={onValidationChange} validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
+            <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
           </Provider>
         );
 
         let checkbox = getByRole('checkbox');
         expect(checkbox.validity.valid).toBe(true);
 
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.']));
-
         await user.click(checkbox);
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
index 1bca86e637f..6f729bd6b22 100644
--- a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
+++ b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, createValidationResult, pointerMap, render, within} from '@react-spectrum/test-utils';
+import {act, pointerMap, render, within} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
 import {Checkbox, CheckboxGroup} from '../';
 import {Form} from '@react-spectrum/form';
@@ -418,11 +418,10 @@ describe('CheckboxGroup', () => {
   describe('validation', () => {
     describe('validationBehavior=native', () => {
       it('supports group level isRequired', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <CheckboxGroup label="Agree to the following" isRequired validationBehavior="native" onValidationChange={onValidationChange}>
+              <CheckboxGroup label="Agree to the following" isRequired validationBehavior="native">
                 <Checkbox value="terms">Terms and conditions</Checkbox>
                 <Checkbox value="cookies">Cookies</Checkbox>
                 <Checkbox value="privacy">Privacy policy</Checkbox>
@@ -433,7 +432,6 @@ describe('CheckboxGroup', () => {
 
         let group = getByRole('group');
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         let checkboxes = getAllByRole('checkbox');
         for (let input of checkboxes) {
@@ -443,8 +441,6 @@ describe('CheckboxGroup', () => {
         }
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -457,16 +453,13 @@ describe('CheckboxGroup', () => {
         }
 
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports checkbox level isRequired', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <CheckboxGroup label="Agree to the following" validationBehavior="native" onValidationChange={onValidationChange}>
+              <CheckboxGroup label="Agree to the following" validationBehavior="native">
                 <Checkbox value="terms" isRequired>Terms and conditions</Checkbox>
                 <Checkbox value="cookies" isRequired>Cookies</Checkbox>
                 <Checkbox value="privacy">Privacy policy</Checkbox>
@@ -477,7 +470,6 @@ describe('CheckboxGroup', () => {
 
         let group = getByRole('group');
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         let checkboxes = getAllByRole('checkbox');
         for (let input of checkboxes.slice(0, 2)) {
@@ -490,8 +482,6 @@ describe('CheckboxGroup', () => {
         expect(checkboxes[2].validity.valid).toBe(true);
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -504,16 +494,13 @@ describe('CheckboxGroup', () => {
         await user.click(checkboxes[1]);
         expect(checkboxes[1].validity.valid).toBe(true);
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports group level validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <CheckboxGroup label="Agree to the following" validationBehavior="native" validate={v => v.length < 3 ? 'You must accept all terms' : null} onValidationChange={onValidationChange}>
+              <CheckboxGroup label="Agree to the following" validationBehavior="native" validate={v => v.length < 3 ? 'You must accept all terms' : null}>
                 <Checkbox value="terms">Terms and conditions</Checkbox>
                 <Checkbox value="cookies">Cookies</Checkbox>
                 <Checkbox value="privacy">Privacy policy</Checkbox>
@@ -524,7 +511,6 @@ describe('CheckboxGroup', () => {
 
         let group = getByRole('group');
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         let checkboxes = getAllByRole('checkbox');
         for (let input of checkboxes) {
@@ -534,8 +520,6 @@ describe('CheckboxGroup', () => {
         }
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms']));
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent(['You must accept all terms']);
@@ -557,17 +541,13 @@ describe('CheckboxGroup', () => {
         for (let input of checkboxes) {
           expect(input.validity.valid).toBe(true);
         }
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports checkbox level validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <CheckboxGroup label="Agree to the following" validationBehavior="native" onValidationChange={onValidationChange}>
+              <CheckboxGroup label="Agree to the following" validationBehavior="native">
                 <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
                 <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
                 <Checkbox value="privacy">Privacy policy</Checkbox>
@@ -578,7 +558,6 @@ describe('CheckboxGroup', () => {
 
         let group = getByRole('group');
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         let checkboxes = getAllByRole('checkbox');
         expect(checkboxes[0].validity.valid).toBe(false);
@@ -586,8 +565,6 @@ describe('CheckboxGroup', () => {
         expect(checkboxes[2].validity.valid).toBe(true);
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.', 'You must accept the cookies.']));
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms. You must accept the cookies.');
@@ -598,16 +575,11 @@ describe('CheckboxGroup', () => {
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the cookies.');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the cookies.']));
 
         await user.click(checkboxes[1]);
         expect(checkboxes[0].validity.valid).toBe(true);
         expect(checkboxes[1].validity.valid).toBe(true);
         expect(group).not.toHaveAttribute('aria-describedby');
-
-        expect(onValidationChange).toHaveBeenCalledTimes(3);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
@@ -680,10 +652,9 @@ describe('CheckboxGroup', () => {
 
     describe('validationBehavior=aria', () => {
       it('supports group level validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole} = render(
           <Provider theme={theme}>
-            <CheckboxGroup label="Agree to the following" validate={v => v.length < 3 ? 'You must accept all terms' : null} onValidationChange={onValidationChange}>
+            <CheckboxGroup label="Agree to the following" validate={v => v.length < 3 ? 'You must accept all terms' : null}>
               <Checkbox value="terms">Terms and conditions</Checkbox>
               <Checkbox value="cookies">Cookies</Checkbox>
               <Checkbox value="privacy">Privacy policy</Checkbox>
@@ -694,8 +665,6 @@ describe('CheckboxGroup', () => {
         let group = getByRole('group');
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept all terms');
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept all terms']));
 
         let checkboxes = getAllByRole('checkbox');
         for (let input of checkboxes) {
@@ -711,16 +680,12 @@ describe('CheckboxGroup', () => {
 
         await user.click(checkboxes[2]);
         expect(group).not.toHaveAttribute('aria-describedby');
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports checkbox level validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole} = render(
           <Provider theme={theme}>
-            <CheckboxGroup label="Agree to the following" onValidationChange={onValidationChange}>
+            <CheckboxGroup label="Agree to the following">
               <Checkbox value="terms" validate={v => !v ? 'You must accept the terms.' : null}>Terms and conditions</Checkbox>
               <Checkbox value="cookies" validate={v => !v ? 'You must accept the cookies.' : null}>Cookies</Checkbox>
               <Checkbox value="privacy">Privacy policy</Checkbox>
@@ -739,19 +704,13 @@ describe('CheckboxGroup', () => {
         let group = getByRole('group');
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms. You must accept the cookies.');
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the terms.', 'You must accept the cookies.']));
 
         await user.click(checkboxes[0]);
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the cookies.');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['You must accept the cookies.']));
 
         await user.click(checkboxes[1]);
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(3);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/datepicker/test/DateField.test.js b/packages/@react-spectrum/datepicker/test/DateField.test.js
index bd6912e6d78..cfbac54a0b4 100644
--- a/packages/@react-spectrum/datepicker/test/DateField.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateField.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, createValidationResult, fireEvent, pointerMap, render as render_, within} from '@react-spectrum/test-utils';
+import {act, fireEvent, pointerMap, render as render_, within} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
 import {CalendarDate, CalendarDateTime, ZonedDateTime} from '@internationalized/date';
 import {DateField} from '../';
@@ -373,11 +373,10 @@ describe('DateField', function () {
     describe('validation', () => {
       describe('validationBehavior=native', () => {
         it('supports isRequired', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateField label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DateField label="Date" name="date" isRequired validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -387,11 +386,8 @@ describe('DateField', function () {
           expect(input).toHaveAttribute('required');
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -405,16 +401,13 @@ describe('DateField', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Constraints not satisfied');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports minValue and maxValue', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateField label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} validationBehavior="native" onValidationChange={onValidationChange} />
+                <DateField label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -424,11 +417,8 @@ describe('DateField', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(input.validity.valid).toBe(false);
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Value must be on or after 2/3/2020');
@@ -441,8 +431,6 @@ describe('DateField', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
 
           await user.tab({shift: true});
           await user.keyboard('2025');
@@ -452,8 +440,6 @@ describe('DateField', function () {
 
           act(() => getByTestId('form').checkValidity());
           expect(getDescription()).toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(3);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
 
           await user.tab({shift: true});
           await user.keyboard('[ArrowDown]');
@@ -462,16 +448,13 @@ describe('DateField', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(4);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports validate function', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateField name="date" label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validationBehavior="native" validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+                <DateField name="date" label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validationBehavior="native" validate={v => v.year < 2022 ? 'Invalid value' : null} />
               </Form>
             </Provider>
           );
@@ -481,11 +464,8 @@ describe('DateField', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(false);
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
@@ -499,8 +479,6 @@ describe('DateField', function () {
 
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(true);
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports server validation', async () => {
@@ -561,11 +539,10 @@ describe('DateField', function () {
         });
 
         it('clears validation on form reset', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateField label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DateField label="Date" name="date" isRequired validationBehavior="native" />
                 <Button type="reset" data-testid="reset">Reset</Button>
               </Form>
             </Provider>
@@ -576,11 +553,8 @@ describe('DateField', function () {
           expect(input).toHaveAttribute('required');
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -589,18 +563,15 @@ describe('DateField', function () {
           await user.click(getByTestId('reset'));
 
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
       });
 
       describe('validationBehavior=aria', () => {
         it('supports minValue and maxValue', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateField label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} onValidationChange={onValidationChange} />
+                <DateField label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} />
               </Form>
             </Provider>
           );
@@ -608,31 +579,22 @@ describe('DateField', function () {
           let group = getByRole('group');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
 
           await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
           expect(getDescription()).toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(3);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
 
           await user.keyboard('[ArrowDown]');
           expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(4);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports validate function', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateField label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+                <DateField label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validate={v => v.year < 2022 ? 'Invalid value' : null} />
               </Form>
             </Provider>
           );
@@ -641,14 +603,9 @@ describe('DateField', function () {
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Invalid value');
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
           await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
           expect(getDescription()).not.toContain('Invalid value');
-
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/datepicker/test/DatePicker.test.js b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
index 00560efa931..a5ec91e8e24 100644
--- a/packages/@react-spectrum/datepicker/test/DatePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, createValidationResult, fireEvent, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
+import {act, fireEvent, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
 import {CalendarDate, CalendarDateTime, EthiopicCalendar, getLocalTimeZone, JapaneseCalendar, toCalendarDateTime, today} from '@internationalized/date';
 import {DatePicker} from '../';
@@ -1937,11 +1937,10 @@ describe('DatePicker', function () {
     describe('validation', () => {
       describe('validationBehavior=native', () => {
         it('supports isRequired', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DatePicker label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DatePicker label="Date" name="date" isRequired validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -1951,11 +1950,8 @@ describe('DatePicker', function () {
           expect(input).toHaveAttribute('required');
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -1969,16 +1965,13 @@ describe('DatePicker', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Constraints not satisfied');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports minValue and maxValue', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DatePicker label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} validationBehavior="native" onValidationChange={onValidationChange} />
+                <DatePicker label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -1988,11 +1981,8 @@ describe('DatePicker', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(input.validity.valid).toBe(false);
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Value must be on or after 2/3/2020');
@@ -2005,8 +1995,6 @@ describe('DatePicker', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
 
           await user.tab({shift: true});
           await user.keyboard('2025');
@@ -2016,8 +2004,6 @@ describe('DatePicker', function () {
 
           act(() => getByTestId('form').checkValidity());
           expect(getDescription()).toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(3);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
 
           await user.tab({shift: true});
           await user.keyboard('[ArrowDown]');
@@ -2026,16 +2012,13 @@ describe('DatePicker', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(4);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports validate function', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DatePicker name="date" label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validationBehavior="native" validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+                <DatePicker name="date" label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validationBehavior="native" validate={v => v.year < 2022 ? 'Invalid value' : null} />
               </Form>
             </Provider>
           );
@@ -2045,11 +2028,8 @@ describe('DatePicker', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(false);
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
@@ -2063,8 +2043,6 @@ describe('DatePicker', function () {
 
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(true);
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports server validation', async () => {
@@ -2125,11 +2103,10 @@ describe('DatePicker', function () {
         });
 
         it('clears validation on form reset', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DatePicker label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DatePicker label="Date" name="date" isRequired validationBehavior="native" />
                 <Button type="reset" data-testid="reset">Reset</Button>
               </Form>
             </Provider>
@@ -2140,11 +2117,8 @@ describe('DatePicker', function () {
           expect(input).toHaveAttribute('required');
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -2153,16 +2127,13 @@ describe('DatePicker', function () {
           await user.click(getByTestId('reset'));
 
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('updates when selecting a date with the calendar', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DatePicker label="Date" name="date" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DatePicker label="Date" name="date" isRequired validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -2172,11 +2143,8 @@ describe('DatePicker', function () {
           expect(input).toHaveAttribute('required');
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -2187,18 +2155,15 @@ describe('DatePicker', function () {
 
           expect(input.validity.valid).toBe(true);
           expect(getDescription()).not.toContain('Constraints not satisfied');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
       });
 
       describe('validationBehavior=aria', () => {
         it('supports minValue and maxValue', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DatePicker label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} onValidationChange={onValidationChange} />
+                <DatePicker label="Date" name="date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={new CalendarDate(2019, 2, 3)} />
               </Form>
             </Provider>
           );
@@ -2206,31 +2171,22 @@ describe('DatePicker', function () {
           let group = getByRole('group');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020'], 'rangeUnderflow'));
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
 
           await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
           expect(getDescription()).toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(3);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
 
           await user.keyboard('[ArrowDown]');
           expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(4);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports validate function', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DatePicker label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validate={v => v.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+                <DatePicker label="Value" defaultValue={new CalendarDate(2020, 2, 3)} validate={v => v.year < 2022 ? 'Invalid value' : null} />
               </Form>
             </Provider>
           );
@@ -2239,14 +2195,9 @@ describe('DatePicker', function () {
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Invalid value');
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
           await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
           expect(getDescription()).not.toContain('Invalid value');
-
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index 2453c813c7f..13adb73edb1 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, createValidationResult, fireEvent, getAllByRole as getAllByRoleInContainer, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
+import {act, fireEvent, getAllByRole as getAllByRoleInContainer, pointerMap, render as render_, triggerPress, waitFor, within} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
 import {CalendarDate, CalendarDateTime, getLocalTimeZone, toCalendarDateTime, today} from '@internationalized/date';
 import {DateRangePicker} from '../';
@@ -1526,11 +1526,10 @@ describe('DateRangePicker', function () {
     describe('validation', () => {
       describe('validationBehavior=native', () => {
         it('supports isRequired', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native"/>
               </Form>
             </Provider>
           );
@@ -1543,11 +1542,8 @@ describe('DateRangePicker', function () {
           expect(endInput).toHaveAttribute('required');
           expect(endInput.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -1563,16 +1559,13 @@ describe('DateRangePicker', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Constraints not satisfied');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports minValue and maxValue', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker label="Date" startName="start" endName="end" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} validationBehavior="native" onValidationChange={onValidationChange} />
+                <DateRangePicker label="Date" startName="start" endName="end" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -1584,11 +1577,8 @@ describe('DateRangePicker', function () {
           expect(startInput.validity.valid).toBe(false);
           expect(endInput.validity.valid).toBe(false);
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020', 'Value must be on or before 2/3/2024'], 'rangeUnderflow', 'rangeOverflow'));
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
@@ -1603,8 +1593,6 @@ describe('DateRangePicker', function () {
 
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
           expect(getDescription()).toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
 
           await user.keyboard('[Tab][Tab][ArrowDown]');
           expect(getDescription()).toContain('Value must be on or before 2/3/2024');
@@ -1613,16 +1601,13 @@ describe('DateRangePicker', function () {
           await user.tab();
 
           expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(3);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports validate function', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker startName="start" endName="end" label="Value" defaultValue={{start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2021, 2, 3)}} validationBehavior="native" validate={v => v.start.year < 2022 || v.end.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+                <DateRangePicker startName="start" endName="end" label="Value" defaultValue={{start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2021, 2, 3)}} validationBehavior="native" validate={v => v.start.year < 2022 || v.end.year < 2022 ? 'Invalid value' : null} />
               </Form>
             </Provider>
           );
@@ -1634,11 +1619,8 @@ describe('DateRangePicker', function () {
           expect(getDescription()).not.toContain('Invalid value');
           expect(startInput.validity.valid).toBe(false);
           expect(endInput.validity.valid).toBe(false);
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
@@ -1657,8 +1639,6 @@ describe('DateRangePicker', function () {
           expect(getDescription()).not.toContain('Invalid value');
           expect(startInput.validity.valid).toBe(true);
           expect(endInput.validity.valid).toBe(true);
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports server validation', async () => {
@@ -1719,11 +1699,10 @@ describe('DateRangePicker', function () {
         });
 
         it('clears validation on form reset', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" />
                 <Button type="reset" data-testid="reset">Reset</Button>
               </Form>
             </Provider>
@@ -1734,11 +1713,8 @@ describe('DateRangePicker', function () {
           expect(input).toHaveAttribute('required');
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -1747,16 +1723,13 @@ describe('DateRangePicker', function () {
           await user.click(getByTestId('reset'));
 
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('updates when selecting a date with the calendar', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -1766,11 +1739,8 @@ describe('DateRangePicker', function () {
           expect(input).toHaveAttribute('required');
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
-          expect(onValidationChange).not.toHaveBeenCalled();
 
           act(() => getByTestId('form').checkValidity());
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -1782,18 +1752,15 @@ describe('DateRangePicker', function () {
 
           expect(input.validity.valid).toBe(true);
           expect(getDescription()).not.toContain('Constraints not satisfied');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
       });
 
       describe('validationBehavior=aria', () => {
         it('supports minValue and maxValue', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker label="Date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} onValidationChange={onValidationChange} />
+                <DateRangePicker label="Date" minValue={new CalendarDate(2020, 2, 3)} maxValue={new CalendarDate(2024, 2, 3)} defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} />
               </Form>
             </Provider>
           );
@@ -1801,27 +1768,20 @@ describe('DateRangePicker', function () {
           let group = getByRole('group');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or after 2/3/2020', 'Value must be on or before 2/3/2024'], 'rangeUnderflow', 'rangeOverflow'));
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
           expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
           expect(getDescription()).toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Value must be on or before 2/3/2024'], 'rangeOverflow'));
 
           await user.keyboard('[Tab][Tab][Tab][ArrowDown]');
           expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
-          expect(onValidationChange).toHaveBeenCalledTimes(3);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports validate function', async () => {
-          let onValidationChange = jest.fn();
           let {getByRole} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker label="Value" defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} validate={v => v.start.year < 2022 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+                <DateRangePicker label="Value" defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} validate={v => v.start.year < 2022 ? 'Invalid value' : null} />
               </Form>
             </Provider>
           );
@@ -1830,14 +1790,9 @@ describe('DateRangePicker', function () {
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Invalid value');
-          expect(onValidationChange).toHaveBeenCalledTimes(1);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
           await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
           expect(getDescription()).not.toContain('Invalid value');
-
-          expect(onValidationChange).toHaveBeenCalledTimes(2);
-          expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
         });
 
         it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
index 881bf48c74e..c831d8783f1 100644
--- a/packages/@react-spectrum/numberfield/test/NumberField.test.js
+++ b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -11,7 +11,7 @@
  */
 
 jest.mock('@react-aria/live-announcer');
-import {act, createValidationResult, fireEvent, pointerMap, render, triggerPress, within} from '@react-spectrum/test-utils';
+import {act, fireEvent, pointerMap, render, triggerPress, within} from '@react-spectrum/test-utils';
 import {announce} from '@react-aria/live-announcer';
 import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
@@ -2265,11 +2265,10 @@ describe('NumberField', function () {
   describe('validation', () => {
     describe('validationBehavior=native', () => {
       it('supports isRequired', async () => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <NumberField data-testid="input" label="Value" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              <NumberField data-testid="input" label="Value" isRequired validationBehavior="native" />
             </Form>
           </Provider>
         );
@@ -2279,11 +2278,8 @@ describe('NumberField', function () {
         expect(input).not.toHaveAttribute('aria-required');
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -2297,16 +2293,13 @@ describe('NumberField', function () {
         await user.tab();
 
         expect(input).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <NumberField data-testid="input" label="Value" defaultValue={2} step={2} validationBehavior="native" validate={v => v !== 4 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              <NumberField data-testid="input" label="Value" defaultValue={2} step={2} validationBehavior="native" validate={v => v !== 4 ? 'Invalid value' : null} />
             </Form>
           </Provider>
         );
@@ -2314,11 +2307,8 @@ describe('NumberField', function () {
         let input = getByTestId('input');
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -2333,8 +2323,6 @@ describe('NumberField', function () {
 
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(true);
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
@@ -2396,11 +2384,10 @@ describe('NumberField', function () {
 
     describe('validationBehavior=aria', () => {
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <NumberField data-testid="input" label="Value" defaultValue={2} validate={v => v === 2 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              <NumberField data-testid="input" label="Value" defaultValue={2} validate={v => v === 2 ? 'Invalid value' : null} />
             </Form>
           </Provider>
         );
@@ -2409,8 +2396,6 @@ describe('NumberField', function () {
         expect(input).toHaveAttribute('aria-describedby');
         expect(input).toHaveAttribute('aria-invalid', 'true');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
         expect(input.validity.valid).toBe(true);
 
         await user.tab();
@@ -2418,9 +2403,6 @@ describe('NumberField', function () {
         await user.tab();
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input).not.toHaveAttribute('aria-invalid');
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/radio/test/Radio.test.js b/packages/@react-spectrum/radio/test/Radio.test.js
index 22e38d3dbd5..546cbed8a45 100644
--- a/packages/@react-spectrum/radio/test/Radio.test.js
+++ b/packages/@react-spectrum/radio/test/Radio.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, createValidationResult, pointerMap, render} from '@react-spectrum/test-utils';
+import {act, pointerMap, render} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
 import {Form} from '@react-spectrum/form';
 import {Provider} from '@react-spectrum/provider';
@@ -683,11 +683,10 @@ describe('Radios', function () {
   describe('validation', () => {
     describe('validationBehavior=native', () => {
       it('supports isRequired', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <RadioGroup aria-label="favorite pet" isRequired validationBehavior="native" onValidationChange={onValidationChange}>
+              <RadioGroup aria-label="favorite pet" isRequired validationBehavior="native">
                 <Radio value="dogs">Dogs</Radio>
                 <Radio value="cats">Cats</Radio>
                 <Radio value="dragons">Dragons</Radio>
@@ -698,7 +697,6 @@ describe('Radios', function () {
 
         let group = getByRole('radiogroup');
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         let radios = getAllByRole('radio');
         for (let input of radios) {
@@ -708,8 +706,6 @@ describe('Radios', function () {
         }
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -720,16 +716,13 @@ describe('Radios', function () {
         }
 
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole, getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <RadioGroup aria-label="favorite pet" defaultValue="dragons" validationBehavior="native" validate={v => v === 'dragons' ? 'Too scary' : null} onValidationChange={onValidationChange}>
+              <RadioGroup aria-label="favorite pet" defaultValue="dragons" validationBehavior="native" validate={v => v === 'dragons' ? 'Too scary' : null}>
                 <Radio value="dogs">Dogs</Radio>
                 <Radio value="cats">Cats</Radio>
                 <Radio value="dragons">Dragons</Radio>
@@ -740,7 +733,6 @@ describe('Radios', function () {
 
         let group = getByRole('radiogroup');
         expect(group).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         let radios = getAllByRole('radio');
         for (let input of radios) {
@@ -750,8 +742,6 @@ describe('Radios', function () {
         }
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Too scary']));
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent(['Too scary']);
@@ -761,9 +751,6 @@ describe('Radios', function () {
         for (let input of radios) {
           expect(input.validity.valid).toBe(true);
         }
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
@@ -836,10 +823,9 @@ describe('Radios', function () {
 
     describe('validationBehavior=aria', () => {
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getAllByRole, getByRole} = render(
           <Provider theme={theme}>
-            <RadioGroup aria-label="favorite pet" defaultValue="dragons" validate={v => v === 'dragons' ? 'Too scary' : null} onValidationChange={onValidationChange}>
+            <RadioGroup aria-label="favorite pet" defaultValue="dragons" validate={v => v === 'dragons' ? 'Too scary' : null}>
               <Radio value="dogs">Dogs</Radio>
               <Radio value="cats">Cats</Radio>
               <Radio value="dragons">Dragons</Radio>
@@ -851,8 +837,6 @@ describe('Radios', function () {
         expect(group).toHaveAttribute('aria-describedby');
         expect(group).toHaveAttribute('aria-invalid', 'true');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Too scary');
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Too scary']));
 
         let radios = getAllByRole('radio');
         for (let input of radios) {
@@ -862,9 +846,6 @@ describe('Radios', function () {
         await user.click(radios[0]);
         expect(group).not.toHaveAttribute('aria-describedby');
         expect(group).not.toHaveAttribute('aria-invalid');
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/textfield/test/TextField.test.js b/packages/@react-spectrum/textfield/test/TextField.test.js
index 06a2f66acd7..8438a4f434f 100644
--- a/packages/@react-spectrum/textfield/test/TextField.test.js
+++ b/packages/@react-spectrum/textfield/test/TextField.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, createValidationResult, fireEvent, pointerMap, render, waitFor} from '@react-spectrum/test-utils';
+import {act, fireEvent, pointerMap, render, waitFor} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
 import Checkmark from '@spectrum-icons/workflow/Checkmark';
 import {Form} from '@react-spectrum/form';
@@ -483,11 +483,10 @@ describe('Shared TextField behavior', () => {
         ${'v3 TextArea'}    | ${TextArea}
         ${'v3 SearchField'} | ${SearchField}
       `('$Name supports isRequired', async ({Component}) => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <Component data-testid="input" label="Name" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              <Component data-testid="input" label="Name" isRequired validationBehavior="native" />
             </Form>
           </Provider>
         );
@@ -497,11 +496,8 @@ describe('Shared TextField behavior', () => {
         expect(input).not.toHaveAttribute('aria-required');
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -515,8 +511,6 @@ describe('Shared TextField behavior', () => {
         await user.tab();
 
         expect(input).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it.each`
@@ -525,11 +519,10 @@ describe('Shared TextField behavior', () => {
         ${'v3 TextArea'}    | ${TextArea}
         ${'v3 SearchField'} | ${SearchField}
       `('$Name supports validate function', async ({Component}) => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <Component data-testid="input" label="Name" defaultValue="Foo" validationBehavior="native" validate={v => v === 'Foo' ? 'Invalid name' : null} onValidationChange={onValidationChange} />
+              <Component data-testid="input" label="Name" defaultValue="Foo" validationBehavior="native" validate={v => v === 'Foo' ? 'Invalid name' : null} />
             </Form>
           </Provider>
         );
@@ -537,11 +530,8 @@ describe('Shared TextField behavior', () => {
         let input = getByTestId('input');
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid name']));
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name');
@@ -555,8 +545,6 @@ describe('Shared TextField behavior', () => {
         await user.tab();
 
         expect(input).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it.each`
@@ -633,11 +621,10 @@ describe('Shared TextField behavior', () => {
         ${'v3 TextArea'}    | ${TextArea}
         ${'v3 SearchField'} | ${SearchField}
       `('$Name supports validate function', async ({Component}) => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <Component data-testid="input" label="Name" defaultValue="Foo" validate={v => v === 'Foo' ? 'Invalid name' : null} onValidationChange={onValidationChange} />
+              <Component data-testid="input" label="Name" defaultValue="Foo" validate={v => v === 'Foo' ? 'Invalid name' : null} />
             </Form>
           </Provider>
         );
@@ -646,17 +633,12 @@ describe('Shared TextField behavior', () => {
         expect(input).toHaveAttribute('aria-describedby');
         expect(input).toHaveAttribute('aria-invalid', 'true');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name');
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid name']));
         expect(input.validity.valid).toBe(true);
 
         await user.tab();
         await user.keyboard('Devon');
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input).not.toHaveAttribute('aria-invalid');
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it.each`
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index 8cc9137dbf9..d3d22360a3b 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -11,8 +11,8 @@
  */
 
 import {CheckboxGroupProps} from '@react-types/checkbox';
+import {mergeValidation, useFormValidationState} from '@react-stately/form';
 import {useControlledState} from '@react-stately/utils';
-import {useFormValidationState, VALID_VALIDITY_STATE} from '@react-stately/form';
 import {useMemo, useState} from 'react';
 import {ValidationResult, ValidationState} from '@react-types/shared';
 
@@ -82,7 +82,7 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
   });
 
   // Aggregate errors from all invalid checkboxes.
-  let aggregatedValidation = useMemo(() => aggregateValidation(invalidValues), [invalidValues]);
+  let aggregatedValidation = useMemo(() => mergeValidation(...invalidValues.values()), [invalidValues]);
   let isInvalid = props.isInvalid || props.validationState === 'invalid' || aggregatedValidation.isInvalid;
 
   // Get display validation for the group. This handles the aggregated errors from each checkbox,
@@ -90,8 +90,7 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
   let validation = useFormValidationState({
     value: selectedValues,
     builtinValidation: aggregatedValidation,
-    name: props.name,
-    onValidationChange: props.onValidationChange
+    name: props.name
   });
 
   const state: CheckboxGroupState = {
@@ -161,28 +160,3 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
 
   return state;
 }
-
-function aggregateValidation(invalidValues: Map<string, ValidationResult>): ValidationResult {
-  let errors = new Set<string>();
-  let isInvalid = invalidValues.size > 0;
-  let validationDetails = {
-    ...VALID_VALIDITY_STATE,
-    valid: !isInvalid
-  };
-
-  for (let v of invalidValues.values()) {
-    for (let e of v.errors) {
-      errors.add(e);
-    }
-
-    // Only these properties apply for checkboxes.
-    validationDetails.valueMissing ||= v.validationDetails.valueMissing;
-    validationDetails.customError ||= v.validationDetails.customError;
-  }
-
-  return {
-    isInvalid,
-    errors: [...errors],
-    validationDetails
-  };
-}
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index 709ff6e3c81..837140fb5ae 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -46,7 +46,8 @@ export const privateValidationStateProp = '__formValidationState' + Date.now();
 interface FormValidationProps<T> extends Validation<T> {
   builtinValidation?: ValidationResult,
   name?: string,
-  value: T
+  value: T,
+  onValidationChange?: (e: ValidationResult) => void
 }
 
 export interface FormValidationState<T> {
diff --git a/packages/@react-types/shared/src/inputs.d.ts b/packages/@react-types/shared/src/inputs.d.ts
index 30291a6dd06..c89cc5570cb 100644
--- a/packages/@react-types/shared/src/inputs.d.ts
+++ b/packages/@react-types/shared/src/inputs.d.ts
@@ -38,11 +38,7 @@ export interface Validation<T> {
    * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
    * prop instead.
    */
-  validate?: ValidationFunction<T>,
-  /**
-   * Handler that is called when input validation changes.
-   */
-  onValidationChange?: (e: ValidationResult) => void
+  validate?: ValidationFunction<T>
 }
 
 export interface ValidationResult {

From 3bb4eedfeb39ab8e787f3e09b269cbf17acd0771 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 20 Oct 2023 15:12:17 -0700
Subject: [PATCH 11/38] Localize date picker validation errors

---
 .../datepicker/test/DateRangePicker.test.js   | 24 ++---
 .../@react-stately/datepicker/intl/en-US.json |  6 ++
 .../datepicker/src/useDateFieldState.ts       | 18 ++--
 .../datepicker/src/useDatePickerState.ts      | 16 ++--
 .../datepicker/src/useDateRangePickerState.ts | 45 +++-------
 .../@react-stately/datepicker/src/utils.ts    | 89 +++++++++++++++----
 6 files changed, 114 insertions(+), 84 deletions(-)
 create mode 100644 packages/@react-stately/datepicker/intl/en-US.json

diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index 13adb73edb1..562ddefe254 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -1529,7 +1529,7 @@ describe('DateRangePicker', function () {
           let {getByRole, getByTestId} = render(
             <Provider theme={theme}>
               <Form data-testid="form">
-                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native"/>
+                <DateRangePicker label="Date" startName="start" endName="end" isRequired validationBehavior="native" />
               </Form>
             </Provider>
           );
@@ -1576,31 +1576,31 @@ describe('DateRangePicker', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(startInput.validity.valid).toBe(false);
           expect(endInput.validity.valid).toBe(false);
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
           act(() => getByTestId('form').checkValidity());
 
           expect(group).toHaveAttribute('aria-describedby');
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later. Value must be 2/3/2024 or earlier.');
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
 
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later. Value must be 2/3/2024 or earlier.');
           expect(startInput.validity.valid).toBe(false);
           expect(endInput.validity.valid).toBe(false);
 
           await user.tab();
 
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.keyboard('[Tab][Tab][ArrowDown]');
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
           expect(startInput.validity.valid).toBe(true);
           expect(endInput.validity.valid).toBe(true);
           await user.tab();
 
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
         it('supports validate function', async () => {
@@ -1767,14 +1767,14 @@ describe('DateRangePicker', function () {
 
           let group = getByRole('group');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020 Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later. Value must be 2/3/2024 or earlier.');
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.keyboard('[Tab][Tab][Tab][ArrowDown]');
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
         it('supports validate function', async () => {
diff --git a/packages/@react-stately/datepicker/intl/en-US.json b/packages/@react-stately/datepicker/intl/en-US.json
new file mode 100644
index 00000000000..a2985739ad2
--- /dev/null
+++ b/packages/@react-stately/datepicker/intl/en-US.json
@@ -0,0 +1,6 @@
+{
+  "rangeUnderflow": "Value must be {minValue} or later.",
+  "rangeOverflow": "Value must be {maxValue} or earlier.",
+  "rangeReversed": "Start date must be before end date.",
+  "unavailableDate": "Selected date unavailable."
+}
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index f143d698663..dd6bcc329b5 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -151,6 +151,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     isDisabled,
     isReadOnly,
     isRequired,
+    minValue,
+    maxValue,
     isDateUnavailable
   } = props;
 
@@ -316,16 +318,12 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     }
   };
 
-  // TODO: do we really need both isDateUnavailable AND validate??
-  let isUnavailable = useMemo(() => (value && isDateUnavailable?.(value)) || false, [value, isDateUnavailable]);
-  let builtinValidation = getValidationResult(
-    calendarValue,
-    props.minValue,
-    props.maxValue,
-    isUnavailable,
-    dateFormatter,
-    timeZone
-  );
+  let builtinValidation = useMemo(() => getValidationResult(
+    value,
+    minValue,
+    maxValue,
+    isDateUnavailable
+  ), [value, minValue, maxValue, isDateUnavailable]);
 
   let validation = useFormValidationState({
     ...props,
diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts
index fd56f20291a..3cad4e41a7d 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts
@@ -94,17 +94,13 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
-  let isDateUnavailable = props.isDateUnavailable;
-  let isUnavailable = useMemo(() => (value && isDateUnavailable?.(value)) || false, [value, isDateUnavailable]);
-  let dateFormatter = useMemo(() => new DateFormatter('en-US'), []);
-  let builtinValidation = getValidationResult(
+  let {minValue, maxValue, isDateUnavailable} = props;
+  let builtinValidation = useMemo(() => getValidationResult(
     value,
-    props.minValue,
-    props.maxValue,
-    isUnavailable,
-    dateFormatter,
-    'America/Los_Angeles'
-  );
+    minValue,
+    maxValue,
+    isDateUnavailable
+  ), [value, minValue, maxValue, isDateUnavailable]);
 
   let validation = useFormValidationState({
     ...props,
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index fdb3bfd70d1..6084595fb81 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -12,8 +12,8 @@
 
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
-import {FieldOptions, getFormatOptions, getPlaceholderTime, getValidationResult, isInvalid, useDefaultProps} from './utils';
-import {FormValidationState, mergeValidation, useFormValidationState} from '@react-stately/form';
+import {FieldOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
@@ -156,44 +156,19 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 
-  // let isValueInvalid = props.isInvalid || props.validationState === 'invalid'
-  //   || (value != null && (
-  //     isInvalid(value.start, props.minValue, props.maxValue) ||
-  //     isInvalid(value.end, props.minValue, props.maxValue) ||
-  //     (value.end != null && value.start != null && value.end.compare(value.start) < 0) ||
-  //     (value?.start && props.isDateUnavailable?.(value.start)) ||
-  //     (value?.end && props.isDateUnavailable?.(value.end))
-  //   ));
-  // let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
-
-  let dateFormatter = useMemo(() => new DateFormatter('en-US'), []);
-  let startValidation = getValidationResult(
-    value?.start,
-    props.minValue,
-    props.maxValue,
-    (value?.start && props.isDateUnavailable?.(value.start)) || false,
-    dateFormatter,
-    'America/Los_Angeles'
-  );
-
-  let endValidation = getValidationResult(
-    value?.end,
-    props.minValue,
-    props.maxValue,
-    (value?.end && props.isDateUnavailable?.(value.end)) || false,
-    dateFormatter,
-    'America/Los_Angeles'
-  );
-
-  if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
-    // TODO
-  }
+  let {minValue, maxValue, isDateUnavailable} = props;
+  let builtinValidation = useMemo(() => getRangeValidationResult(
+    value,
+    minValue,
+    maxValue,
+    isDateUnavailable
+  ), [value, minValue, maxValue, isDateUnavailable]);
 
   let validation = useFormValidationState({
     ...props,
     value,
     name: props.startName, // TODO
-    builtinValidation: mergeValidation(startValidation, endValidation)
+    builtinValidation
   });
 
   let isValueInvalid = validation.displayValidation.isInvalid;
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index df997192a0a..674fd32edf6 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -12,40 +12,58 @@
 
 import {Calendar, DateFormatter, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+// @ts-ignore
+import i18nMessages from '../intl/*.json';
+import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string';
+import {mergeValidation, VALID_VALIDITY_STATE} from '@react-stately/form';
+import {RangeValue, ValidationResult} from '@react-types/shared';
 import {useState} from 'react';
-import {ValidationResult} from '@react-types/shared';
 
-export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateValue) {
-  return value != null && (
-    (minValue != null && value.compare(minValue) < 0) ||
-    (maxValue != null && value.compare(maxValue) > 0)
-  );
+const dictionary = new LocalizedStringDictionary(i18nMessages);
+
+function getLocale() {
+  // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided
+  // validation messages, which to not respect our provider's language.
+  // @ts-ignore
+  return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US';
 }
 
 export function getValidationResult(
   value: DateValue,
   minValue: DateValue,
   maxValue: DateValue,
-  isDateUnavailable: boolean,
-  dateFormatter: DateFormatter,
-  timeZone: string
+  isDateUnavailable: (v: DateValue) => boolean
 ): ValidationResult {
   let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;
   let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;
+  let isUnavailable = (value != null && isDateUnavailable?.(value)) || false;
+  let isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
   let errors = [];
-  if (rangeUnderflow) {
-    errors = [`Value must be on or after ${dateFormatter.format(minValue.toDate(timeZone))}`];
-  }
 
-  if (rangeOverflow) {
-    errors = [`Value must be on or before ${dateFormatter.format(maxValue.toDate(timeZone))}`];
+  if (isInvalid) {
+    let locale = getLocale();
+    let formatter = new LocalizedStringFormatter(locale, dictionary);
+    let dateFormatter = new DateFormatter(locale, {timeZone: 'timeZone' in value ? value.timeZone : undefined});
+    let timeZone = dateFormatter.resolvedOptions().timeZone;
+
+    if (rangeUnderflow) {
+      errors.push(formatter.format('rangeUnderflow', {minValue: dateFormatter.format(minValue.toDate(timeZone))}));
+    }
+
+    if (rangeOverflow) {
+      errors.push(formatter.format('rangeOverflow', {maxValue: dateFormatter.format(maxValue.toDate(timeZone))}));
+    }
+
+    if (isUnavailable) {
+      errors.push(formatter.format('unavailableDate'));
+    }
   }
 
   return {
-    isInvalid: rangeOverflow || rangeUnderflow || isDateUnavailable,
+    isInvalid,
     errors,
     validationDetails: {
-      badInput: isDateUnavailable,
+      badInput: isUnavailable,
       customError: false,
       patternMismatch: false,
       rangeOverflow,
@@ -55,11 +73,48 @@ export function getValidationResult(
       tooShort: false,
       typeMismatch: false,
       valueMissing: false,
-      valid: !rangeOverflow && !rangeUnderflow && !isDateUnavailable
+      valid: !isInvalid
     }
   };
 }
 
+export function getRangeValidationResult(
+  value: RangeValue<DateValue>,
+  minValue: DateValue,
+  maxValue: DateValue,
+  isDateUnavailable: (v: DateValue) => boolean
+) {
+  let startValidation = getValidationResult(
+    value?.start,
+    minValue,
+    maxValue,
+    isDateUnavailable
+  );
+
+  let endValidation = getValidationResult(
+    value?.end,
+    minValue,
+    maxValue,
+    isDateUnavailable
+  );
+
+  let result = mergeValidation(startValidation, endValidation);
+  if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+    result = mergeValidation(result, {
+      isInvalid: true,
+      errors: [dictionary.getStringForLocale('rangeReversed', getLocale())],
+      validationDetails: {
+        ...VALID_VALIDITY_STATE,
+        rangeUnderflow: true,
+        rangeOverflow: true,
+        valid: false
+      }
+    });
+  }
+
+  return result;
+}
+
 export type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;
 interface FormatterOptions {
   timeZone?: string,

From 44201db30a3c3a750c075b647ad362f9d1cee9b0 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 20 Oct 2023 15:56:39 -0700
Subject: [PATCH 12/38] TimeField

---
 .../datepicker/src/TimeField.tsx              |  13 +-
 .../datepicker/test/DateField.test.js         |  24 +-
 .../datepicker/test/DatePicker.test.js        |  24 +-
 .../datepicker/test/TimeField.test.js         | 259 ++++++++++++++++++
 .../datepicker/src/useDateFieldState.ts       |   5 +-
 .../datepicker/src/useDatePickerState.ts      |  24 +-
 .../datepicker/src/useDateRangePickerState.ts |  17 +-
 .../datepicker/src/useTimeFieldState.ts       |   8 +-
 .../@react-stately/datepicker/src/utils.ts    |  14 +-
 9 files changed, 338 insertions(+), 50 deletions(-)

diff --git a/packages/@react-spectrum/datepicker/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx
index 3b9e19e5c06..3bae29029fc 100644
--- a/packages/@react-spectrum/datepicker/src/TimeField.tsx
+++ b/packages/@react-spectrum/datepicker/src/TimeField.tsx
@@ -19,6 +19,7 @@ import {Input} from './Input';
 import React, {ReactElement, useRef} from 'react';
 import {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';
 import {useFocusManagerRef} from './utils';
+import {useFormProps} from '@react-spectrum/form';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useTimeField} from '@react-aria/datepicker';
@@ -26,6 +27,7 @@ import {useTimeFieldState} from '@react-stately/datepicker';
 
 function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     autoFocus,
     isDisabled,
@@ -43,11 +45,13 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
 
   let fieldRef = useRef(null);
   let inputRef = useRef(null);
-  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps} = useTimeField({
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useTimeField({
     ...props,
     inputRef
   }, state, fieldRef);
 
+  let validationState = state.validationState || (isInvalid ? 'invalid' : null);
+
   return (
     <Field
       {...props}
@@ -56,7 +60,10 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
+      isInvalid={isInvalid}
+      errors={errors}
+      validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>
       <Input
         ref={fieldRef}
@@ -64,7 +71,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
         isDisabled={isDisabled}
         isQuiet={isQuiet}
         autoFocus={autoFocus}
-        validationState={state.validationState}
+        validationState={validationState}
         className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>
         {state.segments.map((segment, i) =>
           (<DatePickerSegment
diff --git a/packages/@react-spectrum/datepicker/test/DateField.test.js b/packages/@react-spectrum/datepicker/test/DateField.test.js
index cfbac54a0b4..409e96e7ac2 100644
--- a/packages/@react-spectrum/datepicker/test/DateField.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateField.test.js
@@ -416,38 +416,38 @@ describe('DateField', function () {
           let input = document.querySelector('input[name=date]');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(input.validity.valid).toBe(false);
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
           act(() => getByTestId('form').checkValidity());
 
           expect(group).toHaveAttribute('aria-describedby');
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
 
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
           expect(input.validity.valid).toBe(true);
 
           await user.tab();
 
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
           await user.tab({shift: true});
           await user.keyboard('2025');
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
           expect(input.validity.valid).toBe(false);
           await user.tab();
 
           act(() => getByTestId('form').checkValidity());
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.tab({shift: true});
           await user.keyboard('[ArrowDown]');
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
           expect(input.validity.valid).toBe(true);
           await user.tab();
 
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
         it('supports validate function', async () => {
@@ -578,16 +578,16 @@ describe('DateField', function () {
 
           let group = getByRole('group');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
           await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.keyboard('[ArrowDown]');
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
         it('supports validate function', async () => {
diff --git a/packages/@react-spectrum/datepicker/test/DatePicker.test.js b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
index a5ec91e8e24..50da85ab356 100644
--- a/packages/@react-spectrum/datepicker/test/DatePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
@@ -1980,38 +1980,38 @@ describe('DatePicker', function () {
           let input = document.querySelector('input[name=date]');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(input.validity.valid).toBe(false);
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
           act(() => getByTestId('form').checkValidity());
 
           expect(group).toHaveAttribute('aria-describedby');
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
 
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
           expect(input.validity.valid).toBe(true);
 
           await user.tab();
 
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
           await user.tab({shift: true});
           await user.keyboard('2025');
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
           expect(input.validity.valid).toBe(false);
           await user.tab();
 
           act(() => getByTestId('form').checkValidity());
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.tab({shift: true});
           await user.keyboard('[ArrowDown]');
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
           expect(input.validity.valid).toBe(true);
           await user.tab();
 
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
         it('supports validate function', async () => {
@@ -2170,16 +2170,16 @@ describe('DatePicker', function () {
 
           let group = getByRole('group');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
-          expect(getDescription()).toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
 
           await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
-          expect(getDescription()).not.toContain('Value must be on or after 2/3/2020');
+          expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
           await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
-          expect(getDescription()).toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.keyboard('[ArrowDown]');
-          expect(getDescription()).not.toContain('Value must be on or before 2/3/2024');
+          expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
         it('supports validate function', async () => {
diff --git a/packages/@react-spectrum/datepicker/test/TimeField.test.js b/packages/@react-spectrum/datepicker/test/TimeField.test.js
index e9d979de627..c7333013388 100644
--- a/packages/@react-spectrum/datepicker/test/TimeField.test.js
+++ b/packages/@react-spectrum/datepicker/test/TimeField.test.js
@@ -11,6 +11,8 @@
  */
 
 import {act, fireEvent, pointerMap, render as render_, within} from '@react-spectrum/test-utils';
+import {Button} from '@react-spectrum/button';
+import {Form} from '@react-spectrum/form';
 import {parseZonedDateTime, Time} from '@internationalized/date';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -276,5 +278,262 @@ describe('TimeField', function () {
       expect(getDescription()).toBe('Selected Time: 8:30 AM');
       expect(input).toHaveValue('08:30:00');
     });
+
+    describe('validation', () => {
+      describe('validationBehavior=native', () => {
+        it('supports isRequired', async () => {
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <TimeField label="Date" name="date" isRequired validationBehavior="native" />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          act(() => getByTestId('form').checkValidity());
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.keyboard('[Tab][ArrowUp][Tab][ArrowUp][Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Constraints not satisfied');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+
+          expect(getDescription()).not.toContain('Constraints not satisfied');
+        });
+
+        it('supports minValue and maxValue', async () => {
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <TimeField label="Date" name="date" minValue={new Time(9)} maxValue={new Time(17)} defaultValue={new Time(8)} validationBehavior="native" />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(input.validity.valid).toBe(false);
+          expect(getDescription()).not.toContain('Value must be 9:00 AM or later.');
+
+          act(() => getByTestId('form').checkValidity());
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Value must be 9:00 AM or later.');
+
+          await user.keyboard('[Tab][ArrowUp]');
+
+          expect(getDescription()).toContain('Value must be 9:00 AM or later.');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab({shift: true});
+          expect(getDescription()).not.toContain('Value must be 9:00 AM or later.');
+
+          await user.tab();
+          await user.keyboard('6[Tab][ArrowUp]');
+          expect(getDescription()).not.toContain('Value must be 5:00 AM or earlier.');
+          expect(input.validity.valid).toBe(false);
+          await user.tab();
+
+          act(() => getByTestId('form').checkValidity());
+          expect(getDescription()).toContain('Value must be 5:00 PM or earlier.');
+
+          await user.tab();
+          await user.keyboard('[ArrowDown]');
+          expect(getDescription()).toContain('Value must be 5:00 PM or earlier.');
+          expect(input.validity.valid).toBe(true);
+          act(() => document.activeElement.blur());
+
+          expect(getDescription()).not.toContain('Value must be 5:00 PM or earlier.');
+        });
+
+        it('supports validate function', async () => {
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <TimeField name="date" label="Value" defaultValue={new Time(8)} validationBehavior="native" validate={v => v.hour < 9 ? 'Invalid value' : null} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(false);
+
+          act(() => getByTestId('form').checkValidity());
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab]10');
+
+          expect(getDescription()).toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+
+          act(() => document.activeElement.blur());
+
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+        });
+
+        it('supports server validation', async () => {
+          function Test() {
+            let [serverErrors, setServerErrors] = React.useState({});
+            let onSubmit = e => {
+              e.preventDefault();
+              setServerErrors({
+                date: 'Invalid value'
+              });
+            };
+
+            return (
+              <Provider theme={theme}>
+                <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                  <TimeField name="date" label="Value" validationBehavior="native" />
+                  <Button type="submit" data-testid="submit">Submit</Button>
+                </Form>
+              </Provider>
+            );
+          }
+
+          let {getByTestId, getByRole} = render(<Test />);
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          await user.click(getByTestId('submit'));
+
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+          expect(input.validity.valid).toBe(false);
+
+          await user.tab({shift: true});
+          await user.keyboard('2024[ArrowLeft]3[ArrowLeft]2');
+          act(() => document.activeElement.blur());
+
+          expect(getDescription()).not.toContain('Invalid value');
+          expect(input.validity.valid).toBe(true);
+        });
+
+        it('supports customizing native error messages', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <TimeField name="date" label="Value" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          act(() => getByTestId('form').checkValidity());
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+        });
+
+        it('clears validation on form reset', async () => {
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <TimeField label="Date" name="date" isRequired validationBehavior="native" />
+                <Button type="reset" data-testid="reset">Reset</Button>
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          act(() => getByTestId('form').checkValidity());
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.click(getByTestId('reset'));
+
+          expect(group).not.toHaveAttribute('aria-describedby');
+        });
+      });
+
+      describe('validationBehavior=aria', () => {
+        it('supports minValue and maxValue', async () => {
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <TimeField label="Date" name="date" minValue={new Time(9)} maxValue={new Time(17)} defaultValue={new Time(8)} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Value must be 9:00 AM or later.');
+
+          await user.keyboard('[Tab][ArrowUp]');
+          expect(getDescription()).not.toContain('Value must be 9:00 AM or later');
+
+          await user.keyboard('6[Tab][ArrowUp]');
+          expect(getDescription()).toContain('Value must be 5:00 PM or earlier');
+
+          await user.keyboard('[Tab][Tab][ArrowDown]');
+          expect(getDescription()).not.toContain('Value must be 5:00 PM or earlier');
+        });
+
+        it('supports validate function', async () => {
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <TimeField label="Value" defaultValue={new Time(8)} validate={v => v.hour < 9 ? 'Invalid value' : null} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab]10');
+          expect(getDescription()).not.toContain('Invalid value');
+        });
+
+        it('supports server validation', async () => {
+          let {getByRole} = render(
+            <Provider theme={theme}>
+              <Form validationErrors={{value: 'Invalid value'}}>
+                <TimeField label="Value" name="value" defaultValue={new Time(9)} />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Invalid value');
+
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
+          expect(getDescription()).not.toContain('Invalid value');
+        });
+      });
+    });
   });
 });
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index dd6bcc329b5..22a0e63aa9c 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -322,8 +322,9 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     value,
     minValue,
     maxValue,
-    isDateUnavailable
-  ), [value, minValue, maxValue, isDateUnavailable]);
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
 
   let validation = useFormValidationState({
     ...props,
diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts
index 3cad4e41a7d..25832950337 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts
@@ -94,13 +94,24 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
+  let showEra = value?.calendar.identifier === 'gregory' && value.era === 'BC';
+  let formatOpts = useMemo(() => ({
+    granularity,
+    timeZone: defaultTimeZone,
+    hideTimeZone: props.hideTimeZone,
+    hourCycle: props.hourCycle,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    showEra
+  }), [granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, props.hideTimeZone, showEra]);
+
   let {minValue, maxValue, isDateUnavailable} = props;
   let builtinValidation = useMemo(() => getValidationResult(
     value,
     minValue,
     maxValue,
-    isDateUnavailable
-  ), [value, minValue, maxValue, isDateUnavailable]);
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
 
   let validation = useFormValidationState({
     ...props,
@@ -182,14 +193,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
         return '';
       }
 
-      let formatOptions = getFormatOptions(fieldOptions, {
-        granularity,
-        timeZone: defaultTimeZone,
-        hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle,
-        showEra: value.calendar.identifier === 'gregory' && value.era === 'BC'
-      });
-
+      let formatOptions = getFormatOptions(fieldOptions, formatOpts);
       let formatter = new DateFormatter(locale, formatOptions);
       return formatter.format(dateValue);
     }
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index 6084595fb81..ae1bf52b1f5 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -100,7 +100,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   };
 
   let v = (value?.start || value?.end || props.placeholderValue);
-  let [granularity] = useDefaultProps(v, props.granularity);
+  let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
@@ -156,13 +156,24 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 
+  let showEra = (value?.start?.calendar.identifier === 'gregory' && value.start.era === 'BC') || (value?.end?.calendar.identifier === 'gregory' && value.end.era === 'BC');
+  let formatOpts = useMemo(() => ({
+    granularity,
+    timeZone: defaultTimeZone,
+    hideTimeZone: props.hideTimeZone,
+    hourCycle: props.hourCycle,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    showEra
+  }), [granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, props.hideTimeZone, showEra]);
+
   let {minValue, maxValue, isDateUnavailable} = props;
   let builtinValidation = useMemo(() => getRangeValidationResult(
     value,
     minValue,
     maxValue,
-    isDateUnavailable
-  ), [value, minValue, maxValue, isDateUnavailable]);
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
 
   let validation = useFormValidationState({
     ...props,
diff --git a/packages/@react-stately/datepicker/src/useTimeFieldState.ts b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
index 66c7eb672c3..410f765b8b6 100644
--- a/packages/@react-stately/datepicker/src/useTimeFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
@@ -13,8 +13,8 @@
 import {DateFieldState, useDateFieldState} from '.';
 import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
 import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date';
+import {useCallback, useMemo} from 'react';
 import {useControlledState} from '@react-stately/utils';
-import {useMemo} from 'react';
 
 export interface TimeFieldStateOptions<T extends TimeValue = TimeValue> extends TimePickerProps<T> {
   /** The locale to display and edit the value according to. */
@@ -36,7 +36,8 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     placeholderValue = new Time(),
     minValue,
     maxValue,
-    granularity
+    granularity,
+    validate
   } = props;
 
   let [value, setValue] = useControlledState<TimeValue>(
@@ -73,7 +74,8 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     maxGranularity: 'hour',
     placeholderValue: placeholderDate,
     // Calendar should not matter for time fields.
-    createCalendar: () => new GregorianCalendar()
+    createCalendar: () => new GregorianCalendar(),
+    validate: useCallback(() => validate?.(value as any), [validate, value])
   });
 
   return {
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index 674fd32edf6..c04f19c7855 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -32,7 +32,8 @@ export function getValidationResult(
   value: DateValue,
   minValue: DateValue,
   maxValue: DateValue,
-  isDateUnavailable: (v: DateValue) => boolean
+  isDateUnavailable: (v: DateValue) => boolean,
+  options: FormatterOptions
 ): ValidationResult {
   let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;
   let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;
@@ -43,7 +44,7 @@ export function getValidationResult(
   if (isInvalid) {
     let locale = getLocale();
     let formatter = new LocalizedStringFormatter(locale, dictionary);
-    let dateFormatter = new DateFormatter(locale, {timeZone: 'timeZone' in value ? value.timeZone : undefined});
+    let dateFormatter = new DateFormatter(locale, getFormatOptions({}, options));
     let timeZone = dateFormatter.resolvedOptions().timeZone;
 
     if (rangeUnderflow) {
@@ -82,20 +83,23 @@ export function getRangeValidationResult(
   value: RangeValue<DateValue>,
   minValue: DateValue,
   maxValue: DateValue,
-  isDateUnavailable: (v: DateValue) => boolean
+  isDateUnavailable: (v: DateValue) => boolean,
+  options: FormatterOptions
 ) {
   let startValidation = getValidationResult(
     value?.start,
     minValue,
     maxValue,
-    isDateUnavailable
+    isDateUnavailable,
+    options
   );
 
   let endValidation = getValidationResult(
     value?.end,
     minValue,
     maxValue,
-    isDateUnavailable
+    isDateUnavailable,
+    options
   );
 
   let result = mergeValidation(startValidation, endValidation);

From cd7a76a729dc70fc14148b5c2dbf8fabd4cc49c3 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 20 Oct 2023 20:02:55 -0700
Subject: [PATCH 13/38] refactor

---
 .../checkbox/src/useCheckboxGroup.ts          |  2 +-
 .../checkbox/src/useCheckboxGroupItem.ts      | 41 ++++++++++----
 .../datepicker/src/useDateRangePicker.ts      | 10 ++--
 .../@react-aria/form/src/useFormValidation.ts | 21 ++++----
 .../textfield/test/useTextField.test.js       |  6 +--
 .../checkbox/test/Checkbox.test.js            |  2 +-
 .../color/test/ColorField.test.js             | 26 ++-------
 .../form/stories/Form.stories.tsx             |  2 +-
 .../checkbox/src/useCheckboxGroupState.ts     | 53 ++++++-------------
 packages/@react-stately/form/src/index.ts     |  2 +-
 .../form/src/useFormValidationState.ts        | 48 +++++++++--------
 packages/dev/test-utils/src/index.ts          |  1 -
 packages/dev/test-utils/src/validation.ts     | 45 ----------------
 13 files changed, 96 insertions(+), 163 deletions(-)
 delete mode 100644 packages/dev/test-utils/src/validation.ts

diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
index e3e7d8c3be9..bcf4c182ae9 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
@@ -35,7 +35,7 @@ export interface CheckboxGroupAria extends ValidationResult {
  * @param state - State for the checkbox group, as returned by `useCheckboxGroupState`.
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {
-  let {isDisabled, name, validationBehavior} = props;
+  let {isDisabled, name, validationBehavior = 'aria'} = props;
   let {isInvalid, errors, validationDetails} = state.displayValidation;
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
index 48a14466875..c710da10d3c 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
@@ -14,8 +14,8 @@ import {AriaCheckboxGroupItemProps} from '@react-types/checkbox';
 import {CheckboxAria, useCheckbox} from './useCheckbox';
 import {checkboxGroupData} from './utils';
 import {CheckboxGroupState} from '@react-stately/checkbox';
-import {privateValidationStateProp, useFormValidationState} from '@react-stately/form';
-import {RefObject} from 'react';
+import {DEFAULT_VALIDATION_RESULT, privateValidationStateProp, useFormValidationState} from '@react-stately/form';
+import {RefObject, useEffect, useRef} from 'react';
 import {useToggleState} from '@react-stately/toggle';
 
 /**
@@ -43,26 +43,45 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
   });
 
   let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
+  validationBehavior = props.validationBehavior ?? validationBehavior;
 
-  let validationState = useFormValidationState({
+  // Local validation for this checkbox.
+  let {realtimeValidation} = useFormValidationState({
     ...props,
     value: toggleState.isSelected,
-    builtinValidation: state.realtimeValidation,
-    name: props.name || name,
-    validationBehavior: props.validationBehavior ?? validationBehavior,
-    onValidationChange(e) {
-      state.setInvalid(props.value, e);
-    }
+    name: undefined,
+    validationBehavior: 'aria'
   });
 
+  // Update the checkbox group state when realtime validation changes.
+  let nativeValidation = useRef(DEFAULT_VALIDATION_RESULT);
+  let updateValidation = () => {
+    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+  };
+
+  useEffect(updateValidation);
+
+  // Combine group and checkbox level validation.
+  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+  let displayValidation = validationBehavior === 'native' ? state.displayValidation : combinedRealtimeValidation;
+
   let res = useCheckbox({
     ...props,
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isDisabled: props.isDisabled || state.isDisabled,
     name: props.name || name,
     isRequired: props.isRequired ?? state.isRequired,
-    validationBehavior: props.validationBehavior ?? validationBehavior,
-    [privateValidationStateProp]: validationState
+    validationBehavior,
+    [privateValidationStateProp]: {
+      realtimeValidation: combinedRealtimeValidation,
+      displayValidation,
+      resetValidation: state.resetValidation,
+      commitValidation: state.commitValidation,
+      updateValidation(v) {
+        nativeValidation.current = v;
+        updateValidation();
+      }
+    }
   }, toggleState, inputRef);
 
   return {
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index cdac99f1895..5bf168f8c24 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -187,9 +187,8 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
           startFieldValidation.current = e;
           state.updateValidation(mergeValidation(e, endFieldValidation.current));
         },
-        commitValidation() {
-          state.commitValidation();
-        }
+        resetValidation: state.resetValidation,
+        commitValidation: state.commitValidation
       }
     },
     endFieldProps: {
@@ -205,9 +204,8 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
           endFieldValidation.current = e;
           state.updateValidation(mergeValidation(startFieldValidation.current, e));
         },
-        commitValidation() {
-          state.commitValidation();
-        }
+        resetValidation: state.resetValidation,
+        commitValidation: state.commitValidation
       }
     },
     descriptionProps,
diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index 7db1f2ca6b1..1a0613c0ead 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {FormValidationState, VALID_VALIDITY_STATE} from '@react-stately/form';
+import {FormValidationState} from '@react-stately/form';
 import {RefObject, useEffect} from 'react';
 import {useEffectEvent} from '@react-aria/utils';
 import {Validation, ValidationResult} from '@react-types/shared';
@@ -38,8 +38,7 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
   });
 
   let onReset = useEffectEvent(() => {
-    state.updateValidation(DEFAULT_VALIDITY);
-    state.commitValidation();
+    state.resetValidation();
   });
 
   let commitValidation = useEffectEvent(() => {
@@ -47,7 +46,11 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
   });
 
   useEffect(() => {
-    let input = ref.current!;
+    let input = ref.current;
+    if (!input || validationBehavior !== 'native') {
+      return;
+    }
+
     let form = input.form;
     let onInvalid = (e: Event) => {
       e.preventDefault();
@@ -59,22 +62,16 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
     };
 
     input.addEventListener('invalid', onInvalid);
-    form?.addEventListener('change', onChange);
+    input.addEventListener('change', onChange);
     form?.addEventListener('reset', onReset);
     return () => {
       input.removeEventListener('invalid', onInvalid);
-      form?.removeEventListener('change', onChange);
+      input.removeEventListener('change', onChange);
       form?.removeEventListener('reset', onReset);
     };
   }, [ref, commitValidation, onReset, validationBehavior]);
 }
 
-const DEFAULT_VALIDITY: ValidationResult = {
-  isInvalid: false,
-  validationDetails: VALID_VALIDITY_STATE,
-  errors: []
-};
-
 function getValidity(input: ValidatableElement) {
   // The native ValidityState object is live, meaning each property is a getter that returns the current state.
   // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
diff --git a/packages/@react-aria/textfield/test/useTextField.test.js b/packages/@react-aria/textfield/test/useTextField.test.js
index ab968619343..0430ca24c24 100644
--- a/packages/@react-aria/textfield/test/useTextField.test.js
+++ b/packages/@react-aria/textfield/test/useTextField.test.js
@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, renderHook} from '@react-spectrum/test-utils';
 import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils';
 import {useTextField} from '../';
 
 describe('useTextField hook', () => {
   let renderTextFieldHook = (props) => {
-    let {result} = renderHook(() => useTextField(props));
+    let {result} = renderHook(() => useTextField(props, React.createRef()));
     return result.current.inputProps;
   };
 
@@ -81,7 +81,7 @@ describe('useTextField hook', () => {
         }
       };
 
-      props.onChange(mockEvent);
+      act(() => props.onChange(mockEvent));
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(mockEvent.target.value);
       onChange.mockClear();
diff --git a/packages/@react-spectrum/checkbox/test/Checkbox.test.js b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
index cb16701b163..190b1fd0cae 100644
--- a/packages/@react-spectrum/checkbox/test/Checkbox.test.js
+++ b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
@@ -13,8 +13,8 @@
 import {act} from 'react-dom/test-utils';
 import {Button} from '@react-spectrum/button';
 import {Checkbox} from '../';
-import {createValidationResult, pointerMap, render} from '@react-spectrum/test-utils';
 import {Form} from '@react-spectrum/form';
+import {pointerMap, render} from '@react-spectrum/test-utils';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
diff --git a/packages/@react-spectrum/color/test/ColorField.test.js b/packages/@react-spectrum/color/test/ColorField.test.js
index 47964f3797a..4db5b3e4edf 100644
--- a/packages/@react-spectrum/color/test/ColorField.test.js
+++ b/packages/@react-spectrum/color/test/ColorField.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, createValidationResult, fireEvent, pointerMap, render} from '@react-spectrum/test-utils';
+import {act, fireEvent, pointerMap, render} from '@react-spectrum/test-utils';
 import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
 import {ColorField} from '../';
@@ -377,11 +377,10 @@ describe('ColorField', function () {
   describe('validation', () => {
     describe('validationBehavior=native', () => {
       it('supports isRequired', async () => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <ColorField data-testid="input" label="Color" isRequired validationBehavior="native" onValidationChange={onValidationChange} />
+              <ColorField data-testid="input" label="Color" isRequired validationBehavior="native"  />
             </Form>
           </Provider>
         );
@@ -391,11 +390,8 @@ describe('ColorField', function () {
         expect(input).not.toHaveAttribute('aria-required');
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Constraints not satisfied'], 'valueMissing'));
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -409,16 +405,13 @@ describe('ColorField', function () {
         await user.tab();
 
         expect(input).not.toHaveAttribute('aria-describedby');
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <ColorField data-testid="input" label="Color" defaultValue="#000" step={2} validationBehavior="native" validate={v => v.red === 0 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              <ColorField data-testid="input" label="Color" defaultValue="#000" step={2} validationBehavior="native" validate={v => v.red === 0 ? 'Invalid value' : null} />
             </Form>
           </Provider>
         );
@@ -426,11 +419,8 @@ describe('ColorField', function () {
         let input = getByTestId('input');
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
-        expect(onValidationChange).not.toHaveBeenCalled();
 
         act(() => getByTestId('form').checkValidity());
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -445,8 +435,6 @@ describe('ColorField', function () {
 
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(true);
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
@@ -508,11 +496,10 @@ describe('ColorField', function () {
 
     describe('validationBehavior=aria', () => {
       it('supports validate function', async () => {
-        let onValidationChange = jest.fn();
         let {getByTestId} = render(
           <Provider theme={theme}>
             <Form data-testid="form">
-              <ColorField data-testid="input" label="Color" defaultValue="#000" validate={v => v.red === 0 ? 'Invalid value' : null} onValidationChange={onValidationChange} />
+              <ColorField data-testid="input" label="Color" defaultValue="#000" validate={v => v.red === 0 ? 'Invalid value' : null} />
             </Form>
           </Provider>
         );
@@ -521,8 +508,6 @@ describe('ColorField', function () {
         expect(input).toHaveAttribute('aria-describedby');
         expect(input).toHaveAttribute('aria-invalid', 'true');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
-        expect(onValidationChange).toHaveBeenCalledTimes(1);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult(['Invalid value']));
         expect(input.validity.valid).toBe(true);
 
         await user.tab();
@@ -530,9 +515,6 @@ describe('ColorField', function () {
         await user.tab();
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input).not.toHaveAttribute('aria-invalid');
-
-        expect(onValidationChange).toHaveBeenCalledTimes(2);
-        expect(onValidationChange).toHaveBeenLastCalledWith(createValidationResult([]));
       });
 
       it('supports server validation', async () => {
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 2bffbe686ae..b0c0ecf58e3 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -401,7 +401,7 @@ WithTranslations.story = {
 function render(props: any = {}) {
   return (
     <Form {...props}>
-      <CheckboxGroup defaultValue={['dragons']} label="Pets" validate={v => v.includes('dogs') ? 'No dogs' : null}>
+      <CheckboxGroup label="Pets" validate={v => v.includes('dogs') ? 'No dogs' : null}>
         <Checkbox value="dogs">Dogs</Checkbox>
         <Checkbox value="cats">Cats</Checkbox>
         <Checkbox value="dragons">Dragons</Checkbox>
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index d3d22360a3b..0f89bf720c8 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -11,12 +11,12 @@
  */
 
 import {CheckboxGroupProps} from '@react-types/checkbox';
-import {mergeValidation, useFormValidationState} from '@react-stately/form';
+import {FormValidationState, mergeValidation, useFormValidationState} from '@react-stately/form';
 import {useControlledState} from '@react-stately/utils';
-import {useMemo, useState} from 'react';
+import {useRef} from 'react';
 import {ValidationResult, ValidationState} from '@react-types/shared';
 
-export interface CheckboxGroupState {
+export interface CheckboxGroupState extends FormValidationState<string[]> {
   /** Current selected values. */
   readonly value: readonly string[],
 
@@ -35,9 +35,6 @@ export interface CheckboxGroupState {
   /** Whether the checkbox group is invalid. */
   readonly isInvalid: boolean,
 
-  realtimeValidation: ValidationResult,
-  displayValidation: ValidationResult,
-
   /**
    * Whether the checkboxes in the group are required.
    * This changes to false once at least one item is selected.
@@ -69,31 +66,18 @@ export interface CheckboxGroupState {
  */
 export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxGroupState {
   let [selectedValues, setValue] = useControlledState(props.value, props.defaultValue || [], props.onChange);
-  let [invalidValues, setInvalidValues] = useState(new Map<string, ValidationResult>());
   let isRequired = props.isRequired && selectedValues.length === 0;
 
-  // Keep realtime validation separate so we isolate group level validation from checkbox level validation.
-  // This handles the isInvalid and validate props.
-  let {realtimeValidation} = useFormValidationState({
-    isInvalid: props.isInvalid,
-    validationState: props.validationState,
-    validate: props.validate,
-    value: selectedValues
-  });
-
-  // Aggregate errors from all invalid checkboxes.
-  let aggregatedValidation = useMemo(() => mergeValidation(...invalidValues.values()), [invalidValues]);
-  let isInvalid = props.isInvalid || props.validationState === 'invalid' || aggregatedValidation.isInvalid;
-
-  // Get display validation for the group. This handles the aggregated errors from each checkbox,
-  // along with server errors, and reports validation changes to the user.
+  let invalidValues = useRef(new Map<string, ValidationResult>());
   let validation = useFormValidationState({
+    ...props,
     value: selectedValues,
-    builtinValidation: aggregatedValidation,
     name: props.name
   });
 
+  let isInvalid = validation.displayValidation.isInvalid;
   const state: CheckboxGroupState = {
+    ...validation,
     value: selectedValues,
     setValue(value) {
       if (props.isReadOnly || props.isDisabled) {
@@ -139,22 +123,19 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
       setValue(newValue);
       validation.commitValidation(newValue);
     },
-    setInvalid(value, validation) {
-      setInvalidValues(invalidValues => {
-        let s = new Map(invalidValues);
-        if (validation.isInvalid) {
-          s.set(value, validation);
-        } else {
-          s.delete(value);
-        }
-
-        return s;
-      });
+    setInvalid(value, v) {
+      let s = new Map(invalidValues.current);
+      if (v.isInvalid) {
+        s.set(value, v);
+      } else {
+        s.delete(value);
+      }
+
+      invalidValues.current = s;
+      validation.updateValidation(mergeValidation(...s.values()));
     },
     validationState: props.validationState ?? (isInvalid ? 'invalid' : null),
     isInvalid,
-    realtimeValidation,
-    displayValidation: validation.displayValidation,
     isRequired
   };
 
diff --git a/packages/@react-stately/form/src/index.ts b/packages/@react-stately/form/src/index.ts
index 68acd09f026..7f7fcc20bd8 100644
--- a/packages/@react-stately/form/src/index.ts
+++ b/packages/@react-stately/form/src/index.ts
@@ -10,5 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
-export {FormValidationContext, useFormValidationState, VALID_VALIDITY_STATE, privateValidationStateProp, mergeValidation} from './useFormValidationState';
+export {FormValidationContext, useFormValidationState, DEFAULT_VALIDATION_RESULT, VALID_VALIDITY_STATE, privateValidationStateProp, mergeValidation} from './useFormValidationState';
 export type {FormValidationState} from './useFormValidationState';
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index 837140fb5ae..7c8e7beee86 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {createContext, useContext, useMemo, useRef, useState} from 'react';
 import {Validation, ValidationErrors, ValidationFunction, ValidationResult} from '@react-types/shared';
 
 export const VALID_VALIDITY_STATE: ValidityState = {
@@ -33,7 +33,7 @@ const CUSTOM_VALIDITY_STATE: ValidityState = {
   valid: false
 };
 
-const DEFAULT_VALIDITY: ValidationResult = {
+export const DEFAULT_VALIDATION_RESULT: ValidationResult = {
   isInvalid: false,
   validationDetails: VALID_VALIDITY_STATE,
   errors: []
@@ -46,21 +46,22 @@ export const privateValidationStateProp = '__formValidationState' + Date.now();
 interface FormValidationProps<T> extends Validation<T> {
   builtinValidation?: ValidationResult,
   name?: string,
-  value: T,
-  onValidationChange?: (e: ValidationResult) => void
+  value: T
 }
 
 export interface FormValidationState<T> {
   realtimeValidation: ValidationResult,
   displayValidation: ValidationResult,
   updateValidation(result: ValidationResult): void,
+  resetValidation(): void,
   commitValidation(nextValue?: T): void
 }
 
 export function useFormValidationState<T>(props: FormValidationProps<T>): FormValidationState<T> {
+  // Private prop for parent components to pass state to children.
   if (props[privateValidationStateProp]) {
-    let {realtimeValidation, displayValidation, updateValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState<T>;
-    return {realtimeValidation, displayValidation, updateValidation, commitValidation};
+    let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState<T>;
+    return {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation};
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -68,7 +69,7 @@ export function useFormValidationState<T>(props: FormValidationProps<T>): FormVa
 }
 
 function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValidationState<T> {
-  let {isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = 'aria', onValidationChange} = props;
+  let {isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = 'aria'} = props;
 
   // backward compatibility.
   if (validationState) {
@@ -108,14 +109,10 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
 
   let serverError: ValidationResult | null = useMemo(() => getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
 
-  let nativeValidity = useRef(DEFAULT_VALIDITY);
-  let [currentValidity, setCurrentValidity] = useState(DEFAULT_VALIDITY);
-  let lastError = useRef(DEFAULT_VALIDITY);
+  let nativeValidity = useRef(DEFAULT_VALIDATION_RESULT);
+  let [currentValidity, setCurrentValidity] = useState(DEFAULT_VALIDATION_RESULT);
+  let lastError = useRef(DEFAULT_VALIDATION_RESULT);
   let commitValidation = (value?: T) => {
-    if (controlledError) {
-      return;
-    }
-
     let nextClientError = clientError;
     if (value !== undefined) {
       nextClientError = getValidationResult(runValidate(validate, value));
@@ -125,26 +122,31 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
     if (!isEqualValidation(error, lastError.current)) {
       lastError.current = error;
       setCurrentValidity(error);
-      onValidationChange?.(error);
     }
   };
 
-  useEffect(() => {
-    if (validationBehavior === 'aria' && onValidationChange) {
-      commitValidation();
-    }
-  });
-
-  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || DEFAULT_VALIDITY;
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || DEFAULT_VALIDATION_RESULT;
   let displayValidation = validationBehavior === 'native'
     ? controlledError || serverError || currentValidity
-    : realtimeValidation;
+    : controlledError || serverError || clientError || builtinValidation || currentValidity;
 
   return {
     realtimeValidation,
     displayValidation,
     updateValidation(value) {
       nativeValidity.current = value;
+      if (validationBehavior === 'aria') {
+        commitValidation();
+      }
+    },
+    resetValidation() {
+      let error = DEFAULT_VALIDATION_RESULT;
+      if (!isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+
+      setServerErrorCleared(true);
     },
     commitValidation(value) {
       commitValidation(value);
diff --git a/packages/dev/test-utils/src/index.ts b/packages/dev/test-utils/src/index.ts
index e6fe237ceb3..19010e66919 100644
--- a/packages/dev/test-utils/src/index.ts
+++ b/packages/dev/test-utils/src/index.ts
@@ -18,4 +18,3 @@ export * from './renderOverride';
 export * from './StrictModeWrapper';
 export * from './mockImplementation';
 export * from './userEventMaps';
-export * from './validation';
diff --git a/packages/dev/test-utils/src/validation.ts b/packages/dev/test-utils/src/validation.ts
deleted file mode 100644
index 1b43a449155..00000000000
--- a/packages/dev/test-utils/src/validation.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ValidationResult} from '@react-types/shared';
-
-export function createValidationResult(errors: string[], ...types: string[]): ValidationResult {
-  let validationDetails = {
-    badInput: false,
-    customError: false,
-    patternMismatch: false,
-    rangeOverflow: false,
-    rangeUnderflow: false,
-    stepMismatch: false,
-    tooLong: false,
-    tooShort: false,
-    typeMismatch: false,
-    valueMissing: false,
-    valid: errors.length === 0
-  };
-
-  if (!validationDetails.valid) {
-    if (types.length === 0) {
-      types = ['customError'];
-    }
-
-    for (let type of types) {
-      validationDetails[type] = true;
-    }
-  }
-
-  return {
-    isInvalid: errors.length > 0,
-    errors,
-    validationDetails
-  };
-}

From aa1492bb271d3169d7636413db59b22e4171d21c Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 20 Oct 2023 22:39:07 -0700
Subject: [PATCH 14/38] ComboBox

---
 packages/@react-aria/combobox/package.json    |   2 +
 .../@react-aria/combobox/src/useComboBox.ts   |  15 +-
 .../@react-aria/form/src/useFormValidation.ts |   4 +-
 .../@react-spectrum/combobox/package.json     |   2 +
 .../@react-spectrum/combobox/src/ComboBox.tsx |  10 +-
 .../combobox/src/MobileComboBox.tsx           |  35 +-
 .../combobox/test/ComboBox.test.js            | 424 ++++++++++++++++++
 packages/@react-stately/combobox/package.json |   1 +
 .../combobox/src/useComboBoxState.ts          |  18 +-
 packages/@react-types/combobox/src/index.d.ts |  12 +-
 10 files changed, 504 insertions(+), 19 deletions(-)

diff --git a/packages/@react-aria/combobox/package.json b/packages/@react-aria/combobox/package.json
index 76285d82e71..6f0145c3cd1 100644
--- a/packages/@react-aria/combobox/package.json
+++ b/packages/@react-aria/combobox/package.json
@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.4",
     "@react-aria/interactions": "^3.19.1",
     "@react-aria/listbox": "^3.11.1",
@@ -33,6 +34,7 @@
     "@react-aria/utils": "^3.21.1",
     "@react-stately/collections": "^3.10.2",
     "@react-stately/combobox": "^3.7.1",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/layout": "^3.13.3",
     "@react-types/button": "^3.9.0",
     "@react-types/combobox": "^3.8.1",
diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
index 5b0aa73fc74..76609ded5cf 100644
--- a/packages/@react-aria/combobox/src/useComboBox.ts
+++ b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -15,7 +15,7 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaComboBoxProps} from '@react-types/combobox';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';
-import {BaseEvent, DOMAttributes, KeyboardDelegate, PressEvent} from '@react-types/shared';
+import {BaseEvent, DOMAttributes, KeyboardDelegate, PressEvent, ValidationResult} from '@react-types/shared';
 import {chain, isAppleDevice, mergeProps, useLabels, useRouter} from '@react-aria/utils';
 import {ComboBoxState} from '@react-stately/combobox';
 import {FocusEvent, InputHTMLAttributes, KeyboardEvent, RefObject, TouchEvent, useEffect, useMemo, useRef} from 'react';
@@ -23,6 +23,7 @@ import {getChildNodes, getItemCount} from '@react-stately/collections';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';
+import {privateValidationStateProp} from '@react-stately/form';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useMenuTrigger} from '@react-aria/menu';
 import {useTextField} from '@react-aria/textfield';
@@ -40,7 +41,7 @@ export interface AriaComboBoxOptions<T> extends Omit<AriaComboBoxProps<T>, 'chil
   keyboardDelegate?: KeyboardDelegate
 }
 
-export interface ComboBoxAria<T> {
+export interface ComboBoxAria<T> extends ValidationResult {
   /** Props for the label element. */
   labelProps: DOMAttributes,
   /** Props for the combo box input element. */
@@ -180,6 +181,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     state.setFocused(true);
   };
 
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
     ...props,
     onChange: state.setInputValue,
@@ -187,7 +189,9 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     onBlur,
     value: state.inputValue,
     onFocus,
-    autoComplete: 'off'
+    autoComplete: 'off',
+    validate: undefined,
+    [privateValidationStateProp]: state
   }, inputRef);
 
   // Press handlers for the ComboBox button
@@ -348,6 +352,9 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
       linkBehavior: 'selection' as const
     }),
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index 1a0613c0ead..c71c1e76d9c 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -21,9 +21,9 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
   let {validationBehavior} = props;
 
   useEffect(() => {
-    if (validationBehavior === 'native') {
+    if (validationBehavior === 'native' && ref.current) {
       let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.errors.join(' ') || 'Invalid value.' : '';
-      ref.current?.setCustomValidity(errorMessage);
+      ref.current.setCustomValidity(errorMessage);
 
       // Prevent default tooltip for validation message.
       // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
diff --git a/packages/@react-spectrum/combobox/package.json b/packages/@react-spectrum/combobox/package.json
index 339ba4bedf6..2fdccefb1da 100644
--- a/packages/@react-spectrum/combobox/package.json
+++ b/packages/@react-spectrum/combobox/package.json
@@ -40,12 +40,14 @@
     "@react-aria/combobox": "^3.7.1",
     "@react-aria/dialog": "^3.5.7",
     "@react-aria/focus": "^3.14.3",
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.4",
     "@react-aria/interactions": "^3.19.1",
     "@react-aria/label": "^3.7.2",
     "@react-aria/overlays": "^3.18.1",
     "@react-aria/utils": "^3.21.1",
     "@react-spectrum/button": "^3.14.1",
+    "@react-spectrum/form": "^3.6.7",
     "@react-spectrum/label": "^3.15.1",
     "@react-spectrum/listbox": "^3.12.1",
     "@react-spectrum/overlays": "^5.5.1",
diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx
index fed13a60bdc..3ee65818b18 100644
--- a/packages/@react-spectrum/combobox/src/ComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx
@@ -47,11 +47,13 @@ import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.
 import {useComboBox} from '@react-aria/combobox';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useFormProps} from '@react-spectrum/form';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
 
   if (props.placeholder) {
     console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
@@ -102,7 +104,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
   );
   let layout = useListBoxLayout(state, loadingState === 'loadingMore');
 
-  let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps} = useComboBox(
+  let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useComboBox(
     {
       ...props,
       keyboardDelegate: layout,
@@ -146,6 +148,9 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
         {...props}
         descriptionProps={descriptionProps}
         errorMessageProps={errorMessageProps}
+        isInvalid={isInvalid}
+        errors={errors}
+        validationDetails={validationDetails}
         labelProps={labelProps}
         ref={domRef}>
         <ComboBoxInput
@@ -155,7 +160,8 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
           inputProps={inputProps}
           inputRef={inputRef}
           triggerProps={buttonProps}
-          triggerRef={buttonRef} />
+          triggerRef={buttonRef}
+          validationState={props.validationState || (isInvalid ? 'invalid' : null)} />
       </Field>
       {name && formValue === 'key' && <input type="hidden" name={name} value={state.selectedKey} />}
       <Popover
diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
index d82e09ee96b..5f33d7bf9fb 100644
--- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
@@ -42,6 +42,7 @@ import {useComboBox} from '@react-aria/combobox';
 import {useDialog} from '@react-aria/dialog';
 import {useField} from '@react-aria/label';
 import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useFormValidation} from '@react-aria/form';
 import {useProviderProps} from '@react-spectrum/provider';
 
 export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {
@@ -50,8 +51,9 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
   let {
     isQuiet,
     isDisabled,
-    validationState,
     isReadOnly,
+    isRequired,
+    validationBehavior,
     name,
     formValue = 'text',
     allowsCustomValue
@@ -75,9 +77,17 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
   let domRef = useFocusableRef(ref, buttonRef);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
-  let {labelProps, fieldProps} = useField({
+  let inputRef = useRef<HTMLInputElement>(null);
+  useFormValidation(props, state, inputRef);
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let validationState = props.validationState || (isInvalid ? 'invalid' : null);
+  let errorMessage = props.errorMessage ?? errors.join(' ');
+
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage
   });
 
   // Focus the button and show focus ring when clicking on the label
@@ -94,7 +104,16 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
     value: formValue === 'text' ? state.inputValue : state.selectedKey
   };
 
-  let inputRef = useRef<HTMLInputElement>(null);
+  if (validationBehavior === 'native') {
+    // Use a hidden <input type="text"> rather than <input type="hidden">
+    // so that an empty value blocks HTML form submission when the field is required.
+    inputProps.type = 'text';
+    inputProps.hidden = true;
+    inputProps.required = isRequired;
+    // Ignore react warning.
+    inputProps.onChange = () => {};
+  }
+
   useFormReset(inputRef, inputProps.value, formValue === 'text' ? state.setInputValue : state.setSelectedKey);
 
   return (
@@ -102,6 +121,12 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
       <Field
         {...props}
         labelProps={labelProps}
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+        validationState={validationState}
+        isInvalid={isInvalid}
+        errors={errors}
+        validationDetails={validationDetails}
         elementType="span"
         ref={domRef}
         includeNecessityIndicatorInAccessibilityName>
@@ -116,7 +141,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
           {state.inputValue || props.placeholder || ''}
         </ComboBoxButton>
       </Field>
-      {name && <input {...inputProps} ref={inputRef} />}
+      <input {...inputProps} ref={inputRef} />
       <Tray state={state} isFixedHeight {...overlayProps}>
         <ComboBoxTray
           {...props}
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index 8e20f73a541..462c56d274a 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -16,6 +16,7 @@ import {announce} from '@react-aria/live-announcer';
 import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
 import {ComboBox, Item, Section} from '../';
+import {Form} from '@react-spectrum/form';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium-unique.css';
@@ -5362,6 +5363,223 @@ describe('ComboBox', function () {
         expect(hiddenInput).toHaveAttribute('name', 'test');
         expect(hiddenInput).toHaveValue('2');
       });
+
+      describe('validation', () => {
+        describe('validationBehavior=native', () => {
+          it('supports isRequired', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox data-testid="input" isRequired validationBehavior="native"  />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('required');
+            expect(input).not.toHaveAttribute('aria-required');
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(false);
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+            await user.tab();
+            await user.keyboard('[ArrowRight]Tw');
+
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).toHaveAttribute('aria-describedby');
+
+            await user.tab();
+            expect(input).not.toHaveAttribute('aria-describedby');
+          });
+
+          it('supports validate function', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox data-testid="input" defaultSelectedKey="2" validationBehavior="native" validate={v => v.selectedKey === '2' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(false);
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.click(getByRole('button'));
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).toHaveAttribute('aria-describedby');
+
+            await user.tab();
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports server validation', async () => {
+            function Test() {
+              let [serverErrors, setServerErrors] = React.useState({});
+              let onSubmit = e => {
+                e.preventDefault();
+                setServerErrors({
+                  value: 'Invalid value.'
+                });
+              };
+
+              return (
+                <Provider theme={theme}>
+                  <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                    <ExampleComboBox data-testid="input" name="value" validationBehavior="native" />
+                    <Button type="submit" data-testid="submit">Submit</Button>
+                  </Form>
+                </Provider>
+              );
+            }
+
+            let {getByTestId, getByRole} = render(<Test />);
+
+            let input = getByTestId('input');
+            expect(input).not.toHaveAttribute('aria-describedby');
+
+            await user.click(getByTestId('submit'));
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value.');
+            expect(input.validity.valid).toBe(false);
+
+            await user.tab({shift: true});
+            await user.keyboard('[ArrowRight]Tw');
+
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).toHaveAttribute('aria-describedby');
+            await user.tab();
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports customizing native error messages', async () => {
+            let {getByTestId} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox data-testid="input" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+          });
+        });
+
+        describe('validationBehavior=aria', () => {
+          it('supports validate function', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox data-testid="input" defaultSelectedKey="2" validate={v => v.selectedKey === '2' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+            expect(input.validity.valid).toBe(true);
+
+            await user.click(getByRole('button'));
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input).not.toHaveAttribute('aria-invalid');
+          });
+
+          it('supports server validation', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form validationErrors={{value: 'Invalid value'}}>
+                  <ExampleComboBox data-testid="input" name="value" />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.tab();
+            await user.keyboard('[ArrowRight]Tw');
+
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            await user.tab();
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input).not.toHaveAttribute('aria-invalid');
+          });
+        });
+      });
     });
 
     describe('mobile', () => {
@@ -5419,6 +5637,212 @@ describe('ComboBox', function () {
         rerender(<ExampleComboBox name="test" formValue="key" selectedKey="2" />);
         expect(input).toHaveValue('2');
       });
+
+      describe('validation', () => {
+        describe('validationBehavior=native', () => {
+          it('supports isRequired', async () => {
+            let {getByTestId, getByRole, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox name="test" isRequired validationBehavior="native"  />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=test]');
+            expect(input).toHaveAttribute('required');
+            expect(input).not.toHaveAttribute('aria-required');
+            expect(input.validity.valid).toBe(false);
+
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+          });
+
+          it('supports validate function', async () => {
+            let {getByTestId, getByRole, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox name="test" defaultSelectedKey="2" validationBehavior="native" validate={v => v.selectedKey === '2' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=test]');
+            expect(input.validity.valid).toBe(false);
+
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports server validation', async () => {
+            function Test() {
+              let [serverErrors, setServerErrors] = React.useState({});
+              let onSubmit = e => {
+                e.preventDefault();
+                setServerErrors({
+                  value: 'Invalid value.'
+                });
+              };
+
+              return (
+                <Provider theme={theme}>
+                  <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                    <ExampleComboBox name="value" validationBehavior="native" />
+                    <Button type="submit" data-testid="submit">Submit</Button>
+                  </Form>
+                </Provider>
+              );
+            }
+
+            let {getByTestId, getByRole, getAllByRole} = render(<Test />);
+
+            let input = document.querySelector('input[name=value]');
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            await user.click(getByTestId('submit'));
+
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value.');
+            expect(input.validity.valid).toBe(false);
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports customizing native error messages', async () => {
+            let {getByTestId, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox name="test" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+          });
+        });
+
+        describe('validationBehavior=aria', () => {
+          it('supports validate function', async () => {
+            let {getAllByRole, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox name="test" defaultSelectedKey="2" validate={v => v.selectedKey === '2' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=test]');
+            expect(input.validity.valid).toBe(true);
+
+            let button = getAllByRole('button')[0];
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports server validation', async () => {
+            let {getByRole, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form validationErrors={{value: 'Invalid value'}}>
+                  <ExampleComboBox name="value" />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=value]');
+            let button = getAllByRole('button')[0];
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+        });
+      });
     });
   });
 
diff --git a/packages/@react-stately/combobox/package.json b/packages/@react-stately/combobox/package.json
index f68ea9deae1..665df5ca345 100644
--- a/packages/@react-stately/combobox/package.json
+++ b/packages/@react-stately/combobox/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@react-stately/collections": "^3.10.2",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/list": "^3.10.0",
     "@react-stately/menu": "^3.5.6",
     "@react-stately/select": "^3.5.5",
diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts
index 9e418c6e3b5..91405020afa 100644
--- a/packages/@react-stately/combobox/src/useComboBoxState.ts
+++ b/packages/@react-stately/combobox/src/useComboBoxState.ts
@@ -11,7 +11,8 @@
  */
 
 import {Collection, CollectionStateBase, FocusStrategy, Node} from '@react-types/shared';
-import {ComboBoxProps, MenuTriggerAction} from '@react-types/combobox';
+import {ComboBoxProps, ComboBoxValidationValue, MenuTriggerAction} from '@react-types/combobox';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getChildNodes} from '@react-stately/collections';
 import {ListCollection, useSingleSelectListState} from '@react-stately/list';
 import {SelectState} from '@react-stately/select';
@@ -19,7 +20,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useControlledState} from '@react-stately/utils';
 import {useMenuTriggerState} from '@react-stately/menu';
 
-export interface ComboBoxState<T> extends SelectState<T> {
+export interface ComboBoxState<T> extends SelectState<T>, FormValidationState<ComboBoxValidationValue> {
   /** The current value of the combo box input. */
   inputValue: string,
   /** Sets the value of the combo box input. */
@@ -247,6 +248,11 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     lastSelectedKeyText.current = selectedItemText;
   });
 
+  let validation = useFormValidationState({
+    ...props,
+    value: useMemo(() => ({inputValue, selectedKey}), [inputValue, selectedKey])
+  });
+
   // Revert input value and close menu
   let revert = () => {
     if (allowsCustomValue && selectedKey == null) {
@@ -307,8 +313,11 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
       if (menuTrigger === 'focus') {
         open(null, 'focus');
       }
-    } else if (shouldCloseOnBlur) {
-      commitValue();
+    } else {
+      if (shouldCloseOnBlur) {
+        commitValue();
+      }
+      validation.commitValidation();
     }
 
     setFocusedState(isFocused);
@@ -327,6 +336,7 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
   }, [triggerState.isOpen, originalCollection, filteredCollection, showAllItems, lastCollection]);
 
   return {
+    ...validation,
     ...triggerState,
     toggle,
     open,
diff --git a/packages/@react-types/combobox/src/index.d.ts b/packages/@react-types/combobox/src/index.d.ts
index aa2a240c500..82442b88b6d 100644
--- a/packages/@react-types/combobox/src/index.d.ts
+++ b/packages/@react-types/combobox/src/index.d.ts
@@ -11,10 +11,18 @@
  */
 
 import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusableProps, HelpTextProps, InputBase, InputDOMProps, LabelableProps, LoadingState, SingleSelection, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps, TextInputBase, Validation} from '@react-types/shared';
+import {Key} from 'react';
 
 export type MenuTriggerAction = 'focus' | 'input' | 'manual';
 
-export interface ComboBoxProps<T> extends CollectionBase<T>, Omit<SingleSelection, 'disallowEmptySelection'>, InputBase, TextInputBase, Validation, FocusableProps<HTMLInputElement>, LabelableProps, HelpTextProps {
+export interface ComboBoxValidationValue {
+  /** The selected key in the ComboBox. */
+  selectedKey: Key,
+  /** The value of the ComboBox input. */
+  inputValue: string
+}
+
+export interface ComboBoxProps<T> extends CollectionBase<T>, Omit<SingleSelection, 'disallowEmptySelection'>, InputBase, TextInputBase, Validation<ComboBoxValidationValue>, FocusableProps<HTMLInputElement>, LabelableProps, HelpTextProps {
   /** The list of ComboBox items (uncontrolled). */
   defaultItems?: Iterable<T>,
   /** The list of ComboBox items (controlled). */
@@ -46,7 +54,7 @@ export interface AriaComboBoxProps<T> extends ComboBoxProps<T>, DOMProps, InputD
   shouldFocusWrap?: boolean
 }
 
-export interface SpectrumComboBoxProps<T> extends SpectrumTextInputBase, Omit<AriaComboBoxProps<T>, 'menuTrigger' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit<AsyncLoadable, 'isLoading'> {
+export interface SpectrumComboBoxProps<T> extends SpectrumTextInputBase, Omit<AriaComboBoxProps<T>, 'menuTrigger' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation<ComboBoxValidationValue>, SpectrumLabelableProps, StyleProps, Omit<AsyncLoadable, 'isLoading'> {
   /**
    * The interaction required to display the ComboBox menu. Note that this prop has no effect on the mobile ComboBox experience.
    * @default 'input'

From 0bac22264b9b936c6dc0dde374a35c476adb1230 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 21 Oct 2023 10:57:48 -0700
Subject: [PATCH 15/38] Picker

---
 packages/@react-aria/select/package.json      |   1 +
 .../@react-aria/select/src/HiddenSelect.tsx   |   9 +-
 packages/@react-aria/select/src/useSelect.ts  |  35 ++-
 .../@react-spectrum/color/src/ColorField.tsx  |   2 -
 .../datepicker/src/DatePicker.tsx             |   2 +
 .../datepicker/src/DateRangePicker.tsx        |   2 +
 .../form/stories/Form.stories.tsx             |   7 +-
 packages/@react-spectrum/picker/package.json  |   1 +
 .../@react-spectrum/picker/src/Picker.tsx     |   9 +-
 .../picker/test/Picker.test.js                | 211 +++++++++++++++++-
 .../combobox/src/useComboBoxState.ts          |   2 +-
 packages/@react-stately/select/package.json   |   1 +
 .../select/src/useSelectState.ts              |  20 +-
 packages/@react-types/select/src/index.d.ts   |   3 +-
 14 files changed, 279 insertions(+), 26 deletions(-)

diff --git a/packages/@react-aria/select/package.json b/packages/@react-aria/select/package.json
index 30d7fbb7b74..5ef44ce0a4e 100644
--- a/packages/@react-aria/select/package.json
+++ b/packages/@react-aria/select/package.json
@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.4",
     "@react-aria/interactions": "^3.19.1",
     "@react-aria/label": "^3.7.2",
diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index 8e097bc26de..4918ae1e279 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -12,8 +12,10 @@
 
 import {FocusableElement} from '@react-types/shared';
 import React, {ReactNode, RefObject, useRef} from 'react';
+import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
 import {useFormReset} from '@react-aria/utils';
+import {useFormValidation} from '@react-aria/form';
 import {useInteractionModality} from '@react-aria/interactions';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -52,11 +54,14 @@ export interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
  * navigation, and native HTML form submission.
  */
 export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {
-  let {autoComplete, name, isDisabled} = props;
+  let data = selectData.get(state) || {};
+  let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;
+  let {validationBehavior, isRequired} = data;
   let modality = useInteractionModality();
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);
+  useFormValidation({validationBehavior}, state, props.selectRef);
 
   // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
   // In Firefox, there must be a <label> to identify the <select> whereas other browsers
@@ -93,8 +98,8 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
       tabIndex: -1,
       autoComplete,
       disabled: isDisabled,
+      required: validationBehavior === 'native' && isRequired,
       name,
-      size: state.collection.size,
       value: state.selectedKey ?? '',
       onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)
     }
diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts
index 124a0a237e0..085399cf39d 100644
--- a/packages/@react-aria/select/src/useSelect.ts
+++ b/packages/@react-aria/select/src/useSelect.ts
@@ -14,7 +14,7 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
 import {AriaSelectProps} from '@react-types/select';
 import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
-import {DOMAttributes, FocusableElement, KeyboardDelegate} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, KeyboardDelegate, ValidationResult} from '@react-types/shared';
 import {FocusEvent, RefObject, useMemo} from 'react';
 import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';
 import {SelectState} from '@react-stately/select';
@@ -31,7 +31,7 @@ export interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children
   keyboardDelegate?: KeyboardDelegate
 }
 
-export interface SelectAria<T> {
+export interface SelectAria<T> extends ValidationResult {
   /** Props for the label element. */
   labelProps: DOMAttributes,
 
@@ -51,6 +51,15 @@ export interface SelectAria<T> {
   errorMessageProps: DOMAttributes
 }
 
+interface SelectData {
+  isDisabled?: boolean,
+  isRequired?: boolean,
+  name?: string,
+  validationBehavior?: 'aria' | 'native'
+}
+
+export const selectData = new WeakMap<SelectState<any>, SelectData>();
+
 /**
  * Provides the behavior and accessibility implementation for a select component.
  * A select displays a collapsible list of options and allows a user to select one of them.
@@ -60,7 +69,10 @@ export interface SelectAria<T> {
 export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<FocusableElement>): SelectAria<T> {
   let {
     keyboardDelegate,
-    isDisabled
+    isDisabled,
+    isRequired,
+    name,
+    validationBehavior = 'aria'
   } = props;
 
   // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
@@ -110,9 +122,12 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     }
   });
 
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || errors
   });
 
   typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
@@ -123,6 +138,13 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
 
   let valueId = useId();
 
+  selectData.set(state, {
+    isDisabled,
+    isRequired,
+    name,
+    validationBehavior
+  });
+
   return {
     labelProps: {
       ...labelProps,
@@ -207,6 +229,9 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
       ].filter(Boolean).join(' ')
     },
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    errors,
+    validationDetails
   };
 }
diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx
index 81975b8b457..6eb4e6c4291 100644
--- a/packages/@react-spectrum/color/src/ColorField.tsx
+++ b/packages/@react-spectrum/color/src/ColorField.tsx
@@ -45,8 +45,6 @@ function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
       ref={ref}
       inputRef={inputRef}
       {...result}
-      validationState={props.validationState || (result.isInvalid ? 'invalid' : null)}
-      errorMessage={props.errorMessage ?? result.errors.join(' ')}
       inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />
   );
 }
diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
index d6846862593..39738c884ea 100644
--- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
@@ -33,12 +33,14 @@ import {useDatePicker} from '@react-aria/datepicker';
 import {useDatePickerState} from '@react-stately/datepicker';
 import {useFocusManagerRef, useFormatHelpText, useVisibleMonths} from './utils';
 import {useFocusRing} from '@react-aria/focus';
+import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
 function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     autoFocus,
     isQuiet,
diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
index 18a9bf01c17..f57945720b3 100644
--- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
@@ -33,12 +33,14 @@ import {useDateRangePicker} from '@react-aria/datepicker';
 import {useDateRangePickerState} from '@react-stately/datepicker';
 import {useFocusManagerRef, useFormatHelpText, useVisibleMonths} from './utils';
 import {useFocusRing} from '@react-aria/focus';
+import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
 function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     isQuiet,
     isDisabled,
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index b0c0ecf58e3..e956e9fc002 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -16,11 +16,12 @@ import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {CalendarDate} from '@internationalized/date';
 import {chain} from '@react-aria/utils';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import {Content, Header} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {countries, states} from './data';
-import {DateField, DateRangePicker} from '@react-spectrum/datepicker';
+import {DateField, DatePicker, DateRangePicker} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '../';
 import {FormTranslatedText} from './../chromatic/FormLanguages.chromatic';
@@ -452,6 +453,10 @@ function render(props: any = {}) {
         <Item key="5">Cool Tag 5</Item>
         <Item key="6">Cool Tag 6</Item>
       </TagGroup>
+      <ColorField label="Color" />
+      <DateField label="Date" />
+      <DatePicker label="Date picker" />
+      <DateRangePicker label="Date range" />
       {props.showSubmit && (
         <ButtonGroup>
           <Button variant="primary" type="submit">Submit</Button>
diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json
index cf1380fbe4e..5dd5706e0b7 100644
--- a/packages/@react-spectrum/picker/package.json
+++ b/packages/@react-spectrum/picker/package.json
@@ -43,6 +43,7 @@
     "@react-aria/select": "^3.13.1",
     "@react-aria/utils": "^3.21.1",
     "@react-spectrum/button": "^3.14.1",
+    "@react-spectrum/form": "^3.6.7",
     "@react-spectrum/label": "^3.15.1",
     "@react-spectrum/listbox": "^3.12.1",
     "@react-spectrum/overlays": "^5.5.1",
diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx
index d3511d7834e..0d8a7ce9347 100644
--- a/packages/@react-spectrum/picker/src/Picker.tsx
+++ b/packages/@react-spectrum/picker/src/Picker.tsx
@@ -36,6 +36,7 @@ import React, {ReactElement, useCallback, useRef, useState} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';
 import {Text} from '@react-spectrum/text';
+import {useFormProps} from '@react-spectrum/form';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSelectState} from '@react-stately/select';
@@ -43,6 +44,7 @@ import {useSelectState} from '@react-stately/select';
 function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useSlotProps(props, 'picker');
   props = useProviderProps(props);
+  props = useFormProps(props);
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {
     autoComplete,
@@ -51,8 +53,6 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
     align = 'start',
     shouldFlip = true,
     placeholder = stringFormatter.format('placeholder'),
-    validationState,
-    isInvalid = validationState === 'invalid',
     isQuiet,
     label,
     labelPosition = 'top' as LabelPosition,
@@ -77,7 +77,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   // so that the layout information can be cached even while the listbox is not mounted.
   // We also use the layout as the keyboard delegate for type to select.
   let layout = useListBoxLayout(state, isLoadingMore);
-  let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps} = useSelect({
+  let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useSelect({
     ...props,
     'aria-describedby': (isLoadingInitial ? progressCircleId : undefined),
     keyboardDelegate: layout
@@ -241,6 +241,9 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
+      isInvalid={isInvalid}
+      errors={errors}
+      validationDetails={validationDetails}
       showErrorIcon={false}
       includeNecessityIndicatorInAccessibilityName
       elementType="span">
diff --git a/packages/@react-spectrum/picker/test/Picker.test.js b/packages/@react-spectrum/picker/test/Picker.test.js
index 07eac65d741..466920f8cc1 100644
--- a/packages/@react-spectrum/picker/test/Picker.test.js
+++ b/packages/@react-spectrum/picker/test/Picker.test.js
@@ -14,8 +14,10 @@ import {act, fireEvent, pointerMap, render, triggerPress, within} from '@react-s
 import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
 import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
 import AlignRight from '@spectrum-icons/workflow/AlignRight';
+import {Button} from '@react-spectrum/button';
 import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
+import {Form} from '@react-spectrum/form';
 import {Item, Picker, Section} from '../src';
 import Paste from '@spectrum-icons/workflow/Paste';
 import {Provider} from '@react-spectrum/provider';
@@ -1781,15 +1783,7 @@ describe('Picker', function () {
       expect(hiddenLabel.tagName).toBe('LABEL');
       expect(hiddenLabel.parentElement).toHaveAttribute('aria-hidden', 'true');
 
-      // For anyone else who comes through this listbox/combobox path
-      // I can't use combobox here because there is a size attribute on the html select
-      // everything below this line is the path i followed to get to the correct role:
-      //   not sure why i can't use listbox https://github.com/A11yance/aria-query#elements-to-roles
-      //   however, i think this is correct based on https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
-      //   which says "The listbox role is used for lists from which a user may select one or more items which are static and, unlike HTML <select> elements, may contain images."
-      //   Also, this test in react testing library seems to indicate something about size which we do not currently have, probably a bug
-      //   https://github.com/testing-library/dom-testing-library/blob/master/src/__tests__/element-queries.js#L548
-      let hiddenSelect = getByRole('listbox', {hidden: true});
+      let hiddenSelect = getByRole('combobox', {hidden: true});
       expect(hiddenSelect.parentElement).toBe(hiddenLabel);
       expect(hiddenSelect).toHaveAttribute('tabIndex', '-1');
       expect(hiddenSelect).toHaveAttribute('autoComplete', 'address-level1');
@@ -2233,6 +2227,205 @@ describe('Picker', function () {
       await user.click(button);
       expect(input).toHaveValue('one');
     });
+
+    describe('validation', () => {
+      describe('validationBehavior=native', () => {
+        it('supports isRequired', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <Picker name="picker" data-testid="picker" label="Test" isRequired validationBehavior="native">
+                  <Item key="one">One</Item>
+                  <Item key="two">Two</Item>
+                  <Item key="three">Three</Item>
+                </Picker>
+              </Form>
+            </Provider>
+          );
+
+          let picker = getByTestId('picker');
+          let input = document.querySelector('[name=picker]');
+          expect(input).toHaveAttribute('required');
+          expect(picker).not.toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(false);
+
+          act(() => getByTestId('form').checkValidity());
+
+          expect(picker).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+          await user.click(picker);
+          act(() => jest.runAllTimers());
+
+          let listbox = getByRole('listbox');
+          let items = within(listbox).getAllByRole('option');
+          await user.click(items[0]);
+          act(() => jest.runAllTimers());
+          expect(picker).not.toHaveAttribute('aria-describedby');
+        });
+
+        it('supports validate function', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <Picker name="picker" data-testid="picker" label="Test" defaultSelectedKey="two" validationBehavior="native" validate={v => v === 'two' ? 'Invalid value' : null}>
+                  <Item key="one">One</Item>
+                  <Item key="two">Two</Item>
+                  <Item key="three">Three</Item>
+                </Picker>
+              </Form>
+            </Provider>
+          );
+
+          let picker = getByTestId('picker');
+          let input = document.querySelector('[name=picker]');
+          expect(picker).not.toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(false);
+
+          act(() => getByTestId('form').checkValidity());
+
+          expect(picker).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+          await user.click(picker);
+          act(() => jest.runAllTimers());
+
+          let listbox = getByRole('listbox');
+          let items = within(listbox).getAllByRole('option');
+          await user.click(items[0]);
+          act(() => jest.runAllTimers());
+          expect(picker).not.toHaveAttribute('aria-describedby');
+        });
+
+        it('supports server validation', async () => {
+          function Test() {
+            let [serverErrors, setServerErrors] = React.useState({});
+            let onSubmit = e => {
+              e.preventDefault();
+              setServerErrors({
+                picker: 'Invalid value.'
+              });
+            };
+
+            return (
+              <Provider theme={theme}>
+                <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                  <Picker name="picker" data-testid="picker" label="Test" validationBehavior="native" >
+                    <Item key="one">One</Item>
+                    <Item key="two">Two</Item>
+                    <Item key="three">Three</Item>
+                  </Picker>
+                  <Button type="submit" data-testid="submit">Submit</Button>
+                </Form>
+              </Provider>
+            );
+          }
+
+          let {getByTestId, getByRole} = render(<Test />);
+
+          let picker = getByTestId('picker');
+          let input = document.querySelector('[name=picker]');
+          expect(picker).not.toHaveAttribute('aria-describedby');
+
+          await user.click(getByTestId('submit'));
+
+          expect(picker).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value.');
+          expect(input.validity.valid).toBe(false);
+
+          await user.click(picker);
+          act(() => jest.runAllTimers());
+
+          let listbox = getByRole('listbox');
+          let items = within(listbox).getAllByRole('option');
+          await user.click(items[0]);
+          act(() => jest.runAllTimers());
+
+          expect(picker).not.toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(true);
+        });
+
+        it('supports customizing native error messages', async () => {
+          let {getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <Picker name="picker" data-testid="picker" label="Test" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null}>
+                  <Item key="one">One</Item>
+                  <Item key="two">Two</Item>
+                  <Item key="three">Three</Item>
+                </Picker>
+              </Form>
+            </Provider>
+          );
+
+          let picker = getByTestId('picker');
+          expect(picker).not.toHaveAttribute('aria-describedby');
+
+          act(() => getByTestId('form').checkValidity());
+          expect(picker).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+        });
+      });
+
+      describe('validationBehavior=aria', () => {
+        it('supports validate function', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <Picker name="picker" data-testid="picker" label="Test" defaultSelectedKey="two" validate={v => v === 'two' ? 'Invalid value' : null}>
+                  <Item key="one">One</Item>
+                  <Item key="two">Two</Item>
+                  <Item key="three">Three</Item>
+                </Picker>
+              </Form>
+            </Provider>
+          );
+
+          let picker = getByTestId('picker');
+          let input = document.querySelector('[name=picker]');
+          expect(picker).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+          expect(input.validity.valid).toBe(true);
+
+          await user.click(picker);
+          act(() => jest.runAllTimers());
+
+          let listbox = getByRole('listbox');
+          let items = within(listbox).getAllByRole('option');
+          await user.click(items[0]);
+          act(() => jest.runAllTimers());
+
+          expect(picker).not.toHaveAttribute('aria-describedby');
+        });
+
+        it('supports server validation', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form validationErrors={{picker: 'Invalid value'}}>
+                <Picker name="picker" data-testid="picker" label="Test">
+                  <Item key="one">One</Item>
+                  <Item key="two">Two</Item>
+                  <Item key="three">Three</Item>
+                </Picker>
+              </Form>
+            </Provider>
+          );
+
+          let picker = getByTestId('picker');
+          expect(picker).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+          await user.click(picker);
+          act(() => jest.runAllTimers());
+
+          let listbox = getByRole('listbox');
+          let items = within(listbox).getAllByRole('option');
+          await user.click(items[0]);
+          act(() => jest.runAllTimers());
+          expect(picker).not.toHaveAttribute('aria-describedby');
+        });
+      });
+    });
   });
 
   describe('links', () => {
diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts
index 91405020afa..015cddb4763 100644
--- a/packages/@react-stately/combobox/src/useComboBoxState.ts
+++ b/packages/@react-stately/combobox/src/useComboBoxState.ts
@@ -20,7 +20,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useControlledState} from '@react-stately/utils';
 import {useMenuTriggerState} from '@react-stately/menu';
 
-export interface ComboBoxState<T> extends SelectState<T>, FormValidationState<ComboBoxValidationValue> {
+export interface ComboBoxState<T> extends Omit<SelectState<T>, keyof FormValidationState<any>>, FormValidationState<ComboBoxValidationValue> {
   /** The current value of the combo box input. */
   inputValue: string,
   /** Sets the value of the combo box input. */
diff --git a/packages/@react-stately/select/package.json b/packages/@react-stately/select/package.json
index fa96cdd4853..6845e838679 100644
--- a/packages/@react-stately/select/package.json
+++ b/packages/@react-stately/select/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@react-stately/collections": "^3.10.2",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/list": "^3.10.0",
     "@react-stately/menu": "^3.5.6",
     "@react-stately/selection": "^3.14.0",
diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts
index aabfe27d924..7bf18b1034a 100644
--- a/packages/@react-stately/select/src/useSelectState.ts
+++ b/packages/@react-stately/select/src/useSelectState.ts
@@ -11,14 +11,15 @@
  */
 
 import {CollectionStateBase} from '@react-types/shared';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
+import {Key, useEffect, useRef, useState} from 'react';
 import {MenuTriggerState, useMenuTriggerState} from '@react-stately/menu';
 import {SelectProps} from '@react-types/select';
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
-import {useState} from 'react';
 
 export interface SelectStateOptions<T> extends Omit<SelectProps<T>, 'children'>, CollectionStateBase<T> {}
 
-export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerState {
+export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerState, FormValidationState<Key> {
   /** Whether the select is currently focused. */
   readonly isFocused: boolean,
 
@@ -33,6 +34,7 @@ export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerSta
  */
 export function useSelectState<T extends object>(props: SelectStateOptions<T>): SelectState<T>  {
   let triggerState = useMenuTriggerState(props);
+  let didCommit = useRef(false);
   let listState = useSingleSelectListState({
     ...props,
     onSelectionChange: (key) => {
@@ -41,12 +43,26 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
       }
 
       triggerState.close();
+      didCommit.current = true;
     }
   });
 
+  useEffect(() => {
+    if (didCommit.current) {
+      didCommit.current = false;
+      validationState.commitValidation();
+    }
+  });
+
+  let validationState = useFormValidationState({
+    ...props,
+    value: listState.selectedKey
+  });
+
   let [isFocused, setFocused] = useState(false);
 
   return {
+    ...validationState,
     ...listState,
     ...triggerState,
     open() {
diff --git a/packages/@react-types/select/src/index.d.ts b/packages/@react-types/select/src/index.d.ts
index 7bf0b7b25cc..ae2587720ef 100644
--- a/packages/@react-types/select/src/index.d.ts
+++ b/packages/@react-types/select/src/index.d.ts
@@ -28,8 +28,9 @@ import {
   TextInputBase,
   Validation
 } from '@react-types/shared';
+import {Key} from 'react';
 
-export interface SelectProps<T> extends CollectionBase<T>, Omit<InputBase, 'isReadOnly'>, Validation, HelpTextProps, LabelableProps, TextInputBase, Omit<SingleSelection, 'disallowEmptySelection'>, FocusableProps {
+export interface SelectProps<T> extends CollectionBase<T>, Omit<InputBase, 'isReadOnly'>, Validation<Key>, HelpTextProps, LabelableProps, TextInputBase, Omit<SingleSelection, 'disallowEmptySelection'>, FocusableProps {
   /** Sets the open state of the menu. */
   isOpen?: boolean,
   /** Sets the default open state of the menu. */

From 3a4e9c9db889f26ae30b226a1a5ec219dace0618 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 21 Oct 2023 12:04:05 -0700
Subject: [PATCH 16/38] fixes

---
 .../autocomplete/test/useSearchAutocomplete.test.js  | 10 +++-------
 .../@react-aria/combobox/test/useComboBox.test.js    |  5 ++---
 packages/@react-aria/datepicker/src/useDateField.ts  |  2 +-
 packages/@react-aria/datepicker/src/useDatePicker.ts |  2 +-
 .../@react-aria/datepicker/src/useDateRangePicker.ts |  2 +-
 packages/@react-aria/form/src/useFormValidation.ts   |  2 +-
 packages/@react-aria/numberfield/package.json        |  1 +
 .../@react-aria/numberfield/src/useNumberField.ts    | 11 +++--------
 .../searchfield/test/useSearchField.test.js          |  3 ++-
 packages/@react-aria/textfield/src/useTextField.ts   |  2 +-
 packages/@react-spectrum/tag/src/TagGroup.tsx        |  2 +-
 .../form/src/useFormValidationState.ts               | 12 +++++++++---
 12 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js b/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js
index fc3185ea5ca..3c00f30c57f 100644
--- a/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js
+++ b/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js
@@ -16,7 +16,6 @@ import React from 'react';
 import {renderHook} from '@react-spectrum/test-utils';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useSearchAutocomplete} from '../';
-import {useSingleSelectListState} from '@react-stately/list';
 
 describe('useSearchAutocomplete', function () {
   let preventDefault = jest.fn();
@@ -28,7 +27,7 @@ describe('useSearchAutocomplete', function () {
   });
 
   let defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>};
-  let {result} = renderHook(() => useSingleSelectListState(defaultProps));
+  let {result} = renderHook(() => useComboBoxState(defaultProps));
   let mockLayout = new ListLayout({
     rowHeight: 40
   });
@@ -47,7 +46,7 @@ describe('useSearchAutocomplete', function () {
       layout: mockLayout
     };
 
-    let {result} = renderHook(() => useSearchAutocomplete(props, useSingleSelectListState(defaultProps)));
+    let {result} = renderHook(() => useSearchAutocomplete(props, useComboBoxState(defaultProps)));
     let {inputProps, listBoxProps, labelProps} = result.current;
 
     expect(labelProps.id).toBeTruthy();
@@ -69,10 +68,7 @@ describe('useSearchAutocomplete', function () {
       label: 'test label',
       popoverRef: React.createRef(),
       inputRef: {
-        current: {
-          contains: jest.fn(),
-          focus: jest.fn()
-        }
+        current: document.createElement('input')
       },
       listBoxRef: React.createRef(),
       layout: mockLayout
diff --git a/packages/@react-aria/combobox/test/useComboBox.test.js b/packages/@react-aria/combobox/test/useComboBox.test.js
index fd5c65978d6..4032e791cdc 100644
--- a/packages/@react-aria/combobox/test/useComboBox.test.js
+++ b/packages/@react-aria/combobox/test/useComboBox.test.js
@@ -16,7 +16,6 @@ import {ListLayout} from '@react-stately/layout';
 import React from 'react';
 import {useComboBox} from '../';
 import {useComboBoxState} from '@react-stately/combobox';
-import {useSingleSelectListState} from '@react-stately/list';
 
 describe('useComboBox', function () {
   let preventDefault = jest.fn();
@@ -30,7 +29,7 @@ describe('useComboBox', function () {
   });
 
   let defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>};
-  let {result} = renderHook(() => useSingleSelectListState(defaultProps));
+  let {result} = renderHook(() => useComboBoxState(defaultProps));
   let mockLayout = new ListLayout({
     rowHeight: 40
   });
@@ -58,7 +57,7 @@ describe('useComboBox', function () {
   });
 
   it('should return default props for all the button group elements', function () {
-    let {result} = renderHook(() => useComboBox(props, useSingleSelectListState(defaultProps)));
+    let {result} = renderHook(() => useComboBox(props, useComboBoxState(defaultProps)));
     let {buttonProps, inputProps, listBoxProps, labelProps} = result.current;
 
     expect(labelProps.id).toBeTruthy();
diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index 73f8a156690..0ea58caed23 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -25,7 +25,7 @@ import {useFormValidation} from '@react-aria/form';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
-export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {
+export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> {
   /** A ref for the hidden input element for HTML form submission. */
   inputRef?: RefObject<HTMLInputElement>
 }
diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts
index 33b6436e2e5..a56005bd3ad 100644
--- a/packages/@react-aria/datepicker/src/useDatePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDatePicker.ts
@@ -164,7 +164,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       isDateUnavailable: props.isDateUnavailable,
       defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
       isInvalid: state.isInvalid,
-      errorMessage: props.errorMessage
+      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage
     },
     isInvalid,
     errors,
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index 5bf168f8c24..36a615eeaa7 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -222,7 +222,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       allowsNonContiguousRanges: props.allowsNonContiguousRanges,
       defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
       isInvalid: state.isInvalid,
-      errorMessage: props.errorMessage
+      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage
     },
     isInvalid,
     errors,
diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index c71c1e76d9c..f1c1ed5c3b8 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -47,7 +47,7 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
 
   useEffect(() => {
     let input = ref.current;
-    if (!input || validationBehavior !== 'native') {
+    if (!input) {
       return;
     }
 
diff --git a/packages/@react-aria/numberfield/package.json b/packages/@react-aria/numberfield/package.json
index f876b7f7eef..110c9f77fa7 100644
--- a/packages/@react-aria/numberfield/package.json
+++ b/packages/@react-aria/numberfield/package.json
@@ -29,6 +29,7 @@
     "@react-aria/spinbutton": "^3.5.4",
     "@react-aria/textfield": "^3.12.2",
     "@react-aria/utils": "^3.21.1",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/numberfield": "^3.6.2",
     "@react-types/button": "^3.9.0",
     "@react-types/numberfield": "^3.6.1",
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index f491e29e320..ceb98c80810 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -25,9 +25,9 @@ import {
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {NumberFieldState} from '@react-stately/numberfield';
+import {privateValidationStateProp} from '@react-stately/form';
 import {useFocus, useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
-import {useFormValidation} from '@react-aria/form';
 import {
   useLocalizedStringFormatter,
   useNumberFormatter
@@ -198,11 +198,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     isDisabled,
     isReadOnly,
     isRequired,
-    isInvalid,
-    // Disable validation in useTextField. We handle it below.
-    validationState: undefined,
     validate: undefined,
-    validationBehavior: undefined,
+    [privateValidationStateProp]: state,
     value: inputValue,
     defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here
     autoComplete: 'off',
@@ -218,11 +215,10 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),
     onKeyUp,
     description,
-    errorMessage: errorMessage || errors
+    errorMessage
   }, state, inputRef);
 
   useFormReset(inputRef, state.numberValue, state.setNumberValue);
-  useFormValidation(props, state, inputRef);
 
   let inputProps = mergeProps(
     spinButtonProps,
@@ -243,7 +239,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   );
 
   if (props.validationBehavior === 'native') {
-    inputProps.required = isRequired;
     inputProps['aria-required'] = undefined;
   }
 
diff --git a/packages/@react-aria/searchfield/test/useSearchField.test.js b/packages/@react-aria/searchfield/test/useSearchField.test.js
index f243135334e..bc9c7dec036 100644
--- a/packages/@react-aria/searchfield/test/useSearchField.test.js
+++ b/packages/@react-aria/searchfield/test/useSearchField.test.js
@@ -33,7 +33,8 @@ describe('useSearchField hook', () => {
   beforeEach(() => {
     state.value = '';
     state.setValue = setValue;
-    ref.current = {focus};
+    ref.current = document.createElement('input');
+    focus = jest.spyOn(ref.current, 'focus');
   });
 
   afterEach(() => {
diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
index a168e3bcc29..bfc46e0bd3f 100644
--- a/packages/@react-aria/textfield/src/useTextField.ts
+++ b/packages/@react-aria/textfield/src/useTextField.ts
@@ -126,7 +126,7 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     isInvalid,
-    errorMessage: errors
+    errorMessage: props.errorMessage || errors
   });
   let domProps = filterDOMProps(props, {labelable: true});
 
diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx
index b7739c8249c..1af2778502a 100644
--- a/packages/@react-spectrum/tag/src/TagGroup.tsx
+++ b/packages/@react-spectrum/tag/src/TagGroup.tsx
@@ -39,7 +39,7 @@ const TAG_STYLES = {
   }
 };
 
-export interface SpectrumTagGroupProps<T> extends Omit<AriaTagGroupProps<T>, 'selectionMode' | 'disallowEmptySelection' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionBehavior' | 'disabledKeys'>, StyleProps, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, Omit<Validation, 'isRequired'> {
+export interface SpectrumTagGroupProps<T> extends Omit<AriaTagGroupProps<T>, 'selectionMode' | 'disallowEmptySelection' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionBehavior' | 'disabledKeys'>, StyleProps, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, Pick<Validation<any>, 'isInvalid' | 'validationState'> {
   /** The label to display on the action button.  */
   actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index 7c8e7beee86..e79ac758b7f 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -113,6 +113,10 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
   let [currentValidity, setCurrentValidity] = useState(DEFAULT_VALIDATION_RESULT);
   let lastError = useRef(DEFAULT_VALIDATION_RESULT);
   let commitValidation = (value?: T) => {
+    if (validationBehavior === 'aria') {
+      return;
+    }
+
     let nextClientError = clientError;
     if (value !== undefined) {
       nextClientError = getValidationResult(runValidate(validate, value));
@@ -134,9 +138,11 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
     realtimeValidation,
     displayValidation,
     updateValidation(value) {
-      nativeValidity.current = value;
-      if (validationBehavior === 'aria') {
-        commitValidation();
+      // If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.
+      if (validationBehavior === 'aria' && !isEqualValidation(currentValidity, value)) {
+        setCurrentValidity(value);
+      } else {
+        nativeValidity.current = value;
       }
     },
     resetValidation() {

From 6910c7e31c38bce6295a33cf72cea49325f0f305 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 21 Oct 2023 12:35:10 -0700
Subject: [PATCH 17/38] Merge errors from startName and endName in
 DateRangePicker

---
 .../datepicker/test/DateRangePicker.test.js    | 11 ++++++-----
 .../datepicker/src/useDateRangePickerState.ts  |  2 +-
 .../form/src/useFormValidationState.ts         | 18 +++++++++++-------
 .../@react-types/datepicker/src/index.d.ts     |  7 +++----
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index 562ddefe254..95a0be67e42 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -1647,7 +1647,8 @@ describe('DateRangePicker', function () {
             let onSubmit = e => {
               e.preventDefault();
               setServerErrors({
-                start: 'Invalid value'
+                start: 'Invalid start date.',
+                end: 'Invalid end date.'
               });
             };
 
@@ -1670,7 +1671,7 @@ describe('DateRangePicker', function () {
           await user.click(getByTestId('submit'));
 
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
-          expect(getDescription()).toContain('Invalid value');
+          expect(getDescription()).toContain('Invalid start date. Invalid end date.');
           expect(input.validity.valid).toBe(false);
 
           await user.tab({shift: true});
@@ -1798,7 +1799,7 @@ describe('DateRangePicker', function () {
         it('supports server validation', async () => {
           let {getByRole} = render(
             <Provider theme={theme}>
-              <Form validationErrors={{start: 'Invalid value'}}>
+              <Form validationErrors={{start: 'Invalid start date.', end: 'Invalid end date.'}}>
                 <DateRangePicker label="Value" startName="start" endName="end" defaultValue={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2025, 2, 3)}} />
               </Form>
             </Provider>
@@ -1807,10 +1808,10 @@ describe('DateRangePicker', function () {
           let group = getByRole('group');
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
-          expect(getDescription()).toContain('Invalid value');
+          expect(getDescription()).toContain('Invalid start date. Invalid end date.');
 
           await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
-          expect(getDescription()).not.toContain('Invalid value');
+          expect(getDescription()).not.toContain('Invalid start date. Invalid end date.');
         });
       });
     });
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index ae1bf52b1f5..9d45f5d755d 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -178,7 +178,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   let validation = useFormValidationState({
     ...props,
     value,
-    name: props.startName, // TODO
+    name: useMemo(() => [props.startName, props.endName], [props.startName, props.endName]),
     builtinValidation
   });
 
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index e79ac758b7f..e26f026e37a 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -45,7 +45,7 @@ export const privateValidationStateProp = '__formValidationState' + Date.now();
 
 interface FormValidationProps<T> extends Validation<T> {
   builtinValidation?: ValidationResult,
-  name?: string,
+  name?: string | string[],
   value: T
 }
 
@@ -98,11 +98,7 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
   let serverErrorMessages = useMemo(() => {
     if (name) {
       setServerErrorCleared(false);
-      let errors = serverErrors[name];
-      if (!errors) {
-        return [];
-      }
-      return Array.isArray(errors) ? errors : [errors];
+      return Array.isArray(name) ? name.flatMap(name => asArray(serverErrors[name])) : asArray(serverErrors[name]);
     }
     return [];
   }, [serverErrors, name]);
@@ -161,11 +157,19 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
   };
 }
 
+function asArray<T>(v: T | T[]): T[] {
+  if (!v) {
+    return [];
+  }
+
+  return Array.isArray(v) ? v : [v];
+}
+
 function runValidate<T>(validate: ValidationFunction<T>, value: T): string[] {
   if (typeof validate === 'function') {
     let e = validate(value);
     if (e && typeof e !== 'boolean') {
-      return Array.isArray(e) ? e : [e];
+      return asArray(e);
     }
   }
 
diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts
index 1b8b6d3505b..1421ca90aba 100644
--- a/packages/@react-types/datepicker/src/index.d.ts
+++ b/packages/@react-types/datepicker/src/index.d.ts
@@ -84,10 +84,7 @@ export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePick
    * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
    * i.e. ranges containing unavailable dates, may be selected.
    */
-  allowsNonContiguousRanges?: boolean
-}
-
-export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<AriaDatePickerBaseProps<T>, 'validate'>, DateRangePickerProps<T> {
+  allowsNonContiguousRanges?: boolean,
   /**
    * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
    */
@@ -98,6 +95,8 @@ export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<Aria
   endName?: string
 }
 
+export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<AriaDatePickerBaseProps<T>, 'validate'>, DateRangePickerProps<T> {}
+
 interface SpectrumDateFieldBase<T extends DateValue> extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation<MappedDateValue<T>>, StyleProps {
   /**
    * Whether the date picker should be displayed with a quiet style.

From 140929299dc6b489b3c476128745cc6b23761879 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 21 Oct 2023 13:04:06 -0700
Subject: [PATCH 18/38] cleanup

---
 .../checkbox/src/useCheckboxGroupItem.ts      |  1 +
 packages/@react-aria/color/package.json       |  1 +
 .../@react-aria/color/src/useColorField.ts    | 36 ++++---------------
 .../color/test/useColorField.test.js          | 12 +++----
 .../datepicker/src/useDateRangePicker.ts      | 15 ++------
 packages/@react-aria/toggle/src/useToggle.ts  |  2 +-
 .../form/stories/Form.stories.tsx             |  8 +++--
 packages/@react-stately/color/package.json    |  1 +
 .../color/src/useColorFieldState.ts           | 12 ++++++-
 .../datepicker/src/useDatePickerState.ts      |  5 +--
 .../datepicker/src/useDateRangePickerState.ts |  2 ++
 .../select/src/useSelectState.ts              |  2 ++
 packages/@react-types/form/src/index.d.ts     |  2 +-
 packages/dev/test-utils/package.json          |  1 -
 14 files changed, 43 insertions(+), 57 deletions(-)

diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
index c710da10d3c..99dbe9a9c94 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
@@ -49,6 +49,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
   let {realtimeValidation} = useFormValidationState({
     ...props,
     value: toggleState.isSelected,
+    // Server validation is handled at the group level.
     name: undefined,
     validationBehavior: 'aria'
   });
diff --git a/packages/@react-aria/color/package.json b/packages/@react-aria/color/package.json
index 09b3814535a..456dc7de8ec 100644
--- a/packages/@react-aria/color/package.json
+++ b/packages/@react-aria/color/package.json
@@ -30,6 +30,7 @@
     "@react-aria/utils": "^3.21.1",
     "@react-aria/visually-hidden": "^3.8.6",
     "@react-stately/color": "^3.4.4",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-types/color": "3.0.0-beta.20",
     "@react-types/shared": "^3.21.0",
     "@react-types/slider": "^3.6.2",
diff --git a/packages/@react-aria/color/src/useColorField.ts b/packages/@react-aria/color/src/useColorField.ts
index 39e40ffccee..269eed8dfc7 100644
--- a/packages/@react-aria/color/src/useColorField.ts
+++ b/packages/@react-aria/color/src/useColorField.ts
@@ -17,11 +17,10 @@ import {
   LabelHTMLAttributes,
   RefObject,
   useCallback,
-  useEffect,
-  useRef,
   useState
 } from 'react';
 import {mergeProps, useId} from '@react-aria/utils';
+import {privateValidationStateProp} from '@react-stately/form';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {useSpinButton} from '@react-aria/spinbutton';
@@ -47,7 +46,6 @@ export function useColorField(
     isDisabled,
     isReadOnly,
     isRequired,
-    validate,
     validationBehavior = 'aria'
   } = props;
 
@@ -57,7 +55,8 @@ export function useColorField(
     increment,
     decrement,
     incrementToMax,
-    decrementToMin
+    decrementToMin,
+    commit
   } = state;
 
   let inputId = useId();
@@ -100,24 +99,18 @@ export function useColorField(
     }
   };
 
-  let {labelProps, inputProps, ...validation} = useFormattedTextField(
+  let {inputProps, ...otherProps} = useFormattedTextField(
     mergeProps(props, {
       id: inputId,
       value: inputValue,
       defaultValue: undefined,
-      validate: useCallback(() => validate?.(state.colorValue), [state.colorValue, validate]),
+      validate: undefined,
+      [privateValidationStateProp]: state,
       type: 'text',
       autoComplete: 'off',
       onChange
     }), state, ref);
 
-  let valueOnFocus = useRef(state.colorValue);
-  let didCommit = useRef(false);
-  let commit = useCallback(() => {
-    state.commit();
-    didCommit.current = true;
-  }, [state]);
-
   inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
     role: 'textbox',
     'aria-valuemax': null,
@@ -126,30 +119,15 @@ export function useColorField(
     'aria-valuetext': null,
     autoCorrect: 'off',
     spellCheck: 'false',
-    onFocus: () => {
-      valueOnFocus.current = state.colorValue;
-    },
     onBlur: commit
   });
 
-  // After the value is committed, check if the value changed and emit a native "change" event for form validation to pick up.
-  // NOTE: This useEffect must be last so that form validation effects have already run.
-  useEffect(() => {
-    if (didCommit.current) {
-      didCommit.current = false;
-      if (state.colorValue !== valueOnFocus.current) {
-        ref.current?.dispatchEvent(new Event('change', {bubbles: true}));
-      }
-    }
-  });
-
   if (validationBehavior === 'native') {
     inputProps['aria-required'] = undefined;
   }
 
   return {
-    labelProps,
     inputProps,
-    ...validation
+    ...otherProps
   };
 }
diff --git a/packages/@react-aria/color/test/useColorField.test.js b/packages/@react-aria/color/test/useColorField.test.js
index 32bab3a9e5e..4a2241c7f3a 100644
--- a/packages/@react-aria/color/test/useColorField.test.js
+++ b/packages/@react-aria/color/test/useColorField.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {parseColor} from '@react-stately/color';
+import {parseColor, useColorFieldState} from '@react-stately/color';
 import React from 'react';
 import {renderHook} from '@react-spectrum/test-utils';
 import {useColorField} from '../';
@@ -20,16 +20,14 @@ describe('useColorField', function () {
 
   beforeEach(() => {
     ref = React.createRef();
-    ref.current = {};
-    ref.current.addEventListener = () => {};
-    ref.current.removeEventListener = () => {};
+    ref.current = document.createElement('input');
   });
 
-  let renderColorFieldHook = (props, state = {}) => {
+  let renderColorFieldHook = (props) => {
     let {result} = renderHook(() => useColorField({
       'aria-label': 'Primary Color',
       ...props
-    }, state, ref));
+    }, useColorFieldState(props), ref));
     return result.current;
   };
 
@@ -55,7 +53,7 @@ describe('useColorField', function () {
 
   it('should return props for colorValue provided', function () {
     let colorValue = parseColor('#ff88a0');
-    let {inputProps} = renderColorFieldHook({}, {colorValue, inputValue: colorValue.toString('hex')});
+    let {inputProps} = renderColorFieldHook({value: colorValue});
     expect(inputProps['aria-valuenow']).toBeNull();
     expect(inputProps['aria-valuetext']).toBeNull();
     expect(inputProps['value']).toBe('#FF88A0');
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index 36a615eeaa7..e8d0b0f031f 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -15,12 +15,12 @@ import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-t
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
 import {DateRangePickerState} from '@react-stately/datepicker';
+import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';
 import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeValidation, privateValidationStateProp, VALID_VALIDITY_STATE} from '@react-stately/form';
 import {RangeCalendarProps} from '@react-types/calendar';
 import {RefObject, useMemo, useRef} from 'react';
 import {useDatePickerGroup} from './useDatePickerGroup';
@@ -117,17 +117,8 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     onFocusWithinChange: props.onFocusChange
   });
 
-  let startFieldValidation = useRef({
-    isInvalid: false,
-    validationDetails: VALID_VALIDITY_STATE,
-    errors: []
-  });
-
-  let endFieldValidation = useRef({
-    isInvalid: false,
-    validationDetails: VALID_VALIDITY_STATE,
-    errors: []
-  });
+  let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
+  let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
 
   return {
     groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts
index a3c2fdaf5e0..fcbf96ecd89 100644
--- a/packages/@react-aria/toggle/src/useToggle.ts
+++ b/packages/@react-aria/toggle/src/useToggle.ts
@@ -78,7 +78,7 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
 
   return {
     inputProps: mergeProps(domProps, {
-      'aria-invalid': isInvalid || undefined,
+      'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
       'aria-errormessage': props['aria-errormessage'],
       'aria-controls': props['aria-controls'],
       'aria-readonly': isReadOnly || undefined,
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 69199ff9e58..a32ae5837be 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -21,7 +21,7 @@ import {ComboBox} from '@react-spectrum/combobox';
 import {Content, Header} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {countries, states} from './data';
-import {DateField, DatePicker, DateRangePicker} from '@react-spectrum/datepicker';
+import {DateField, DatePicker, DateRangePicker, TimeField} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '../';
 import {FormTranslatedText} from './../chromatic/FormLanguages.chromatic';
@@ -445,7 +445,7 @@ function render(props: any = {}) {
             <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
           </ContextualHelp>
         )} />
-      <TextField label="Zip code" description="Please enter a five-digit zip code." errorMessage="Please remove letters and special characters." />
+      <TextField label="Zip code" description="Please enter a five-digit zip code." pattern="[0-9]{5}" />
       <TagGroup label="Favorite tags" description="Select your favorite tags." errorMessage="Incorrect combination of tags.">
         <Item key="1">Cool Tag 1</Item>
         <Item key="2">Cool Tag 2</Item>
@@ -455,9 +455,11 @@ function render(props: any = {}) {
         <Item key="6">Cool Tag 6</Item>
       </TagGroup>
       <ColorField label="Color" />
-      <DateField label="Date" />
+      <DateField label="Date" granularity="minute" />
+      <TimeField label="Time" />
       <DatePicker label="Date picker" />
       <DateRangePicker label="Date range" />
+      <TextField type="email" label="Email" />
       {props.showSubmit && (
         <ButtonGroup>
           <Button variant="primary" type="submit">Submit</Button>
diff --git a/packages/@react-stately/color/package.json b/packages/@react-stately/color/package.json
index 05a17246e87..b284a2fc25a 100644
--- a/packages/@react-stately/color/package.json
+++ b/packages/@react-stately/color/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@internationalized/number": "^3.3.0",
     "@internationalized/string": "^3.1.1",
+    "@react-stately/form": "3.0.0-alpha.1",
     "@react-stately/slider": "^3.4.4",
     "@react-stately/utils": "^3.8.0",
     "@react-types/color": "3.0.0-beta.20",
diff --git a/packages/@react-stately/color/src/useColorFieldState.ts b/packages/@react-stately/color/src/useColorFieldState.ts
index 7aea1520d13..ca01e50b622 100644
--- a/packages/@react-stately/color/src/useColorFieldState.ts
+++ b/packages/@react-stately/color/src/useColorFieldState.ts
@@ -11,12 +11,13 @@
  */
 
 import {Color, ColorFieldProps} from '@react-types/color';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {parseColor} from './Color';
 import {useColor} from './useColor';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo, useState} from 'react';
 
-export interface ColorFieldState {
+export interface ColorFieldState extends FormValidationState<Color | null> {
   /**
    * The current text value of the input. Updated as the user types,
    * and formatted according to `formatOptions` on blur.
@@ -74,6 +75,11 @@ export function useColorFieldState(
   let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange);
   let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
 
+  let validation = useFormValidationState({
+    ...props,
+    value: colorValue
+  });
+
   let safelySetColorValue = (newColor: Color) => {
     if (!colorValue || !newColor) {
       setColorValue(newColor);
@@ -106,12 +112,14 @@ export function useColorFieldState(
     if (!inputValue.length) {
       safelySetColorValue(null);
       setInputValue(value === undefined ? '' : colorValue.toString('hex'));
+      validation.commitValidation(null);
       return;
     }
 
     // if it failed to parse, then reset input to formatted version of current number
     if (parsedValue == null) {
       setInputValue(colorValue ? colorValue.toString('hex') : '');
+      validation.commitValidation();
       return;
     }
 
@@ -122,6 +130,7 @@ export function useColorFieldState(
       newColorValue = colorValue.toString('hex');
     }
     setInputValue(newColorValue);
+    validation.commitValidation(parsedValue);
   };
 
   let increment = () => {
@@ -152,6 +161,7 @@ export function useColorFieldState(
   let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];
 
   return {
+    ...validation,
     validate,
     colorValue,
     inputValue,
diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts
index 25832950337..2efa229407e 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts
@@ -122,6 +122,8 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
   let isValueInvalid = validation.displayValidation.isInvalid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
+  // Commit validation the next render after the value changes so that
+  // the native input has time to update its validation state.
   let didCommit = useRef(false);
   useEffect(() => {
     if (didCommit.current) {
@@ -131,8 +133,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
   });
 
   let commitValue = (date: DateValue, time: TimeValue) => {
-    let newValue = 'timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time);
-    setValue(newValue);
+    setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
     setSelectedDate(null);
     setSelectedTime(null);
     didCommit.current = true;
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index 9d45f5d755d..05da65c4401 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -185,6 +185,8 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   let isValueInvalid = validation.displayValidation.isInvalid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
+  // Commit validation the next render after the value changes so that
+  // the native input has time to update its validation state.
   let didCommit = useRef(false);
   useEffect(() => {
     if (didCommit.current) {
diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts
index 7bf18b1034a..08ffc8dae7d 100644
--- a/packages/@react-stately/select/src/useSelectState.ts
+++ b/packages/@react-stately/select/src/useSelectState.ts
@@ -47,6 +47,8 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
     }
   });
 
+  // Commit validation the next render after the value changes so that
+  // the native input has time to update its validation state.
   useEffect(() => {
     if (didCommit.current) {
       didCommit.current = false;
diff --git a/packages/@react-types/form/src/index.d.ts b/packages/@react-types/form/src/index.d.ts
index 64260671f98..beb59fcc406 100644
--- a/packages/@react-types/form/src/index.d.ts
+++ b/packages/@react-types/form/src/index.d.ts
@@ -33,7 +33,7 @@ export interface SpectrumFormProps extends DOMProps, AriaLabelingProps, StylePro
   validationState?: ValidationState,
   /**
    * Whether to use native HTML form validation to prevent form submission
-   * when the value is missing or invalid, or mark the field as required
+   * when a field value is missing or invalid, or mark the field as required
    * or invalid via ARIA.
    * @default 'aria'
    */
diff --git a/packages/dev/test-utils/package.json b/packages/dev/test-utils/package.json
index b6389f737eb..23cea905a17 100644
--- a/packages/dev/test-utils/package.json
+++ b/packages/dev/test-utils/package.json
@@ -33,7 +33,6 @@
   },
   "dependencies": {
     "@react-aria/ssr": "^3.0.0",
-    "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0",
     "resolve": "^1.17.0"
   },

From cd96faf769da768d6fb9d2d5c9c358dc167bf651 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 21 Oct 2023 14:56:52 -0700
Subject: [PATCH 19/38] Commit validation after the next render

---
 .../@react-aria/form/src/useFormValidation.ts |  2 +-
 .../checkbox/src/useCheckboxGroupState.ts     | 22 +++-----
 .../color/src/useColorFieldState.ts           |  7 +--
 .../combobox/src/useComboBoxState.ts          |  4 +-
 .../datepicker/src/useDateFieldState.ts       |  9 +--
 .../datepicker/src/useDatePickerState.ts      | 18 ++----
 .../datepicker/src/useDateRangePickerState.ts | 18 ++----
 .../form/src/useFormValidationState.ts        | 56 ++++++++++++-------
 .../numberfield/src/useNumberFieldState.ts    |  7 +--
 .../radio/src/useRadioGroupState.ts           |  2 +-
 .../select/src/useSelectState.ts              | 14 +----
 11 files changed, 68 insertions(+), 91 deletions(-)

diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index f1c1ed5c3b8..809352f9915 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -17,7 +17,7 @@ import {Validation, ValidationResult} from '@react-types/shared';
 
 type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
-export function useFormValidation<T>(props: Validation<T>, state: FormValidationState<T>, ref: RefObject<ValidatableElement>) {
+export function useFormValidation<T>(props: Validation<T>, state: FormValidationState, ref: RefObject<ValidatableElement>) {
   let {validationBehavior} = props;
 
   useEffect(() => {
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index 0f89bf720c8..e55d6e92f8f 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -16,7 +16,7 @@ import {useControlledState} from '@react-stately/utils';
 import {useRef} from 'react';
 import {ValidationResult, ValidationState} from '@react-types/shared';
 
-export interface CheckboxGroupState extends FormValidationState<string[]> {
+export interface CheckboxGroupState extends FormValidationState {
   /** Current selected values. */
   readonly value: readonly string[],
 
@@ -85,7 +85,6 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
       }
 
       setValue(value);
-      validation.commitValidation(value);
     },
     isDisabled: props.isDisabled || false,
     isReadOnly: props.isReadOnly || false,
@@ -97,9 +96,7 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
         return;
       }
       if (!selectedValues.includes(value)) {
-        let newValue = selectedValues.concat(value);
-        setValue(newValue);
-        validation.commitValidation(newValue);
+        setValue(selectedValues.concat(value));
       }
     },
     removeValue(value) {
@@ -107,21 +104,18 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
         return;
       }
       if (selectedValues.includes(value)) {
-        let newValue = selectedValues.filter(existingValue => existingValue !== value);
-        setValue(newValue);
-        validation.commitValidation(newValue);
+        setValue(selectedValues.filter(existingValue => existingValue !== value));
       }
     },
     toggleValue(value) {
       if (props.isReadOnly || props.isDisabled) {
         return;
       }
-
-      let newValue = selectedValues.includes(value)
-        ? selectedValues.filter(existingValue => existingValue !== value)
-        : selectedValues.concat(value);
-      setValue(newValue);
-      validation.commitValidation(newValue);
+      if (selectedValues.includes(value)) {
+        setValue(selectedValues.filter(existingValue => existingValue !== value));
+      } else {
+        setValue(selectedValues.concat(value));
+      }
     },
     setInvalid(value, v) {
       let s = new Map(invalidValues.current);
diff --git a/packages/@react-stately/color/src/useColorFieldState.ts b/packages/@react-stately/color/src/useColorFieldState.ts
index ca01e50b622..9f9be79f6a9 100644
--- a/packages/@react-stately/color/src/useColorFieldState.ts
+++ b/packages/@react-stately/color/src/useColorFieldState.ts
@@ -17,7 +17,7 @@ import {useColor} from './useColor';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo, useState} from 'react';
 
-export interface ColorFieldState extends FormValidationState<Color | null> {
+export interface ColorFieldState extends FormValidationState {
   /**
    * The current text value of the input. Updated as the user types,
    * and formatted according to `formatOptions` on blur.
@@ -108,18 +108,18 @@ export function useColorFieldState(
   }, [inputValue]);
 
   let commit = () => {
+    validation.commitValidation();
+
     // Set to empty state if input value is empty
     if (!inputValue.length) {
       safelySetColorValue(null);
       setInputValue(value === undefined ? '' : colorValue.toString('hex'));
-      validation.commitValidation(null);
       return;
     }
 
     // if it failed to parse, then reset input to formatted version of current number
     if (parsedValue == null) {
       setInputValue(colorValue ? colorValue.toString('hex') : '');
-      validation.commitValidation();
       return;
     }
 
@@ -130,7 +130,6 @@ export function useColorFieldState(
       newColorValue = colorValue.toString('hex');
     }
     setInputValue(newColorValue);
-    validation.commitValidation(parsedValue);
   };
 
   let increment = () => {
diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts
index 015cddb4763..61286a4898a 100644
--- a/packages/@react-stately/combobox/src/useComboBoxState.ts
+++ b/packages/@react-stately/combobox/src/useComboBoxState.ts
@@ -11,7 +11,7 @@
  */
 
 import {Collection, CollectionStateBase, FocusStrategy, Node} from '@react-types/shared';
-import {ComboBoxProps, ComboBoxValidationValue, MenuTriggerAction} from '@react-types/combobox';
+import {ComboBoxProps, MenuTriggerAction} from '@react-types/combobox';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getChildNodes} from '@react-stately/collections';
 import {ListCollection, useSingleSelectListState} from '@react-stately/list';
@@ -20,7 +20,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useControlledState} from '@react-stately/utils';
 import {useMenuTriggerState} from '@react-stately/menu';
 
-export interface ComboBoxState<T> extends Omit<SelectState<T>, keyof FormValidationState<any>>, FormValidationState<ComboBoxValidationValue> {
+export interface ComboBoxState<T> extends SelectState<T>, FormValidationState{
   /** The current value of the combo box input. */
   inputValue: string,
   /** Sets the value of the combo box input. */
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index 22a0e63aa9c..3e18a33358c 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -39,7 +39,7 @@ export interface DateSegment {
   isEditable: boolean
 }
 
-export interface DateFieldState extends FormValidationState<DateValue> {
+export interface DateFieldState extends FormValidationState {
   /** The current field value. */
   value: DateValue,
   /** The current value, converted to a native JavaScript `Date` object.  */
@@ -377,12 +377,9 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       if (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) {
         validSegments = {...allSegments};
         setValidSegments(validSegments);
-        let newValue = displayValue.copy();
-        setValue(newValue);
-        validation.commitValidation(newValue);
-      } else {
-        validation.commitValidation();
+        setValue(displayValue.copy());
       }
+      validation.commitValidation();
     },
     clearSegment(part) {
       delete validSegments[part];
diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts
index 2efa229407e..ffd2da9c4ef 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts
@@ -16,7 +16,7 @@ import {FieldOptions, getFormatOptions, getPlaceholderTime, getValidationResult,
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {useControlledState} from '@react-stately/utils';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useMemo, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
 export interface DatePickerStateOptions<T extends DateValue> extends DatePickerProps<T> {
@@ -27,7 +27,7 @@ export interface DatePickerStateOptions<T extends DateValue> extends DatePickerP
   shouldCloseOnSelect?: boolean | (() => boolean)
 }
 
-export interface DatePickerState extends OverlayTriggerState, FormValidationState<DateValue> {
+export interface DatePickerState extends OverlayTriggerState, FormValidationState {
   /** The currently selected date. */
   value: DateValue | null,
   /** Sets the selected date. */
@@ -122,21 +122,11 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
   let isValueInvalid = validation.displayValidation.isInvalid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
-  // Commit validation the next render after the value changes so that
-  // the native input has time to update its validation state.
-  let didCommit = useRef(false);
-  useEffect(() => {
-    if (didCommit.current) {
-      didCommit.current = false;
-      validation.commitValidation();
-    }
-  });
-
   let commitValue = (date: DateValue, time: TimeValue) => {
     setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
     setSelectedDate(null);
     setSelectedTime(null);
-    didCommit.current = true;
+    validation.commitValidation();
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
@@ -150,7 +140,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
       }
     } else {
       setValue(newValue);
-      didCommit.current = true;
+      validation.commitValidation();
     }
 
     if (shouldClose) {
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index 05da65c4401..5a7b32fe631 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -17,7 +17,7 @@ import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useMemo, useState} from 'react';
 
 export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> {
   /**
@@ -28,7 +28,7 @@ export interface DateRangePickerStateOptions<T extends DateValue = DateValue> ex
 }
 
 type TimeRange = RangeValue<TimeValue>;
-export interface DateRangePickerState extends OverlayTriggerState, FormValidationState<DateRange> {
+export interface DateRangePickerState extends OverlayTriggerState, FormValidationState {
   /** The currently selected date range. */
   value: DateRange | null,
   /** Sets the selected date range. */
@@ -121,7 +121,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     });
     setSelectedDateRange(null);
     setSelectedTimeRange(null);
-    didCommit.current = true;
+    validation.commitValidation();
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
@@ -138,7 +138,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       }
     } else if (range.start && range.end) {
       setValue(range);
-      didCommit.current = true;
+      validation.commitValidation();
     } else {
       setSelectedDateRange(range);
     }
@@ -185,16 +185,6 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   let isValueInvalid = validation.displayValidation.isInvalid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
-  // Commit validation the next render after the value changes so that
-  // the native input has time to update its validation state.
-  let didCommit = useRef(false);
-  useEffect(() => {
-    if (didCommit.current) {
-      didCommit.current = false;
-      validation.commitValidation();
-    }
-  });
-
   return {
     ...validation,
     value,
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index e26f026e37a..3c691f2708c 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {createContext, useContext, useMemo, useRef, useState} from 'react';
+import {createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {Validation, ValidationErrors, ValidationFunction, ValidationResult} from '@react-types/shared';
 
 export const VALID_VALIDITY_STATE: ValidityState = {
@@ -49,18 +49,23 @@ interface FormValidationProps<T> extends Validation<T> {
   value: T
 }
 
-export interface FormValidationState<T> {
+export interface FormValidationState {
+  /** Realtime validation results, updated as the user edits the value. */
   realtimeValidation: ValidationResult,
+  /** Currently displayed validation results, updated when the user commits their changes. */
   displayValidation: ValidationResult,
+  /** Updates the current validation result. Not displayed to the user until `commitValidation` is called. */
   updateValidation(result: ValidationResult): void,
+  /** Resets the displayed validation state to valid when the user resets the form. */
   resetValidation(): void,
-  commitValidation(nextValue?: T): void
+  /** Commits the realtime validation so it is displayed to the user. */
+  commitValidation(): void
 }
 
-export function useFormValidationState<T>(props: FormValidationProps<T>): FormValidationState<T> {
+export function useFormValidationState<T>(props: FormValidationProps<T>): FormValidationState {
   // Private prop for parent components to pass state to children.
   if (props[privateValidationStateProp]) {
-    let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState<T>;
+    let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState;
     return {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation};
   }
 
@@ -68,7 +73,7 @@ export function useFormValidationState<T>(props: FormValidationProps<T>): FormVa
   return useFormValidationStateImpl(props);
 }
 
-function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValidationState<T> {
+function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValidationState {
   let {isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = 'aria'} = props;
 
   // backward compatibility.
@@ -103,28 +108,35 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
     return [];
   }, [serverErrors, name]);
 
-  let serverError: ValidationResult | null = useMemo(() => getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
+  let serverError: ValidationResult | null = useMemo(() =>
+    getValidationResult(isServerErrorCleared ? [] : serverErrorMessages),
+    [isServerErrorCleared, serverErrorMessages]
+  );
 
-  let nativeValidity = useRef(DEFAULT_VALIDATION_RESULT);
+  // Track the next validation state in a ref until commitValidation is called.
+  let nextValidation = useRef(DEFAULT_VALIDATION_RESULT);
   let [currentValidity, setCurrentValidity] = useState(DEFAULT_VALIDATION_RESULT);
+
   let lastError = useRef(DEFAULT_VALIDATION_RESULT);
-  let commitValidation = (value?: T) => {
-    if (validationBehavior === 'aria') {
+  let commitValidation = () => {
+    if (!commitQueued) {
       return;
     }
 
-    let nextClientError = clientError;
-    if (value !== undefined) {
-      nextClientError = getValidationResult(runValidate(validate, value));
-    }
-
-    let error = nextClientError || builtinValidation || nativeValidity.current;
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
     if (!isEqualValidation(error, lastError.current)) {
       lastError.current = error;
       setCurrentValidity(error);
     }
   };
 
+  let [commitQueued, setCommitQueued] = useState(false);
+  useEffect(commitValidation);
+
+  // realtimeValidation is used to update the native input element's state based on custom validation logic.
+  // displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).
+  // With validationBehavior="aria", all errors are displayed in realtime rather than on submit.
   let realtimeValidation = controlledError || serverError || clientError || builtinValidation || DEFAULT_VALIDATION_RESULT;
   let displayValidation = validationBehavior === 'native'
     ? controlledError || serverError || currentValidity
@@ -138,10 +150,12 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
       if (validationBehavior === 'aria' && !isEqualValidation(currentValidity, value)) {
         setCurrentValidity(value);
       } else {
-        nativeValidity.current = value;
+        nextValidation.current = value;
       }
     },
     resetValidation() {
+      // Update the currently displayed validation state to valid on form reset,
+      // even if the native validity says it isn't. It'll show again on the next form submit.
       let error = DEFAULT_VALIDATION_RESULT;
       if (!isEqualValidation(error, lastError.current)) {
         lastError.current = error;
@@ -150,8 +164,12 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
 
       setServerErrorCleared(true);
     },
-    commitValidation(value) {
-      commitValidation(value);
+    commitValidation() {
+      // Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
+      // Wait until after the next render to commit so that the latest value has been validated.
+      if (validationBehavior !== 'aria') {
+        setCommitQueued(true);
+      }
       setServerErrorCleared(true);
     }
   };
diff --git a/packages/@react-stately/numberfield/src/useNumberFieldState.ts b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
index acaec587d4a..27d8f69bdd0 100644
--- a/packages/@react-stately/numberfield/src/useNumberFieldState.ts
+++ b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
@@ -16,7 +16,7 @@ import {NumberFieldProps} from '@react-types/numberfield';
 import {NumberFormatter, NumberParser} from '@internationalized/number';
 import {useCallback, useMemo, useState} from 'react';
 
-export interface NumberFieldState extends FormValidationState<number> {
+export interface NumberFieldState extends FormValidationState {
   /**
    * The current text value of the input. Updated as the user types,
    * and formatted according to `formatOptions` on blur.
@@ -124,18 +124,18 @@ export function useNumberFieldState(
 
   let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);
   let commit = () => {
+    validation.commitValidation();
+
     // Set to empty state if input value is empty
     if (!inputValue.length) {
       setNumberValue(NaN);
       setInputValue(value === undefined ? '' : format(numberValue));
-      validation.commitValidation(NaN);
       return;
     }
 
     // if it failed to parse, then reset input to formatted version of current number
     if (isNaN(parsedValue)) {
       setInputValue(format(numberValue));
-      validation.commitValidation();
       return;
     }
 
@@ -149,7 +149,6 @@ export function useNumberFieldState(
 
     clampedValue = numberParser.parse(format(clampedValue));
     setNumberValue(clampedValue);
-    validation.commitValidation(clampedValue);
 
     // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
     setInputValue(format(value === undefined ? clampedValue : numberValue));
diff --git a/packages/@react-stately/radio/src/useRadioGroupState.ts b/packages/@react-stately/radio/src/useRadioGroupState.ts
index cad35a7ba77..56efb4c7c1f 100644
--- a/packages/@react-stately/radio/src/useRadioGroupState.ts
+++ b/packages/@react-stately/radio/src/useRadioGroupState.ts
@@ -16,7 +16,7 @@ import {useControlledState} from '@react-stately/utils';
 import {useMemo, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
-export interface RadioGroupState extends FormValidationState<string | null> {
+export interface RadioGroupState extends FormValidationState {
   /**
    * The name for the group, used for native form submission.
    * @deprecated
diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts
index 08ffc8dae7d..5de2f9033f8 100644
--- a/packages/@react-stately/select/src/useSelectState.ts
+++ b/packages/@react-stately/select/src/useSelectState.ts
@@ -12,14 +12,14 @@
 
 import {CollectionStateBase} from '@react-types/shared';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
-import {Key, useEffect, useRef, useState} from 'react';
 import {MenuTriggerState, useMenuTriggerState} from '@react-stately/menu';
 import {SelectProps} from '@react-types/select';
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
+import {useState} from 'react';
 
 export interface SelectStateOptions<T> extends Omit<SelectProps<T>, 'children'>, CollectionStateBase<T> {}
 
-export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerState, FormValidationState<Key> {
+export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerState, FormValidationState {
   /** Whether the select is currently focused. */
   readonly isFocused: boolean,
 
@@ -34,7 +34,6 @@ export interface SelectState<T> extends SingleSelectListState<T>, MenuTriggerSta
  */
 export function useSelectState<T extends object>(props: SelectStateOptions<T>): SelectState<T>  {
   let triggerState = useMenuTriggerState(props);
-  let didCommit = useRef(false);
   let listState = useSingleSelectListState({
     ...props,
     onSelectionChange: (key) => {
@@ -43,15 +42,6 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
       }
 
       triggerState.close();
-      didCommit.current = true;
-    }
-  });
-
-  // Commit validation the next render after the value changes so that
-  // the native input has time to update its validation state.
-  useEffect(() => {
-    if (didCommit.current) {
-      didCommit.current = false;
       validationState.commitValidation();
     }
   });

From a602c7df80488fdff388dd0d2dc9d6b6f05d27d5 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 11:06:33 -0700
Subject: [PATCH 20/38] SearchAutocomplete

---
 .../autocomplete/src/useSearchAutocomplete.ts |  29 +-
 .../@react-spectrum/autocomplete/package.json |   2 +
 .../src/MobileSearchAutocomplete.tsx          |  54 +-
 .../autocomplete/src/SearchAutocomplete.tsx   |  16 +-
 .../test/SearchAutocomplete.test.js           | 514 ++++++++++++++++++
 .../form/stories/Form.stories.tsx             |   7 +
 .../@react-types/autocomplete/src/index.d.ts  |   6 +-
 7 files changed, 605 insertions(+), 23 deletions(-)

diff --git a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts
index 66088e0502f..37aba5bb092 100644
--- a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts
+++ b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts
@@ -14,13 +14,13 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
 import {AriaSearchAutocompleteProps} from '@react-types/autocomplete';
 import {ComboBoxState} from '@react-stately/combobox';
-import {DOMAttributes, KeyboardDelegate} from '@react-types/shared';
+import {DOMAttributes, KeyboardDelegate, ValidationResult} from '@react-types/shared';
 import {InputHTMLAttributes, RefObject} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {useComboBox} from '@react-aria/combobox';
 import {useSearchField} from '@react-aria/searchfield';
 
-export interface SearchAutocompleteAria<T> {
+export interface SearchAutocompleteAria<T> extends ValidationResult {
   /** Props for the label element. */
   labelProps: DOMAttributes,
   /** Props for the search input element. */
@@ -61,11 +61,16 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     onSubmit = () => {},
     onClear,
     onKeyDown,
-    onKeyUp
+    onKeyUp,
+    isInvalid,
+    validationState,
+    validationBehavior,
+    isRequired,
+    ...otherProps
   } = props;
 
   let {inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
-    ...props,
+    ...otherProps,
     value: state.inputValue,
     onChange: state.setInputValue,
     autoComplete: 'off',
@@ -87,11 +92,11 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     value: state.inputValue,
     setValue: state.setInputValue
   }, inputRef);
-  
 
-  let {listBoxProps, labelProps, inputProps: comboBoxInputProps} = useComboBox(
+
+  let {listBoxProps, labelProps, inputProps: comboBoxInputProps, ...validation} = useComboBox(
     {
-      ...props,
+      ...otherProps,
       keyboardDelegate,
       popoverRef,
       listBoxRef,
@@ -100,7 +105,12 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
       onFocusChange: undefined,
       onBlur: undefined,
       onKeyDown: undefined,
-      onKeyUp: undefined
+      onKeyUp: undefined,
+      isInvalid,
+      validationState,
+      validationBehavior,
+      isRequired,
+      validate: undefined
     },
     state
   );
@@ -111,6 +121,7 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     listBoxProps,
     clearButtonProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    ...validation
   };
 }
diff --git a/packages/@react-spectrum/autocomplete/package.json b/packages/@react-spectrum/autocomplete/package.json
index d2e68c24527..8165cc0f25b 100644
--- a/packages/@react-spectrum/autocomplete/package.json
+++ b/packages/@react-spectrum/autocomplete/package.json
@@ -40,6 +40,7 @@
     "@react-aria/button": "^3.8.4",
     "@react-aria/dialog": "^3.5.7",
     "@react-aria/focus": "^3.14.3",
+    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.4",
     "@react-aria/interactions": "^3.19.1",
     "@react-aria/label": "^3.7.2",
@@ -47,6 +48,7 @@
     "@react-aria/searchfield": "^3.5.7",
     "@react-aria/utils": "^3.21.1",
     "@react-spectrum/button": "^3.14.1",
+    "@react-spectrum/form": "^3.6.7",
     "@react-spectrum/label": "^3.15.1",
     "@react-spectrum/listbox": "^3.12.1",
     "@react-spectrum/overlays": "^5.5.1",
diff --git a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
index 93ddad650ad..d0ce437ea98 100644
--- a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
@@ -24,10 +24,11 @@ import {focusSafely, FocusScope, useFocusRing} from '@react-aria/focus';
 import intlMessages from '../intl/*.json';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
-import {mergeProps, useId} from '@react-aria/utils';
+import {mergeProps, useFormReset, useId} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
 import React, {
   HTMLAttributes,
+  InputHTMLAttributes,
   ReactElement,
   ReactNode,
   useCallback,
@@ -45,8 +46,9 @@ import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.
 import {Tray} from '@react-spectrum/overlays';
 import {useButton} from '@react-aria/button';
 import {useDialog} from '@react-aria/dialog';
+import {useField} from '@react-aria/label';
 import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useLabel} from '@react-aria/label';
+import {useFormValidation} from '@react-aria/form';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useSearchAutocomplete} from '@react-aria/autocomplete';
 
@@ -56,7 +58,10 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
   let {
     isQuiet,
     isDisabled,
-    validationState,
+    isRequired,
+    validationBehavior,
+    validate,
+    name,
     isReadOnly,
     onSubmit = () => {}
   } = props;
@@ -73,16 +78,25 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
     allowsCustomValue: true,
     onSelectionChange: (key) => key !== null && onSubmit(null, key),
     selectedKey: undefined,
-    defaultSelectedKey: undefined
+    defaultSelectedKey: undefined,
+    validate: useCallback(v => validate?.(v.inputValue), [validate])
   });
 
   let buttonRef = useRef<HTMLDivElement>(null);
   let domRef = useFocusableRef(ref, buttonRef);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
-  let {labelProps, fieldProps} = useLabel({
+  let inputRef = useRef<HTMLInputElement>(null);
+  useFormValidation(props, state, inputRef);
+  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let validationState = props.validationState || (isInvalid ? 'invalid' : null);
+  let errorMessage = props.errorMessage ?? errors.join(' ');
+
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage
   });
 
   // Focus the button and show focus ring when clicking on the label
@@ -93,11 +107,34 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
     }
   };
 
+  let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+    type: 'hidden',
+    name,
+    value: state.inputValue
+  };
+
+  if (validationBehavior === 'native') {
+    // Use a hidden <input type="text"> rather than <input type="hidden">
+    // so that an empty value blocks HTML form submission when the field is required.
+    inputProps.type = 'text';
+    inputProps.hidden = true;
+    inputProps.required = isRequired;
+    // Ignore react warning.
+    inputProps.onChange = () => {};
+  }
+
+  useFormReset(inputRef, inputProps.value, state.setInputValue);
+
   return (
     <>
       <Field
         {...props}
         labelProps={labelProps}
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+        isInvalid={isInvalid}
+        errors={errors}
+        validationDetails={validationDetails}
         elementType="span"
         ref={domRef}
         includeNecessityIndicatorInAccessibilityName>
@@ -115,6 +152,7 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
           {state.inputValue || props.placeholder || ''}
         </SearchAutocompleteButton>
       </Field>
+      <input {...inputProps} ref={inputRef} />
       <Tray state={state} isFixedHeight {...overlayProps}>
         <SearchAutocompleteTray
           {...props}
@@ -362,7 +400,9 @@ function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
       keyboardDelegate: layout,
       popoverRef: popoverRef,
       listBoxRef,
-      inputRef
+      inputRef,
+      // Handled outside the tray.
+      name: undefined
     },
     state
   );
diff --git a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
index 2c761e9e83e..207080300f4 100644
--- a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
@@ -41,12 +41,14 @@ import {TextFieldBase} from '@react-spectrum/textfield';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSearchAutocomplete} from '@react-aria/autocomplete';
 
 function SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
 
   if (props.placeholder) {
     console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
@@ -71,7 +73,8 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
     isQuiet,
     loadingState,
     onLoadMore,
-    onSubmit = () => {}
+    onSubmit = () => {},
+    validate
   } = props;
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
@@ -91,12 +94,13 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
       allowsCustomValue: true,
       onSelectionChange: (key) => key !== null && onSubmit(null, key),
       selectedKey: undefined,
-      defaultSelectedKey: undefined
+      defaultSelectedKey: undefined,
+      validate: useCallback(v => validate?.(v.inputValue), [validate])
     }
   );
   let layout = useListBoxLayout(state, loadingState === 'loadingMore');
 
-  let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchAutocomplete(
+  let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useSearchAutocomplete(
     {
       ...props,
       keyboardDelegate: layout,
@@ -138,6 +142,9 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
         descriptionProps={descriptionProps}
         errorMessageProps={errorMessageProps}
         labelProps={labelProps}
+        isInvalid={isInvalid}
+        errors={errors}
+        validationDetails={validationDetails}
         ref={domRef}>
         <SearchAutocompleteInput
           {...props}
@@ -145,7 +152,8 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
           loadingState={loadingState}
           inputProps={inputProps}
           inputRef={inputRef}
-          clearButtonProps={clearButtonProps} />
+          clearButtonProps={clearButtonProps}
+          validationState={props.validationState || (isInvalid ? 'invalid' : null)} />
       </Field>
       <Popover
         state={state}
diff --git a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
index fb59c3c270d..0dfee473a0a 100644
--- a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
+++ b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
@@ -15,6 +15,7 @@ import {act, fireEvent, pointerMap, render, screen, triggerPress, waitFor, withi
 import {announce} from '@react-aria/live-announcer';
 import {Button} from '@react-spectrum/button';
 import Filter from '@spectrum-icons/workflow/Filter';
+import {Form} from '@react-spectrum/form';
 import {Item, SearchAutocomplete, Section} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -2443,6 +2444,519 @@ describe('SearchAutocomplete', function () {
     });
   });
 
+  describe('forms', () => {
+    describe('desktop', () => {
+      beforeAll(function () {
+        jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
+      });
+
+      afterAll(function () {
+        jest.clearAllMocks();
+      });
+
+      it('should support form reset', async () => {
+        let {getByRole, getByTestId} = render(
+          <form>
+            <ExampleSearchAutocomplete name="test" />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+
+        let combobox = getByRole('combobox');
+        expect(combobox).toHaveAttribute('name', 'test');
+        await user.tab();
+        await user.keyboard('Tw');
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        let listbox = getByRole('listbox');
+        let items = within(listbox).getAllByRole('option');
+        await user.click(items[0]);
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        expect(combobox).toHaveValue('Two');
+
+        let button = getByTestId('reset');
+        await user.click(button);
+        expect(combobox).toHaveValue('');
+      });
+
+      describe('validation', () => {
+        describe('validationBehavior=native', () => {
+          it('supports isRequired', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete data-testid="input" isRequired validationBehavior="native"  />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('required');
+            expect(input).not.toHaveAttribute('aria-required');
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(false);
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+            await user.tab();
+            await user.keyboard('Tw');
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).toHaveAttribute('aria-describedby');
+
+            await user.tab();
+            expect(input).not.toHaveAttribute('aria-describedby');
+          });
+
+          it('supports validate function', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete data-testid="input" defaultInputValue="Two" validationBehavior="native" validate={v => v === 'Two' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(false);
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.tab();
+            await user.keyboard('On');
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).toHaveAttribute('aria-describedby');
+
+            await user.tab();
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports server validation', async () => {
+            function Test() {
+              let [serverErrors, setServerErrors] = React.useState({});
+              let onSubmit = e => {
+                e.preventDefault();
+                setServerErrors({
+                  value: 'Invalid value.'
+                });
+              };
+
+              return (
+                <Provider theme={theme}>
+                  <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                    <ExampleSearchAutocomplete data-testid="input" name="value" validationBehavior="native" />
+                    <Button type="submit" data-testid="submit">Submit</Button>
+                  </Form>
+                </Provider>
+              );
+            }
+
+            let {getByTestId, getByRole} = render(<Test />);
+
+            let input = getByTestId('input');
+            expect(input).not.toHaveAttribute('aria-describedby');
+
+            await user.click(getByTestId('submit'));
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value.');
+            expect(input.validity.valid).toBe(false);
+
+            await user.tab({shift: true});
+            await user.keyboard('Tw');
+
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).toHaveAttribute('aria-describedby');
+            await user.tab();
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports customizing native error messages', async () => {
+            let {getByTestId} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete data-testid="input" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+          });
+        });
+
+        describe('validationBehavior=aria', () => {
+          it('supports validate function', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete data-testid="input" defaultInputValue="Two" validate={v => v === 'Two' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+            expect(input.validity.valid).toBe(true);
+
+            await user.tab();
+            await user.keyboard('On');
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input).not.toHaveAttribute('aria-invalid');
+          });
+
+          it('supports server validation', async () => {
+            let {getByTestId, getByRole} = render(
+              <Provider theme={theme}>
+                <Form validationErrors={{value: 'Invalid value'}}>
+                  <ExampleSearchAutocomplete data-testid="input" name="value" />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.tab();
+            await user.keyboard('Tw');
+
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            await user.tab();
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input).not.toHaveAttribute('aria-invalid');
+          });
+        });
+      });
+    });
+
+    describe('mobile', () => {
+      beforeEach(() => {
+        jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
+      });
+
+      afterEach(() => {
+        act(() => jest.runAllTimers());
+        jest.clearAllMocks();
+      });
+
+      it('should support form reset', async () => {
+        let {getByRole, getAllByRole, getByTestId} = render(
+          <form>
+            <ExampleSearchAutocomplete name="test" />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+
+        let button = getAllByRole('button')[0];
+
+        await user.click(button);
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        let tray = getByTestId('tray');
+        expect(tray).toBeVisible();
+        let combobox = getByRole('searchbox');
+        expect(combobox).not.toHaveAttribute('name');
+        let listbox = getByRole('listbox');
+
+        let items = within(listbox).getAllByRole('option');
+        await user.click(items[0]);
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        let input = document.querySelector('input[name=test]');
+        expect(input).toHaveValue('One');
+
+        let reset = getByTestId('reset');
+        await user.click(reset);
+        expect(input).toHaveValue('');
+      });
+
+      describe('validation', () => {
+        describe('validationBehavior=native', () => {
+          it('supports isRequired', async () => {
+            let {getByTestId, getByRole, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete name="test" isRequired validationBehavior="native"  />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=test]');
+            expect(input).toHaveAttribute('required');
+            expect(input).not.toHaveAttribute('aria-required');
+            expect(input.validity.valid).toBe(false);
+
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+          });
+
+          it('supports validate function', async () => {
+            let {getByTestId, getByRole, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete name="test" defaultInputValue="Two" validationBehavior="native" validate={v => v === 'Two' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=test]');
+            expect(input.validity.valid).toBe(false);
+
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports server validation', async () => {
+            function Test() {
+              let [serverErrors, setServerErrors] = React.useState({});
+              let onSubmit = e => {
+                e.preventDefault();
+                setServerErrors({
+                  value: 'Invalid value.'
+                });
+              };
+
+              return (
+                <Provider theme={theme}>
+                  <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+                    <ExampleSearchAutocomplete name="value" validationBehavior="native" />
+                    <Button type="submit" data-testid="submit">Submit</Button>
+                  </Form>
+                </Provider>
+              );
+            }
+
+            let {getByTestId, getByRole, getAllByRole} = render(<Test />);
+
+            let input = document.querySelector('input[name=value]');
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            await user.click(getByTestId('submit'));
+
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value.');
+            expect(input.validity.valid).toBe(false);
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports customizing native error messages', async () => {
+            let {getByTestId, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete name="test" isRequired validationBehavior="native" errorMessage={e => e.validationDetails.valueMissing ? 'Please enter a value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let button = getAllByRole('button')[0];
+            expect(button).not.toHaveAttribute('aria-describedby');
+
+            act(() => getByTestId('form').checkValidity());
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
+          });
+        });
+
+        describe('validationBehavior=aria', () => {
+          it('supports validate function', async () => {
+            let {getAllByRole, getByRole} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete name="test" defaultInputValue="Two" validate={v => v === 'Two' ? 'Invalid value' : null} />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=test]');
+            expect(input.validity.valid).toBe(true);
+
+            let button = getAllByRole('button')[0];
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+
+          it('supports server validation', async () => {
+            let {getByRole, getAllByRole} = render(
+              <Provider theme={theme}>
+                <Form validationErrors={{value: 'Invalid value'}}>
+                  <ExampleSearchAutocomplete name="value" />
+                </Form>
+              </Provider>
+            );
+
+            let input = document.querySelector('input[name=value]');
+            let button = getAllByRole('button')[0];
+            expect(button).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+
+            await user.click(button);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            let listbox = getByRole('listbox');
+            let items = within(listbox).getAllByRole('option');
+            await user.click(items[0]);
+            act(() => {
+              jest.runAllTimers();
+            });
+
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(true);
+          });
+        });
+      });
+    });
+  });
+
   describe('accessibility', function () {
     beforeAll(function () {
       jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index a32ae5837be..e52d2982c75 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -31,6 +31,7 @@ import {Item, Picker} from '@react-spectrum/picker';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React, {Key, useEffect, useState} from 'react';
+import {SearchAutocomplete} from '@react-spectrum/autocomplete';
 import {SearchField} from '@react-spectrum/searchfield';
 import {Slider} from '@react-spectrum/slider';
 import {StatusLight} from '@react-spectrum/statuslight';
@@ -414,6 +415,12 @@ function render(props: any = {}) {
         <Item key="kangaroo">Kangaroo</Item>
         <Item key="snake">Snake</Item>
       </ComboBox>
+      <SearchAutocomplete label="Search Animals">
+        <Item key="red panda">Red Panda</Item>
+        <Item key="aardvark">Aardvark</Item>
+        <Item key="kangaroo">Kangaroo</Item>
+        <Item key="snake">Snake</Item>
+      </SearchAutocomplete>
       <NumberField label="Years lived there" />
       <Picker label="State" items={states}>
         {item => <Item key={item.abbr}>{item.name}</Item>}
diff --git a/packages/@react-types/autocomplete/src/index.d.ts b/packages/@react-types/autocomplete/src/index.d.ts
index 858eef1b95f..4f8a5e1ecdd 100644
--- a/packages/@react-types/autocomplete/src/index.d.ts
+++ b/packages/@react-types/autocomplete/src/index.d.ts
@@ -11,9 +11,9 @@
  */
 
 import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, LoadingState, SpectrumFieldValidation, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps} from '@react-types/shared';
+import {AriaSearchFieldProps, SearchFieldProps} from '@react-types/searchfield';
 import {Key, ReactElement} from 'react';
 import {MenuTriggerAction} from '@react-types/combobox';
-import {SearchFieldProps} from '@react-types/searchfield';
 
 export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<SearchFieldProps, 'onSubmit' | 'defaultValue' | 'value'> {
   /** The list of SearchAutocomplete items (uncontrolled). */
@@ -44,9 +44,9 @@ export interface SearchAutocompleteProps<T> extends CollectionBase<T>, Omit<Sear
   onSubmit?: (value: string | null, key: Key | null) => void
 }
 
-export interface AriaSearchAutocompleteProps<T> extends SearchAutocompleteProps<T>, DOMProps, AriaLabelingProps {}
+export interface AriaSearchAutocompleteProps<T> extends SearchAutocompleteProps<T>, Omit<AriaSearchFieldProps, 'onSubmit' | 'defaultValue' | 'value'>, DOMProps, AriaLabelingProps {}
 
-export interface SpectrumSearchAutocompleteProps<T> extends SpectrumTextInputBase, Omit<AriaSearchAutocompleteProps<T>, 'menuTrigger' | 'isInvalid' | 'validationState'>, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Omit<AsyncLoadable, 'isLoading'> {
+export interface SpectrumSearchAutocompleteProps<T> extends SpectrumTextInputBase, Omit<AriaSearchAutocompleteProps<T>, 'menuTrigger' | 'isInvalid' | 'validationState' | 'validate'>, SpectrumFieldValidation<string>, SpectrumLabelableProps, StyleProps, Omit<AsyncLoadable, 'isLoading'> {
   /**
    * The interaction required to display the SearchAutocomplete menu. Note that this prop has no effect on the mobile SearchAutocomplete experience.
    * @default 'input'

From 2174ea273261ae050a99b905054b115b9c608b91 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 11:29:40 -0700
Subject: [PATCH 21/38] Fix typescript

---
 .../autocomplete/src/useSearchAutocomplete.ts          |  4 +---
 .../@react-aria/interactions/src/useInteractOutside.ts | 10 +++++-----
 packages/@react-aria/label/src/useField.ts             |  2 +-
 packages/@react-aria/overlays/src/useOverlay.ts        |  6 +++---
 .../autocomplete/src/MobileSearchAutocomplete.tsx      |  4 ++--
 .../autocomplete/src/SearchAutocomplete.tsx            |  2 +-
 packages/@react-spectrum/label/src/Field.tsx           |  4 ++--
 .../@react-spectrum/searchfield/src/SearchField.tsx    |  2 +-
 packages/@react-spectrum/textfield/src/TextArea.tsx    |  2 +-
 .../@react-stately/radio/src/useRadioGroupState.ts     |  4 ++--
 .../@react-stately/utils/src/useControlledState.ts     |  4 ++--
 .../utils/test/useControlledState.test.tsx             |  2 +-
 12 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts
index 37aba5bb092..a7aa5869053 100644
--- a/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts
+++ b/packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts
@@ -69,7 +69,7 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     ...otherProps
   } = props;
 
-  let {inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
+  let {inputProps, clearButtonProps} = useSearchField({
     ...otherProps,
     value: state.inputValue,
     onChange: state.setInputValue,
@@ -120,8 +120,6 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     inputProps: mergeProps(inputProps, comboBoxInputProps),
     listBoxProps,
     clearButtonProps,
-    descriptionProps,
-    errorMessageProps,
     ...validation
   };
 }
diff --git a/packages/@react-aria/interactions/src/useInteractOutside.ts b/packages/@react-aria/interactions/src/useInteractOutside.ts
index 2adb3cc81d2..33c242839e4 100644
--- a/packages/@react-aria/interactions/src/useInteractOutside.ts
+++ b/packages/@react-aria/interactions/src/useInteractOutside.ts
@@ -15,13 +15,13 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {RefObject, SyntheticEvent, useEffect, useRef} from 'react';
+import {RefObject, useEffect, useRef} from 'react';
 import {useEffectEvent} from '@react-aria/utils';
 
 export interface InteractOutsideProps {
   ref: RefObject<Element>,
-  onInteractOutside?: (e: SyntheticEvent) => void,
-  onInteractOutsideStart?: (e: SyntheticEvent) => void,
+  onInteractOutside?: (e: PointerEvent) => void,
+  onInteractOutsideStart?: (e: PointerEvent) => void,
   /** Whether the interact outside events should be disabled. */
   isDisabled?: boolean
 }
@@ -37,7 +37,7 @@ export function useInteractOutside(props: InteractOutsideProps) {
     ignoreEmulatedMouseEvents: false
   });
 
-  let onPointerDown = useEffectEvent((e: SyntheticEvent) => {
+  let onPointerDown = useEffectEvent((e: PointerEvent) => {
     if (onInteractOutside && isValidEvent(e, ref)) {
       if (onInteractOutsideStart) {
         onInteractOutsideStart(e);
@@ -46,7 +46,7 @@ export function useInteractOutside(props: InteractOutsideProps) {
     }
   });
 
-  let triggerInteractOutside = useEffectEvent((e: SyntheticEvent) => {
+  let triggerInteractOutside = useEffectEvent((e: PointerEvent) => {
     if (onInteractOutside) {
       onInteractOutside(e);
     }
diff --git a/packages/@react-aria/label/src/useField.ts b/packages/@react-aria/label/src/useField.ts
index 5cc1c338629..6f27e5f5edd 100644
--- a/packages/@react-aria/label/src/useField.ts
+++ b/packages/@react-aria/label/src/useField.ts
@@ -14,7 +14,7 @@ import {DOMAttributes, HelpTextProps, Validation} from '@react-types/shared';
 import {LabelAria, LabelAriaProps, useLabel} from './useLabel';
 import {mergeProps, useSlotId} from '@react-aria/utils';
 
-export interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation, 'isRequired'> {}
+export interface AriaFieldProps extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, 'isRequired'> {}
 
 export interface FieldAria extends LabelAria {
   /** Props for the description element, if any. */
diff --git a/packages/@react-aria/overlays/src/useOverlay.ts b/packages/@react-aria/overlays/src/useOverlay.ts
index 920cb77b6a5..edd3bfbfcce 100644
--- a/packages/@react-aria/overlays/src/useOverlay.ts
+++ b/packages/@react-aria/overlays/src/useOverlay.ts
@@ -12,7 +12,7 @@
 
 import {DOMAttributes} from '@react-types/shared';
 import {isElementInChildOfActiveScope} from '@react-aria/focus';
-import {RefObject, SyntheticEvent, useEffect} from 'react';
+import {RefObject, useEffect} from 'react';
 import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
 
 export interface AriaOverlayProps {
@@ -91,7 +91,7 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): Ov
     }
   };
 
-  let onInteractOutsideStart = (e: SyntheticEvent<Element>) => {
+  let onInteractOutsideStart = (e: PointerEvent) => {
     if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
@@ -100,7 +100,7 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): Ov
     }
   };
 
-  let onInteractOutside = (e: SyntheticEvent<Element>) => {
+  let onInteractOutside = (e: PointerEvent) => {
     if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
diff --git a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
index d0ce437ea98..e1f8e7da500 100644
--- a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
@@ -89,7 +89,7 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
   let inputRef = useRef<HTMLInputElement>(null);
   useFormValidation(props, state, inputRef);
   let {isInvalid, errors, validationDetails} = state.displayValidation;
-  let validationState = props.validationState || (isInvalid ? 'invalid' : null);
+  let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
   let errorMessage = props.errorMessage ?? errors.join(' ');
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
@@ -123,7 +123,7 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
     inputProps.onChange = () => {};
   }
 
-  useFormReset(inputRef, inputProps.value, state.setInputValue);
+  useFormReset(inputRef, state.inputValue, state.setInputValue);
 
   return (
     <>
diff --git a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
index 207080300f4..93e3dd02180 100644
--- a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
@@ -153,7 +153,7 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
           inputProps={inputProps}
           inputRef={inputRef}
           clearButtonProps={clearButtonProps}
-          validationState={props.validationState || (isInvalid ? 'invalid' : null)} />
+          validationState={props.validationState || (isInvalid ? 'invalid' : undefined)} />
       </Field>
       <Popover
         state={state}
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
index e60b92e2d95..dbc8d0dade3 100644
--- a/packages/@react-spectrum/label/src/Field.tsx
+++ b/packages/@react-spectrum/label/src/Field.tsx
@@ -17,7 +17,7 @@ import {Label} from './Label';
 import {LabelPosition} from '@react-types/shared';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
 import {mergeProps, useId} from '@react-aria/utils';
-import React, {Ref, RefObject} from 'react';
+import React, {ReactNode, Ref, RefObject} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
 import {useFormProps} from '@react-spectrum/form';
 
@@ -52,7 +52,7 @@ function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
-  let errorMessageString = null;
+  let errorMessageString: ReactNode = null;
   if (typeof errorMessage === 'function') {
     errorMessageString = isInvalid != null && errors != null && validationDetails != null
       ? errorMessage({
diff --git a/packages/@react-spectrum/searchfield/src/SearchField.tsx b/packages/@react-spectrum/searchfield/src/SearchField.tsx
index e4b984b2fa5..1bbb3463162 100644
--- a/packages/@react-spectrum/searchfield/src/SearchField.tsx
+++ b/packages/@react-spectrum/searchfield/src/SearchField.tsx
@@ -60,7 +60,7 @@ function SearchField(props: SpectrumSearchFieldProps, ref: Ref<TextFieldRef>) {
       isDisabled={isDisabled} />
   );
 
-  let validationState = props.validationState || (result.isInvalid ? 'invalid' : null);
+  let validationState = props.validationState || (result.isInvalid ? 'invalid' : undefined);
 
   return (
     <TextFieldBase
diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx
index 0a391539bb3..bff44f2f23b 100644
--- a/packages/@react-spectrum/textfield/src/TextArea.tsx
+++ b/packages/@react-spectrum/textfield/src/TextArea.tsx
@@ -32,7 +32,7 @@ function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   } = props;
 
   // not in stately because this is so we know when to re-measure, which is a spectrum design
-  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});
+  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});
   let inputRef = useRef<HTMLTextAreaElement>(null);
 
   let onHeightChange = useCallback(() => {
diff --git a/packages/@react-stately/radio/src/useRadioGroupState.ts b/packages/@react-stately/radio/src/useRadioGroupState.ts
index 56efb4c7c1f..b1eeba23eba 100644
--- a/packages/@react-stately/radio/src/useRadioGroupState.ts
+++ b/packages/@react-stately/radio/src/useRadioGroupState.ts
@@ -43,7 +43,7 @@ export interface RadioGroupState extends FormValidationState {
   readonly isInvalid: boolean,
 
   /** The currently selected value. */
-  readonly selectedValue: string | null | undefined,
+  readonly selectedValue: string | null,
 
   /** Sets the selected value. */
   setSelectedValue(value: string): void,
@@ -65,7 +65,7 @@ let i = 0;
 export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
   // Preserved here for backward compatibility. React Aria now generates the name instead of stately.
   let name = useMemo(() => props.name || `radio-group-${instance}-${++i}`, [props.name]);
-  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue, props.onChange);
+  let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue ?? null, props.onChange);
   let [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
 
   let setSelectedValue = (value) => {
diff --git a/packages/@react-stately/utils/src/useControlledState.ts b/packages/@react-stately/utils/src/useControlledState.ts
index 800d174733c..ab8b2bbb12e 100644
--- a/packages/@react-stately/utils/src/useControlledState.ts
+++ b/packages/@react-stately/utils/src/useControlledState.ts
@@ -12,8 +12,8 @@
 
 import {useCallback, useEffect, useRef, useState} from 'react';
 
-export function useControlledState<T, C = T>(value: T, defaultValue: T | undefined, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void];
-export function useControlledState<T, C = T>(value: T | undefined, defaultValue: T, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void];
+export function useControlledState<T, C = T>(value: Exclude<T, undefined>, defaultValue: Exclude<T, undefined> | undefined, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void];
+export function useControlledState<T, C = T>(value: Exclude<T, undefined> | undefined, defaultValue: Exclude<T, undefined>, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void];
 export function useControlledState<T, C = T>(value: T, defaultValue: T, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void] {
   let [stateValue, setStateValue] = useState(value || defaultValue);
 
diff --git a/packages/@react-stately/utils/test/useControlledState.test.tsx b/packages/@react-stately/utils/test/useControlledState.test.tsx
index 02d5d4fb8f2..b8524bd6425 100644
--- a/packages/@react-stately/utils/test/useControlledState.test.tsx
+++ b/packages/@react-stately/utils/test/useControlledState.test.tsx
@@ -54,7 +54,7 @@ describe('useControlledState tests', function () {
 
   it('using NaN will only trigger onChange once', () => {
     let onChangeSpy = jest.fn();
-    let {result} = renderHook(() => useControlledState<number | undefined>(undefined, undefined, onChangeSpy));
+    let {result} = renderHook(() => useControlledState<number | null>(undefined, null, onChangeSpy));
     let [value, setValue] = result.current;
     expect(value).not.toBeDefined();
     expect(onChangeSpy).not.toHaveBeenCalled();

From 31b68abc40221542d3b977f68ae6782bbf060797 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 11:40:19 -0700
Subject: [PATCH 22/38] Improve stories for testing

---
 .../form/stories/Form.stories.tsx             | 71 ++++++++++---------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index e52d2982c75..18d18619b96 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -404,31 +404,31 @@ WithTranslations.story = {
 function render(props: any = {}) {
   return (
     <Form {...props}>
-      <CheckboxGroup label="Pets" validate={v => v.includes('dogs') ? 'No dogs' : null}>
+      <CheckboxGroup label="Pets" name="pets" validate={v => v.includes('dogs') ? 'No dogs' : null}>
         <Checkbox value="dogs">Dogs</Checkbox>
         <Checkbox value="cats">Cats</Checkbox>
         <Checkbox value="dragons">Dragons</Checkbox>
       </CheckboxGroup>
-      <ComboBox label="More Animals">
+      <ComboBox label="More Animals" name="combobox">
         <Item key="red panda">Red Panda</Item>
         <Item key="aardvark">Aardvark</Item>
         <Item key="kangaroo">Kangaroo</Item>
         <Item key="snake">Snake</Item>
       </ComboBox>
-      <SearchAutocomplete label="Search Animals">
+      <SearchAutocomplete label="Search Animals" name="searchAutocomplete">
         <Item key="red panda">Red Panda</Item>
         <Item key="aardvark">Aardvark</Item>
         <Item key="kangaroo">Kangaroo</Item>
         <Item key="snake">Snake</Item>
       </SearchAutocomplete>
-      <NumberField label="Years lived there" />
-      <Picker label="State" items={states}>
+      <NumberField label="Years lived there" name="years" />
+      <Picker label="State" items={states} name="state">
         {item => <Item key={item.abbr}>{item.name}</Item>}
       </Picker>
-      <Picker label="Country" items={countries}>
+      <Picker label="Country" items={countries} name="country">
         {item => <Item key={item.name}>{item.name}</Item>}
       </Picker>
-      <Picker label="Favorite color" description="Select any color you like." errorMessage="Please select a nicer color.">
+      <Picker label="Favorite color" name="color" description="Select any color you like." errorMessage="Please select a nicer color.">
         <Item>Red</Item>
         <Item>Orange</Item>
         <Item>Yellow</Item>
@@ -441,18 +441,19 @@ function render(props: any = {}) {
         <Radio value="cats">Cats</Radio>
         <Radio value="dragons">Dragons</Radio>
       </RadioGroup>
-      <SearchField label="Search" />
-      <Switch>Low power mode</Switch>
-      <TextArea label="Comments" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
+      <SearchField label="Search" name="search" />
+      <Switch name="switch">Low power mode</Switch>
+      <TextArea name="comments" label="Comments" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
       <TextField
         label="City"
+        name="city"
         contextualHelp={(
           <ContextualHelp>
             <Heading>What is a segment?</Heading>
             <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
           </ContextualHelp>
         )} />
-      <TextField label="Zip code" description="Please enter a five-digit zip code." pattern="[0-9]{5}" />
+      <TextField label="Zip code" description="Please enter a five-digit zip code." pattern="[0-9]{5}" name="zip" />
       <TagGroup label="Favorite tags" description="Select your favorite tags." errorMessage="Incorrect combination of tags.">
         <Item key="1">Cool Tag 1</Item>
         <Item key="2">Cool Tag 2</Item>
@@ -461,12 +462,12 @@ function render(props: any = {}) {
         <Item key="5">Cool Tag 5</Item>
         <Item key="6">Cool Tag 6</Item>
       </TagGroup>
-      <ColorField label="Color" />
-      <DateField label="Date" granularity="minute" />
-      <TimeField label="Time" />
-      <DatePicker label="Date picker" />
-      <DateRangePicker label="Date range" />
-      <TextField type="email" label="Email" />
+      <ColorField label="Color" name="color" />
+      <DateField label="Date" granularity="minute" name="date" />
+      <TimeField label="Time" name="time" />
+      <DatePicker label="Date picker" name="datePicker" />
+      <DateRangePicker label="Date range" startName="startDate" endName="endDate" />
+      <TextField type="email" label="Email" name="email" />
       {props.showSubmit && (
         <ButtonGroup>
           <Button variant="primary" type="submit">Submit</Button>
@@ -718,29 +719,29 @@ export const NativeValidation = () => render({
   }
 });
 
+NativeValidation.story = {
+  parameters: {description: {data: 'This story is to test that client validation occurs on form submit and updates when the user commits changes to a field value (e.g. on blur).'}}
+};
+
 export function ServerValidation() {
   let [serverErrors, setServerErrors] = useState<any>({});
   let onSubmit = async (e) => {
     e.preventDefault();
-    let formData = new FormData(e.target);
-    if (formData.get('firstName') === 'Foo') {
-      setServerErrors({
-        firstName: 'Invalid first name'
-      });
-    } else {
-      action('onSubmit')(Object.fromEntries(formData.entries()));
-      setServerErrors({});
+    let errors = {};
+    for (let el of e.target.elements) {
+      errors[el.name] = `Invalid value for "${el.name}".`;
     }
+    setServerErrors(errors);
   };
 
-  return (
-    <Form validationBehavior="native" isRequired onSubmit={onSubmit} validationErrors={serverErrors}>
-      <TextField name="firstName" label="First Name (server errors on 'Foo')" />
-      <TextField name="lastName" label="Last Name (client errors on 'Bar')" validate={v => v === 'Bar' ? 'Invalid last name' : null} />
-      <ButtonGroup>
-        <Button variant="primary" type="submit">Submit</Button>
-        <Button variant="secondary" type="reset">Reset</Button>
-      </ButtonGroup>
-    </Form>
-  );
+  return render({
+    validationBehavior: 'native',
+    onSubmit,
+    validationErrors: serverErrors,
+    showSubmit: true
+  });
 }
+
+ServerValidation.story = {
+  parameters: {description: {data: 'This story is to test that server errors appear after submission, and are cleared when a field is modified.'}}
+};

From 63596ce53d6361da6422d734bf4fcbb37c1296dc Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 11:44:57 -0700
Subject: [PATCH 23/38] fix test

---
 packages/@react-stately/utils/test/useControlledState.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-stately/utils/test/useControlledState.test.tsx b/packages/@react-stately/utils/test/useControlledState.test.tsx
index b8524bd6425..b04107918a6 100644
--- a/packages/@react-stately/utils/test/useControlledState.test.tsx
+++ b/packages/@react-stately/utils/test/useControlledState.test.tsx
@@ -56,7 +56,7 @@ describe('useControlledState tests', function () {
     let onChangeSpy = jest.fn();
     let {result} = renderHook(() => useControlledState<number | null>(undefined, null, onChangeSpy));
     let [value, setValue] = result.current;
-    expect(value).not.toBeDefined();
+    expect(value).toBe(null);
     expect(onChangeSpy).not.toHaveBeenCalled();
     act(() => setValue(NaN));
     [value, setValue] = result.current;

From bcd97a8416da9f3162b5af645606fb51cd010edb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 12:08:04 -0700
Subject: [PATCH 24/38] Fixup package.json

---
 packages/@react-aria/combobox/package.json    | 1 -
 packages/@react-aria/form/package.json        | 2 --
 packages/@react-aria/numberfield/package.json | 1 -
 packages/@react-stately/form/package.json     | 2 --
 4 files changed, 6 deletions(-)

diff --git a/packages/@react-aria/combobox/package.json b/packages/@react-aria/combobox/package.json
index 6f0145c3cd1..97e7f3b97f1 100644
--- a/packages/@react-aria/combobox/package.json
+++ b/packages/@react-aria/combobox/package.json
@@ -22,7 +22,6 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.4",
     "@react-aria/interactions": "^3.19.1",
     "@react-aria/listbox": "^3.11.1",
diff --git a/packages/@react-aria/form/package.json b/packages/@react-aria/form/package.json
index 33586575f53..336e20100dc 100644
--- a/packages/@react-aria/form/package.json
+++ b/packages/@react-aria/form/package.json
@@ -1,7 +1,6 @@
 {
   "name": "@react-aria/form",
   "version": "3.0.0-alpha.1",
-  "private": true,
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -25,7 +24,6 @@
   "dependencies": {
     "@react-aria/utils": "^3.21.0",
     "@react-stately/form": "3.0.0-alpha.1",
-    "@react-stately/utils": "^3.8.0",
     "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0"
   },
diff --git a/packages/@react-aria/numberfield/package.json b/packages/@react-aria/numberfield/package.json
index 110c9f77fa7..d5375b123c3 100644
--- a/packages/@react-aria/numberfield/package.json
+++ b/packages/@react-aria/numberfield/package.json
@@ -22,7 +22,6 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/form": "3.0.0-alpha.1",
     "@react-aria/i18n": "^3.8.4",
     "@react-aria/interactions": "^3.19.1",
     "@react-aria/live-announcer": "^3.3.1",
diff --git a/packages/@react-stately/form/package.json b/packages/@react-stately/form/package.json
index 458a388e471..82de2adc2f7 100644
--- a/packages/@react-stately/form/package.json
+++ b/packages/@react-stately/form/package.json
@@ -3,7 +3,6 @@
   "version": "3.0.0-alpha.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
-  "private": true,
   "main": "dist/main.js",
   "module": "dist/module.js",
   "types": "dist/types.d.ts",
@@ -23,7 +22,6 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-stately/utils": "^3.0.0",
     "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0"
   },

From 0ddb0c9800285f8173973aec217567959e264054 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 12:22:30 -0700
Subject: [PATCH 25/38] Rename errors to validationErrors

---
 packages/@react-aria/checkbox/src/useCheckbox.ts   |  4 ++--
 .../@react-aria/checkbox/src/useCheckboxGroup.ts   |  6 +++---
 packages/@react-aria/combobox/src/useComboBox.ts   |  4 ++--
 .../@react-aria/datepicker/src/useDateField.ts     |  6 +++---
 .../@react-aria/datepicker/src/useDatePicker.ts    |  6 +++---
 .../datepicker/src/useDateRangePicker.ts           |  6 +++---
 packages/@react-aria/form/src/useFormValidation.ts |  4 ++--
 .../@react-aria/numberfield/src/useNumberField.ts  |  4 ++--
 packages/@react-aria/radio/src/useRadioGroup.ts    |  6 +++---
 packages/@react-aria/select/src/useSelect.ts       |  6 +++---
 packages/@react-aria/textfield/src/useTextField.ts |  6 +++---
 .../autocomplete/src/MobileSearchAutocomplete.tsx  |  6 +++---
 .../autocomplete/src/SearchAutocomplete.tsx        |  4 ++--
 packages/@react-spectrum/combobox/src/ComboBox.tsx |  4 ++--
 .../combobox/src/MobileComboBox.tsx                |  6 +++---
 .../@react-spectrum/datepicker/src/DateField.tsx   |  4 ++--
 .../@react-spectrum/datepicker/src/DatePicker.tsx  |  4 ++--
 .../datepicker/src/DateRangePicker.tsx             |  4 ++--
 .../@react-spectrum/datepicker/src/TimeField.tsx   |  4 ++--
 packages/@react-spectrum/label/src/Field.tsx       |  8 ++++----
 .../numberfield/src/NumberField.tsx                |  4 ++--
 packages/@react-spectrum/picker/src/Picker.tsx     |  4 ++--
 .../checkbox/src/useCheckboxGroupState.ts          |  3 +--
 packages/@react-stately/datepicker/src/utils.ts    |  4 ++--
 .../form/src/useFormValidationState.ts             | 14 +++++++-------
 packages/@react-types/shared/src/inputs.d.ts       |  2 +-
 26 files changed, 66 insertions(+), 67 deletions(-)

diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts
index 827ee1805ac..35ae759769a 100644
--- a/packages/@react-aria/checkbox/src/useCheckbox.ts
+++ b/packages/@react-aria/checkbox/src/useCheckbox.ts
@@ -42,7 +42,7 @@ export interface CheckboxAria extends ValidationResult {
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
   // Create validation state here because it doesn't make sense to add to general useToggleState.
   let validationState = useFormValidationState({...props, value: state.isSelected});
-  let {isInvalid, errors, validationDetails} = validationState.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;
   let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({
     ...props,
     isInvalid
@@ -69,7 +69,7 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     isDisabled,
     isReadOnly,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
index bcf4c182ae9..870527c089a 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
@@ -36,7 +36,7 @@ export interface CheckboxGroupAria extends ValidationResult {
  */
 export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxGroupState): CheckboxGroupAria {
   let {isDisabled, name, validationBehavior = 'aria'} = props;
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
@@ -44,7 +44,7 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
     // shouldn't be labeled by a <label> element.
     labelElementType: 'span',
     isInvalid,
-    errorMessage: props.errorMessage || errors
+    errorMessage: props.errorMessage || validationErrors
   });
 
   checkboxGroupData.set(state, {
@@ -66,7 +66,7 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
     descriptionProps,
     errorMessageProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
index 76609ded5cf..f96c7c722e6 100644
--- a/packages/@react-aria/combobox/src/useComboBox.ts
+++ b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -181,7 +181,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     state.setFocused(true);
   };
 
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
     ...props,
     onChange: state.setInputValue,
@@ -354,7 +354,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     descriptionProps,
     errorMessageProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index 0ea58caed23..b70346986c6 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -64,12 +64,12 @@ export const focusManagerSymbol = '__focusManager_' + Date.now();
  * Each part of a date value is displayed in an individually editable segment.
  */
 export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span',
     isInvalid,
-    errorMessage: props.errorMessage || errors
+    errorMessage: props.errorMessage || validationErrors
   });
 
   let {focusWithinProps} = useFocusWithin({
@@ -177,7 +177,7 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     descriptionProps,
     errorMessageProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts
index a56005bd3ad..ae7776c1187 100644
--- a/packages/@react-aria/datepicker/src/useDatePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDatePicker.ts
@@ -57,12 +57,12 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let fieldId = useId();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span',
     isInvalid,
-    errorMessage: props.errorMessage || errors
+    errorMessage: props.errorMessage || validationErrors
   });
 
   let groupProps = useDatePickerGroup(state, ref);
@@ -167,7 +167,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage
     },
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index e8d0b0f031f..ead9c7254d0 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -56,12 +56,12 @@ export interface DateRangePickerAria extends ValidationResult {
  */
 export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element>): DateRangePickerAria {
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span',
     isInvalid,
-    errorMessage: props.errorMessage || errors
+    errorMessage: props.errorMessage || validationErrors
   });
 
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
@@ -216,7 +216,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage
     },
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index 809352f9915..75dda6e1006 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -22,7 +22,7 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
 
   useEffect(() => {
     if (validationBehavior === 'native' && ref.current) {
-      let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.errors.join(' ') || 'Invalid value.' : '';
+      let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
       ref.current.setCustomValidity(errorMessage);
 
       // Prevent default tooltip for validation message.
@@ -95,6 +95,6 @@ function getNativeValidity(input: ValidatableElement): ValidationResult {
   return {
     isInvalid: !input.validity.valid,
     validationDetails: getValidity(input),
-    errors: input.validationMessage ? [input.validationMessage] : []
+    validationErrors: input.validationMessage ? [input.validationMessage] : []
   };
 }
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index ceb98c80810..3abebdb200a 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -188,7 +188,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   }, [commit]);
 
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
     ...otherProps,
     ...domProps,
@@ -316,7 +316,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     errorMessageProps,
     descriptionProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/radio/src/useRadioGroup.ts b/packages/@react-aria/radio/src/useRadioGroup.ts
index 6f5e9ae1b59..e7e3c86c6b7 100644
--- a/packages/@react-aria/radio/src/useRadioGroup.ts
+++ b/packages/@react-aria/radio/src/useRadioGroup.ts
@@ -48,14 +48,14 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
   } = props;
   let {direction} = useLocale();
 
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     // Radio group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
     labelElementType: 'span',
     isInvalid: state.isInvalid,
-    errorMessage: props.errorMessage || errors
+    errorMessage: props.errorMessage || validationErrors
   });
 
   let domProps = filterDOMProps(props, {labelable: true});
@@ -146,7 +146,7 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     descriptionProps,
     errorMessageProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts
index 085399cf39d..26a2a727d7d 100644
--- a/packages/@react-aria/select/src/useSelect.ts
+++ b/packages/@react-aria/select/src/useSelect.ts
@@ -122,12 +122,12 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     }
   });
 
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span',
     isInvalid,
-    errorMessage: props.errorMessage || errors
+    errorMessage: props.errorMessage || validationErrors
   });
 
   typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
@@ -231,7 +231,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     descriptionProps,
     errorMessageProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
index bfc46e0bd3f..d3b9cc91c61 100644
--- a/packages/@react-aria/textfield/src/useTextField.ts
+++ b/packages/@react-aria/textfield/src/useTextField.ts
@@ -122,11 +122,11 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     ...props,
     value
   });
-  let {isInvalid, errors, validationDetails} = validationState.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     isInvalid,
-    errorMessage: props.errorMessage || errors
+    errorMessage: props.errorMessage || validationErrors
   });
   let domProps = filterDOMProps(props, {labelable: true});
 
@@ -185,7 +185,7 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     descriptionProps,
     errorMessageProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   };
 }
diff --git a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
index e1f8e7da500..d586344d322 100644
--- a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
@@ -88,9 +88,9 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
 
   let inputRef = useRef<HTMLInputElement>(null);
   useFormValidation(props, state, inputRef);
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
-  let errorMessage = props.errorMessage ?? errors.join(' ');
+  let errorMessage = props.errorMessage ?? validationErrors.join(' ');
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
@@ -133,7 +133,7 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
         descriptionProps={descriptionProps}
         errorMessageProps={errorMessageProps}
         isInvalid={isInvalid}
-        errors={errors}
+        validationErrors={validationErrors}
         validationDetails={validationDetails}
         elementType="span"
         ref={domRef}
diff --git a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
index 93e3dd02180..1f45d0c5a01 100644
--- a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
@@ -100,7 +100,7 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
   );
   let layout = useListBoxLayout(state, loadingState === 'loadingMore');
 
-  let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useSearchAutocomplete(
+  let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSearchAutocomplete(
     {
       ...props,
       keyboardDelegate: layout,
@@ -143,7 +143,7 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
         errorMessageProps={errorMessageProps}
         labelProps={labelProps}
         isInvalid={isInvalid}
-        errors={errors}
+        validationErrors={validationErrors}
         validationDetails={validationDetails}
         ref={domRef}>
         <SearchAutocompleteInput
diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx
index 3ee65818b18..6944381a5cb 100644
--- a/packages/@react-spectrum/combobox/src/ComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx
@@ -104,7 +104,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
   );
   let layout = useListBoxLayout(state, loadingState === 'loadingMore');
 
-  let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useComboBox(
+  let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useComboBox(
     {
       ...props,
       keyboardDelegate: layout,
@@ -149,7 +149,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
         descriptionProps={descriptionProps}
         errorMessageProps={errorMessageProps}
         isInvalid={isInvalid}
-        errors={errors}
+        validationErrors={validationErrors}
         validationDetails={validationDetails}
         labelProps={labelProps}
         ref={domRef}>
diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
index 5f33d7bf9fb..3b981681318 100644
--- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
@@ -79,9 +79,9 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
 
   let inputRef = useRef<HTMLInputElement>(null);
   useFormValidation(props, state, inputRef);
-  let {isInvalid, errors, validationDetails} = state.displayValidation;
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let validationState = props.validationState || (isInvalid ? 'invalid' : null);
-  let errorMessage = props.errorMessage ?? errors.join(' ');
+  let errorMessage = props.errorMessage ?? validationErrors.join(' ');
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
@@ -125,7 +125,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
         errorMessageProps={errorMessageProps}
         validationState={validationState}
         isInvalid={isInvalid}
-        errors={errors}
+        validationErrors={validationErrors}
         validationDetails={validationDetails}
         elementType="span"
         ref={domRef}
diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx
index 47503846392..0945654bb05 100644
--- a/packages/@react-spectrum/datepicker/src/DateField.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateField.tsx
@@ -47,7 +47,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
 
   let fieldRef = useRef(null);
   let inputRef = useRef(null);
-  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useDateField({
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useDateField({
     ...props,
     inputRef
   }, state, fieldRef);
@@ -72,7 +72,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
       errorMessageProps={errorMessageProps}
       validationState={validationState}
       isInvalid={isInvalid}
-      errors={errors}
+      validationErrors={validationErrors}
       validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <Input
diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
index 39738c884ea..74c8b64a516 100644
--- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
@@ -56,7 +56,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
   });
-  let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, errors, validationDetails} = useDatePicker(props, state, targetRef);
+  let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);
   let {isOpen, setOpen} = state;
   let {direction} = useLocale();
   let domRef = useFocusManagerRef(ref);
@@ -124,7 +124,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
       errorMessageProps={errorMessageProps}
       validationState={validationState}
       isInvalid={isInvalid}
-      errors={errors}
+      validationErrors={validationErrors}
       validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <div
diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
index f57945720b3..60976f10e11 100644
--- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
@@ -56,7 +56,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
   });
-  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, errors, validationDetails} = useDateRangePicker(props, state, targetRef);
+  let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);
   let {isOpen, setOpen} = state;
   let {direction} = useLocale();
   let domRef = useFocusManagerRef(ref);
@@ -124,7 +124,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
       errorMessageProps={errorMessageProps}
       validationState={validationState}
       isInvalid={isInvalid}
-      errors={errors}
+      validationErrors={validationErrors}
       validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <div
diff --git a/packages/@react-spectrum/datepicker/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx
index 3bae29029fc..eb4ea93df76 100644
--- a/packages/@react-spectrum/datepicker/src/TimeField.tsx
+++ b/packages/@react-spectrum/datepicker/src/TimeField.tsx
@@ -45,7 +45,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
 
   let fieldRef = useRef(null);
   let inputRef = useRef(null);
-  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useTimeField({
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({
     ...props,
     inputRef
   }, state, fieldRef);
@@ -62,7 +62,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       errorMessageProps={errorMessageProps}
       validationState={validationState}
       isInvalid={isInvalid}
-      errors={errors}
+      validationErrors={validationErrors}
       validationDetails={validationDetails}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>
       <Input
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
index dbc8d0dade3..329d405f27d 100644
--- a/packages/@react-spectrum/label/src/Field.tsx
+++ b/packages/@react-spectrum/label/src/Field.tsx
@@ -35,8 +35,8 @@ function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
     validationState,
     isInvalid,
     description,
-    errorMessage = e => e.errors.join(' '),
-    errors,
+    errorMessage = e => e.validationErrors.join(' '),
+    validationErrors,
     validationDetails,
     isDisabled,
     showErrorIcon,
@@ -54,10 +54,10 @@ function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
   let {styleProps} = useStyleProps(otherProps);
   let errorMessageString: ReactNode = null;
   if (typeof errorMessage === 'function') {
-    errorMessageString = isInvalid != null && errors != null && validationDetails != null
+    errorMessageString = isInvalid != null && validationErrors != null && validationDetails != null
       ? errorMessage({
         isInvalid,
-        errors,
+        validationErrors,
         validationDetails
       })
       : null;
diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx
index ddf5e5f1e94..4c36db523c3 100644
--- a/packages/@react-spectrum/numberfield/src/NumberField.tsx
+++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx
@@ -54,7 +54,7 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
     descriptionProps,
     errorMessageProps,
     isInvalid,
-    errors,
+    validationErrors,
     validationDetails
   } = useNumberField(props, state, inputRef);
   let isMobile = provider.scale === 'large';
@@ -86,7 +86,7 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
       isInvalid={isInvalid}
-      errors={errors}
+      validationErrors={validationErrors}
       validationDetails={validationDetails}
       labelProps={labelProps}
       ref={domRef}
diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx
index 0d8a7ce9347..eef4a0c595f 100644
--- a/packages/@react-spectrum/picker/src/Picker.tsx
+++ b/packages/@react-spectrum/picker/src/Picker.tsx
@@ -77,7 +77,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   // so that the layout information can be cached even while the listbox is not mounted.
   // We also use the layout as the keyboard delegate for type to select.
   let layout = useListBoxLayout(state, isLoadingMore);
-  let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, errors, validationDetails} = useSelect({
+  let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({
     ...props,
     'aria-describedby': (isLoadingInitial ? progressCircleId : undefined),
     keyboardDelegate: layout
@@ -242,7 +242,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
       isInvalid={isInvalid}
-      errors={errors}
+      validationErrors={validationErrors}
       validationDetails={validationDetails}
       showErrorIcon={false}
       includeNecessityIndicatorInAccessibilityName
diff --git a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
index e55d6e92f8f..c64a67d83aa 100644
--- a/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
+++ b/packages/@react-stately/checkbox/src/useCheckboxGroupState.ts
@@ -71,8 +71,7 @@ export function useCheckboxGroupState(props: CheckboxGroupProps = {}): CheckboxG
   let invalidValues = useRef(new Map<string, ValidationResult>());
   let validation = useFormValidationState({
     ...props,
-    value: selectedValues,
-    name: props.name
+    value: selectedValues
   });
 
   let isInvalid = validation.displayValidation.isInvalid;
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index c04f19c7855..a06f3953b81 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -62,7 +62,7 @@ export function getValidationResult(
 
   return {
     isInvalid,
-    errors,
+    validationErrors: errors,
     validationDetails: {
       badInput: isUnavailable,
       customError: false,
@@ -106,7 +106,7 @@ export function getRangeValidationResult(
   if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
     result = mergeValidation(result, {
       isInvalid: true,
-      errors: [dictionary.getStringForLocale('rangeReversed', getLocale())],
+      validationErrors: [dictionary.getStringForLocale('rangeReversed', getLocale())],
       validationDetails: {
         ...VALID_VALIDITY_STATE,
         rangeUnderflow: true,
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index 3c691f2708c..58f89e96e86 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -36,7 +36,7 @@ const CUSTOM_VALIDITY_STATE: ValidityState = {
 export const DEFAULT_VALIDATION_RESULT: ValidationResult = {
   isInvalid: false,
   validationDetails: VALID_VALIDITY_STATE,
-  errors: []
+  validationErrors: []
 };
 
 export const FormValidationContext = createContext<ValidationErrors>({});
@@ -84,7 +84,7 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
   // If the isInvalid prop is true, update validation result in realtime (controlled).
   let controlledError: ValidationResult | null = isInvalid ? {
     isInvalid: true,
-    errors: [],
+    validationErrors: [],
     validationDetails: CUSTOM_VALIDITY_STATE
   } : null;
 
@@ -197,7 +197,7 @@ function runValidate<T>(validate: ValidationFunction<T>, value: T): string[] {
 function getValidationResult(errors: string[]): ValidationResult | null {
   return errors.length ? {
     isInvalid: true,
-    errors: errors,
+    validationErrors: errors,
     validationDetails: CUSTOM_VALIDITY_STATE
   } : null;
 }
@@ -209,8 +209,8 @@ function isEqualValidation(a: ValidationResult | null, b: ValidationResult | nul
 
   return a && b
     && a.isInvalid === b.isInvalid
-    && a.errors.length === b.errors.length
-    && a.errors.every((a, i) => a === b.errors[i])
+    && a.validationErrors.length === b.validationErrors.length
+    && a.validationErrors.every((a, i) => a === b.validationErrors[i])
     && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
 }
 
@@ -222,7 +222,7 @@ export function mergeValidation(...results: ValidationResult[]): ValidationResul
   };
 
   for (let v of results) {
-    for (let e of v.errors) {
+    for (let e of v.validationErrors) {
       errors.add(e);
     }
 
@@ -236,7 +236,7 @@ export function mergeValidation(...results: ValidationResult[]): ValidationResul
   validationDetails.valid = !isInvalid;
   return {
     isInvalid,
-    errors: [...errors],
+    validationErrors: [...errors],
     validationDetails
   };
 }
diff --git a/packages/@react-types/shared/src/inputs.d.ts b/packages/@react-types/shared/src/inputs.d.ts
index c89cc5570cb..1cae8a677b3 100644
--- a/packages/@react-types/shared/src/inputs.d.ts
+++ b/packages/@react-types/shared/src/inputs.d.ts
@@ -45,7 +45,7 @@ export interface ValidationResult {
   /** Whether the input value is invalid. */
   isInvalid: boolean,
   /** The current error messages for the input if it is invalid, otherwise an empty array. */
-  errors: string[],
+  validationErrors: string[],
   /** The native validation details for the input. */
   validationDetails: ValidityState
 }

From 8a2ce2264663b0c80b806f5dd461d9edefcbce1c Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 13:04:18 -0700
Subject: [PATCH 26/38] fix test-17

---
 .../textfield/test/useTextField.test.js            |  4 ++--
 .../autocomplete/test/SearchAutocomplete.test.js   | 12 ++++++------
 .../@react-spectrum/checkbox/test/Checkbox.test.js |  4 ++--
 .../checkbox/test/CheckboxGroup.test.js            | 10 +++++-----
 .../@react-spectrum/color/test/ColorField.test.js  |  6 +++---
 .../@react-spectrum/combobox/test/ComboBox.test.js | 12 ++++++------
 .../datepicker/test/DateField.test.js              | 12 ++++++------
 .../datepicker/test/DatePicker.test.js             | 14 +++++++-------
 .../datepicker/test/DateRangePicker.test.js        | 12 ++++++------
 .../datepicker/test/TimeField.test.js              | 12 ++++++------
 .../numberfield/test/NumberField.test.js           |  6 +++---
 .../@react-spectrum/picker/test/Picker.test.js     |  6 +++---
 packages/@react-spectrum/radio/test/Radio.test.js  |  6 +++---
 .../textfield/test/TextField.test.js               |  6 +++---
 14 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/packages/@react-aria/textfield/test/useTextField.test.js b/packages/@react-aria/textfield/test/useTextField.test.js
index 0430ca24c24..dbd49beed52 100644
--- a/packages/@react-aria/textfield/test/useTextField.test.js
+++ b/packages/@react-aria/textfield/test/useTextField.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, renderHook} from '@react-spectrum/test-utils';
+import {actHook, renderHook} from '@react-spectrum/test-utils';
 import React from 'react';
 import {useTextField} from '../';
 
@@ -81,7 +81,7 @@ describe('useTextField hook', () => {
         }
       };
 
-      act(() => props.onChange(mockEvent));
+      actHook(() => props.onChange(mockEvent));
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(mockEvent.target.value);
       onChange.mockClear();
diff --git a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
index 0dfee473a0a..08335b023a0 100644
--- a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
+++ b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
@@ -2502,7 +2502,7 @@ describe('SearchAutocomplete', function () {
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(false);
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -2539,7 +2539,7 @@ describe('SearchAutocomplete', function () {
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(false);
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -2629,7 +2629,7 @@ describe('SearchAutocomplete', function () {
             let input = getByTestId('input');
             expect(input).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
           });
@@ -2768,7 +2768,7 @@ describe('SearchAutocomplete', function () {
             let button = getAllByRole('button')[0];
             expect(button).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(button).toHaveAttribute('aria-describedby');
             expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -2803,7 +2803,7 @@ describe('SearchAutocomplete', function () {
             let button = getAllByRole('button')[0];
             expect(button).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(button).toHaveAttribute('aria-describedby');
             expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -2884,7 +2884,7 @@ describe('SearchAutocomplete', function () {
             let button = getAllByRole('button')[0];
             expect(button).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
             expect(button).toHaveAttribute('aria-describedby');
             expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
           });
diff --git a/packages/@react-spectrum/checkbox/test/Checkbox.test.js b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
index 190b1fd0cae..40bbf5d328a 100644
--- a/packages/@react-spectrum/checkbox/test/Checkbox.test.js
+++ b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
@@ -308,7 +308,7 @@ describe('Checkbox', function () {
         expect(checkbox).not.toHaveAttribute('aria-required');
         expect(checkbox.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         await user.click(checkbox);
         expect(checkbox.validity.valid).toBe(true);
@@ -326,7 +326,7 @@ describe('Checkbox', function () {
         let checkbox = getByRole('checkbox');
         expect(checkbox.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         await user.click(checkbox);
         expect(checkbox.validity.valid).toBe(true);
diff --git a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
index 6f729bd6b22..a2574b42a0f 100644
--- a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
+++ b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
@@ -440,7 +440,7 @@ describe('CheckboxGroup', () => {
           expect(input.validity.valid).toBe(false);
         }
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -481,7 +481,7 @@ describe('CheckboxGroup', () => {
         expect(checkboxes[2]).not.toHaveAttribute('aria-required');
         expect(checkboxes[2].validity.valid).toBe(true);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -519,7 +519,7 @@ describe('CheckboxGroup', () => {
           expect(input.validity.valid).toBe(false);
         }
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent(['You must accept all terms']);
@@ -564,7 +564,7 @@ describe('CheckboxGroup', () => {
         expect(checkboxes[1].validity.valid).toBe(false);
         expect(checkboxes[2].validity.valid).toBe(true);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms. You must accept the cookies.');
@@ -644,7 +644,7 @@ describe('CheckboxGroup', () => {
         let group = getByRole('group');
         expect(group).not.toHaveAttribute('aria-describedby');
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please select at least one item');
       });
diff --git a/packages/@react-spectrum/color/test/ColorField.test.js b/packages/@react-spectrum/color/test/ColorField.test.js
index 4db5b3e4edf..c297fdc728a 100644
--- a/packages/@react-spectrum/color/test/ColorField.test.js
+++ b/packages/@react-spectrum/color/test/ColorField.test.js
@@ -391,7 +391,7 @@ describe('ColorField', function () {
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -420,7 +420,7 @@ describe('ColorField', function () {
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -488,7 +488,7 @@ describe('ColorField', function () {
         let input = getByTestId('input');
         expect(input).not.toHaveAttribute('aria-describedby');
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
       });
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index 462c56d274a..d077716b41a 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -5381,7 +5381,7 @@ describe('ComboBox', function () {
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(false);
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -5419,7 +5419,7 @@ describe('ComboBox', function () {
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(false);
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -5508,7 +5508,7 @@ describe('ComboBox', function () {
             let input = getByTestId('input');
             expect(input).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
           });
@@ -5657,7 +5657,7 @@ describe('ComboBox', function () {
             let button = getAllByRole('button')[0];
             expect(button).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(button).toHaveAttribute('aria-describedby');
             expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -5692,7 +5692,7 @@ describe('ComboBox', function () {
             let button = getAllByRole('button')[0];
             expect(button).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
 
             expect(button).toHaveAttribute('aria-describedby');
             expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -5773,7 +5773,7 @@ describe('ComboBox', function () {
             let button = getAllByRole('button')[0];
             expect(button).not.toHaveAttribute('aria-describedby');
 
-            act(() => getByTestId('form').checkValidity());
+            act(() => {getByTestId('form').checkValidity();});
             expect(button).toHaveAttribute('aria-describedby');
             expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
           });
diff --git a/packages/@react-spectrum/datepicker/test/DateField.test.js b/packages/@react-spectrum/datepicker/test/DateField.test.js
index 409e96e7ac2..4e06421a9d6 100644
--- a/packages/@react-spectrum/datepicker/test/DateField.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateField.test.js
@@ -387,7 +387,7 @@ describe('DateField', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -418,7 +418,7 @@ describe('DateField', function () {
           expect(input.validity.valid).toBe(false);
           expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
@@ -438,7 +438,7 @@ describe('DateField', function () {
           expect(input.validity.valid).toBe(false);
           await user.tab();
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.tab({shift: true});
@@ -465,7 +465,7 @@ describe('DateField', function () {
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(false);
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
@@ -533,7 +533,7 @@ describe('DateField', function () {
           let group = getByRole('group');
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(group).toHaveAttribute('aria-describedby');
           expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
         });
@@ -554,7 +554,7 @@ describe('DateField', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
diff --git a/packages/@react-spectrum/datepicker/test/DatePicker.test.js b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
index 50da85ab356..17ac134dd81 100644
--- a/packages/@react-spectrum/datepicker/test/DatePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
@@ -1951,7 +1951,7 @@ describe('DatePicker', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -1982,7 +1982,7 @@ describe('DatePicker', function () {
           expect(input.validity.valid).toBe(false);
           expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
@@ -2002,7 +2002,7 @@ describe('DatePicker', function () {
           expect(input.validity.valid).toBe(false);
           await user.tab();
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
           await user.tab({shift: true});
@@ -2029,7 +2029,7 @@ describe('DatePicker', function () {
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(false);
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
@@ -2097,7 +2097,7 @@ describe('DatePicker', function () {
           let group = getByRole('group');
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(group).toHaveAttribute('aria-describedby');
           expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
         });
@@ -2118,7 +2118,7 @@ describe('DatePicker', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -2144,7 +2144,7 @@ describe('DatePicker', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index 95a0be67e42..34bd8cf0ba5 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -1543,7 +1543,7 @@ describe('DateRangePicker', function () {
           expect(endInput.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -1578,7 +1578,7 @@ describe('DateRangePicker', function () {
           expect(endInput.validity.valid).toBe(false);
           expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Value must be 2/3/2020 or later. Value must be 2/3/2024 or earlier.');
@@ -1620,7 +1620,7 @@ describe('DateRangePicker', function () {
           expect(startInput.validity.valid).toBe(false);
           expect(endInput.validity.valid).toBe(false);
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
@@ -1694,7 +1694,7 @@ describe('DateRangePicker', function () {
           let group = getByRole('group');
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(group).toHaveAttribute('aria-describedby');
           expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
         });
@@ -1715,7 +1715,7 @@ describe('DateRangePicker', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -1741,7 +1741,7 @@ describe('DateRangePicker', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
diff --git a/packages/@react-spectrum/datepicker/test/TimeField.test.js b/packages/@react-spectrum/datepicker/test/TimeField.test.js
index c7333013388..50c3ba48f4f 100644
--- a/packages/@react-spectrum/datepicker/test/TimeField.test.js
+++ b/packages/@react-spectrum/datepicker/test/TimeField.test.js
@@ -296,7 +296,7 @@ describe('TimeField', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
@@ -327,7 +327,7 @@ describe('TimeField', function () {
           expect(input.validity.valid).toBe(false);
           expect(getDescription()).not.toContain('Value must be 9:00 AM or later.');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Value must be 9:00 AM or later.');
@@ -346,7 +346,7 @@ describe('TimeField', function () {
           expect(input.validity.valid).toBe(false);
           await user.tab();
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(getDescription()).toContain('Value must be 5:00 PM or earlier.');
 
           await user.tab();
@@ -373,7 +373,7 @@ describe('TimeField', function () {
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(false);
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
@@ -441,7 +441,7 @@ describe('TimeField', function () {
           let group = getByRole('group');
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(group).toHaveAttribute('aria-describedby');
           expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
         });
@@ -462,7 +462,7 @@ describe('TimeField', function () {
           expect(input.validity.valid).toBe(false);
           expect(group).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(group).toHaveAttribute('aria-describedby');
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
index c831d8783f1..ba7e40fac7c 100644
--- a/packages/@react-spectrum/numberfield/test/NumberField.test.js
+++ b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -2279,7 +2279,7 @@ describe('NumberField', function () {
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -2308,7 +2308,7 @@ describe('NumberField', function () {
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -2376,7 +2376,7 @@ describe('NumberField', function () {
         let input = getByTestId('input');
         expect(input).not.toHaveAttribute('aria-describedby');
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
       });
diff --git a/packages/@react-spectrum/picker/test/Picker.test.js b/packages/@react-spectrum/picker/test/Picker.test.js
index 466920f8cc1..21eea96cbb5 100644
--- a/packages/@react-spectrum/picker/test/Picker.test.js
+++ b/packages/@react-spectrum/picker/test/Picker.test.js
@@ -2249,7 +2249,7 @@ describe('Picker', function () {
           expect(picker).not.toHaveAttribute('aria-describedby');
           expect(input.validity.valid).toBe(false);
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(picker).toHaveAttribute('aria-describedby');
           expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -2282,7 +2282,7 @@ describe('Picker', function () {
           expect(picker).not.toHaveAttribute('aria-describedby');
           expect(input.validity.valid).toBe(false);
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
 
           expect(picker).toHaveAttribute('aria-describedby');
           expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
@@ -2361,7 +2361,7 @@ describe('Picker', function () {
           let picker = getByTestId('picker');
           expect(picker).not.toHaveAttribute('aria-describedby');
 
-          act(() => getByTestId('form').checkValidity());
+          act(() => {getByTestId('form').checkValidity();});
           expect(picker).toHaveAttribute('aria-describedby');
           expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
         });
diff --git a/packages/@react-spectrum/radio/test/Radio.test.js b/packages/@react-spectrum/radio/test/Radio.test.js
index 546cbed8a45..db7b4ff2202 100644
--- a/packages/@react-spectrum/radio/test/Radio.test.js
+++ b/packages/@react-spectrum/radio/test/Radio.test.js
@@ -705,7 +705,7 @@ describe('Radios', function () {
           expect(input.validity.valid).toBe(false);
         }
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -741,7 +741,7 @@ describe('Radios', function () {
           expect(input.validity.valid).toBe(false);
         }
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent(['Too scary']);
@@ -815,7 +815,7 @@ describe('Radios', function () {
         let group = getByRole('radiogroup');
         expect(group).not.toHaveAttribute('aria-describedby');
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Please select a pet');
       });
diff --git a/packages/@react-spectrum/textfield/test/TextField.test.js b/packages/@react-spectrum/textfield/test/TextField.test.js
index 8438a4f434f..148dfe33283 100644
--- a/packages/@react-spectrum/textfield/test/TextField.test.js
+++ b/packages/@react-spectrum/textfield/test/TextField.test.js
@@ -497,7 +497,7 @@ describe('Shared TextField behavior', () => {
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
@@ -531,7 +531,7 @@ describe('Shared TextField behavior', () => {
         expect(input).not.toHaveAttribute('aria-describedby');
         expect(input.validity.valid).toBe(false);
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name');
@@ -608,7 +608,7 @@ describe('Shared TextField behavior', () => {
         let input = getByTestId('input');
         expect(input).not.toHaveAttribute('aria-describedby');
 
-        act(() => getByTestId('form').checkValidity());
+        act(() => {getByTestId('form').checkValidity();});
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a name');
       });

From 7b2f09bbefd6b78f4b4e18580251c5bec3461473 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 13:12:06 -0700
Subject: [PATCH 27/38] Fix docs ts for now

Is this a breaking change??
---
 packages/@react-aria/tag/src/useTagGroup.ts          | 8 +++++---
 packages/@react-aria/textfield/docs/useTextField.mdx | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/tag/src/useTagGroup.ts b/packages/@react-aria/tag/src/useTagGroup.ts
index 7ec486cebbf..7a27970411d 100644
--- a/packages/@react-aria/tag/src/useTagGroup.ts
+++ b/packages/@react-aria/tag/src/useTagGroup.ts
@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, KeyboardDelegate, LabelableProps, MultipleSelection, SelectionBehavior} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {Key, RefObject, useEffect, useRef, useState} from 'react';
+import {Key, ReactNode, RefObject, useEffect, useRef, useState} from 'react';
 import {ListKeyboardDelegate} from '@react-aria/selection';
 import type {ListState} from '@react-stately/list';
 import {useField} from '@react-aria/label';
@@ -31,11 +31,13 @@ export interface TagGroupAria {
   errorMessageProps: DOMAttributes
 }
 
-export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, DOMProps, LabelableProps, AriaLabelingProps, HelpTextProps {
+export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, DOMProps, LabelableProps, AriaLabelingProps, Omit<HelpTextProps, 'errorMessage'> {
   /** How multiple selection should behave in the collection. */
   selectionBehavior?: SelectionBehavior,
   /** Handler that is called when a user deletes a tag.  */
-  onRemove?: (keys: Set<Key>) => void
+  onRemove?: (keys: Set<Key>) => void,
+  /** An error message for the field. */
+  errorMessage?: ReactNode
 }
 
 export interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'children'> {
diff --git a/packages/@react-aria/textfield/docs/useTextField.mdx b/packages/@react-aria/textfield/docs/useTextField.mdx
index 4f02181671c..8e345dae140 100644
--- a/packages/@react-aria/textfield/docs/useTextField.mdx
+++ b/packages/@react-aria/textfield/docs/useTextField.mdx
@@ -78,7 +78,11 @@ to identify the element to screen readers.
 import type {AriaTextFieldProps} from '@react-aria/textfield';
 import {useTextField} from '@react-aria/textfield';
 
-function TextField(props: AriaTextFieldProps) {
+interface TextFieldProps extends Omit<AriaTextFieldProps, 'errorMessage'> {
+  errorMessage?: string
+}
+
+function TextField(props: TextFieldProps) {
   let {label} = props;
   let ref = React.useRef(null);
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, ref);

From 2f4d6e8db333ef38416bfa1a61f7acd777770907 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 22 Oct 2023 13:33:57 -0700
Subject: [PATCH 28/38] Fix SSR

---
 .../form/src/useFormValidationState.ts               | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index 58f89e96e86..df22a97212f 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -95,19 +95,23 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
     builtinValidation = null;
   }
 
-  // Clear server errors when the user changes the value.
-  let [isServerErrorCleared, setServerErrorCleared] = useState(false);
-
   // Get relevant server errors from the form.
   let serverErrors = useContext(FormValidationContext);
   let serverErrorMessages = useMemo(() => {
     if (name) {
-      setServerErrorCleared(false);
       return Array.isArray(name) ? name.flatMap(name => asArray(serverErrors[name])) : asArray(serverErrors[name]);
     }
     return [];
   }, [serverErrors, name]);
 
+  // Show server errors when the form gets a new value, and clear when the user changes the value.
+  let [lastServerErrors, setLastServerErrors] = useState(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = useState(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+
   let serverError: ValidationResult | null = useMemo(() =>
     getValidationResult(isServerErrorCleared ? [] : serverErrorMessages),
     [isServerErrorCleared, serverErrorMessages]

From 428d228986b798396ed955c80e55e49dd5420cf3 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 24 Oct 2023 17:21:10 -0700
Subject: [PATCH 29/38] Don't clear server errors when submitting form if user
 didn't touch the field

---
 .../@react-aria/form/src/useFormValidation.ts | 24 ++++++++++---------
 .../textfield/test/TextField.test.js          | 11 ++++++++-
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index 75dda6e1006..e0b57f3b824 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -41,7 +41,18 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
     state.resetValidation();
   });
 
-  let commitValidation = useEffectEvent(() => {
+  let onInvalid = useEffectEvent((e: Event) => {
+    // Prevent default browser error UI from appearing.
+    e.preventDefault();
+
+    // Only commit validation if we are not already displaying one.
+    // This avoids clearing server errors that the user didn't actually fix.
+    if (!state.displayValidation.isInvalid) {
+      state.commitValidation();
+    }
+  });
+
+  let onChange = useEffectEvent(() => {
     state.commitValidation();
   });
 
@@ -52,15 +63,6 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
     }
 
     let form = input.form;
-    let onInvalid = (e: Event) => {
-      e.preventDefault();
-      commitValidation();
-    };
-
-    let onChange = () => {
-      commitValidation();
-    };
-
     input.addEventListener('invalid', onInvalid);
     input.addEventListener('change', onChange);
     form?.addEventListener('reset', onReset);
@@ -69,7 +71,7 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
       input.removeEventListener('change', onChange);
       form?.removeEventListener('reset', onReset);
     };
-  }, [ref, commitValidation, onReset, validationBehavior]);
+  }, [ref, onInvalid, onChange, onReset, validationBehavior]);
 }
 
 function getValidity(input: ValidatableElement) {
diff --git a/packages/@react-spectrum/textfield/test/TextField.test.js b/packages/@react-spectrum/textfield/test/TextField.test.js
index 148dfe33283..7785dcdf265 100644
--- a/packages/@react-spectrum/textfield/test/TextField.test.js
+++ b/packages/@react-spectrum/textfield/test/TextField.test.js
@@ -564,7 +564,7 @@ describe('Shared TextField behavior', () => {
 
           return (
             <Provider theme={theme}>
-              <Form onSubmit={onSubmit} validationErrors={serverErrors}>
+              <Form data-testid="form" onSubmit={onSubmit} validationErrors={serverErrors}>
                 <Component data-testid="input" label="Name" name="name" validationBehavior="native" />
                 <Button type="submit">Submit</Button>
               </Form>
@@ -578,6 +578,15 @@ describe('Shared TextField behavior', () => {
         expect(input).not.toHaveAttribute('aria-describedby');
 
         await user.click(getByRole('button'));
+        act(() => {getByTestId('form').checkValidity();});
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name.');
+        expect(input.validity.valid).toBe(false);
+
+        // Clicking twice doesn't clear server errors.
+        await user.click(getByRole('button'));
+        act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid name.');

From f73d1501a3ae60570a58cc51ba4af15e7deaf675 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 24 Oct 2023 17:47:56 -0700
Subject: [PATCH 30/38] Commit numberfield changes when pressing
 increment/decrement buttons

---
 .../@react-aria/form/src/useFormValidation.ts |  5 ++--
 .../numberfield/test/NumberField.test.js      | 26 +++++++++++++++++++
 .../numberfield/src/useNumberFieldState.ts    |  4 +++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index e0b57f3b824..e6a48b566b6 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -12,7 +12,7 @@
 
 import {FormValidationState} from '@react-stately/form';
 import {RefObject, useEffect} from 'react';
-import {useEffectEvent} from '@react-aria/utils';
+import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {Validation, ValidationResult} from '@react-types/shared';
 
 type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
@@ -20,7 +20,8 @@ type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectEle
 export function useFormValidation<T>(props: Validation<T>, state: FormValidationState, ref: RefObject<ValidatableElement>) {
   let {validationBehavior} = props;
 
-  useEffect(() => {
+  // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
+  useLayoutEffect(() => {
     if (validationBehavior === 'native' && ref.current) {
       let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
       ref.current.setCustomValidity(errorMessage);
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
index ba7e40fac7c..c5ab83fcfbb 100644
--- a/packages/@react-spectrum/numberfield/test/NumberField.test.js
+++ b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -2295,6 +2295,32 @@ describe('NumberField', function () {
         expect(input).not.toHaveAttribute('aria-describedby');
       });
 
+      it('commits validation changes when pressing increment/decrement buttons', async () => {
+        let {getByTestId, getAllByRole} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <NumberField data-testid="input" label="Value" isRequired validationBehavior="native" />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('required');
+        expect(input).not.toHaveAttribute('aria-required');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+
+        act(() => {getByTestId('form').checkValidity();});
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.click(getAllByRole('button')[0]);
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+      });
+
       it('supports validate function', async () => {
         let {getByTestId} = render(
           <Provider theme={theme}>
diff --git a/packages/@react-stately/numberfield/src/useNumberFieldState.ts b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
index 27d8f69bdd0..4185c2c422e 100644
--- a/packages/@react-stately/numberfield/src/useNumberFieldState.ts
+++ b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
@@ -191,6 +191,7 @@ export function useNumberFieldState(
     }
 
     setNumberValue(newValue);
+    validation.commitValidation();
   };
 
   let decrement = () => {
@@ -201,17 +202,20 @@ export function useNumberFieldState(
     }
 
     setNumberValue(newValue);
+    validation.commitValidation();
   };
 
   let incrementToMax = () => {
     if (maxValue != null) {
       setNumberValue(snapValueToStep(maxValue, minValue, maxValue, clampStep));
+      validation.commitValidation();
     }
   };
 
   let decrementToMin = () => {
     if (minValue != null) {
       setNumberValue(minValue);
+      validation.commitValidation();
     }
   };
 

From 631208c413468d69b78dd04e4a1ecd64999e5188 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 24 Oct 2023 17:52:19 -0700
Subject: [PATCH 31/38] Remove aria-required from switch

Fixes aXe error
---
 packages/@react-aria/checkbox/src/useCheckbox.ts | 6 ++++--
 packages/@react-aria/toggle/src/useToggle.ts     | 4 ----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts
index 35ae759769a..15e1d540be7 100644
--- a/packages/@react-aria/checkbox/src/useCheckbox.ts
+++ b/packages/@react-aria/checkbox/src/useCheckbox.ts
@@ -50,7 +50,7 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
 
   useFormValidation(props, validationState, inputRef);
 
-  let {isIndeterminate} = props;
+  let {isIndeterminate, isRequired, validationBehavior = 'aria'} = props;
   useEffect(() => {
     // indeterminate is a property, but it can only be set via javascript
     // https://css-tricks.com/indeterminate-checkboxes/
@@ -62,7 +62,9 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
   return {
     inputProps: {
       ...inputProps,
-      checked: isSelected
+      checked: isSelected,
+      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+      required: isRequired && validationBehavior === 'native'
     },
     isSelected,
     isPressed,
diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts
index fcbf96ecd89..96023c1e873 100644
--- a/packages/@react-aria/toggle/src/useToggle.ts
+++ b/packages/@react-aria/toggle/src/useToggle.ts
@@ -40,14 +40,12 @@ export interface ToggleAria {
 export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefObject<HTMLInputElement>): ToggleAria {
   let {
     isDisabled = false,
-    isRequired = false,
     isReadOnly = false,
     value,
     name,
     children,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
-    validationBehavior = 'aria',
     validationState = 'valid',
     isInvalid
   } = props;
@@ -82,8 +80,6 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
       'aria-errormessage': props['aria-errormessage'],
       'aria-controls': props['aria-controls'],
       'aria-readonly': isReadOnly || undefined,
-      'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
-      required: isRequired && validationBehavior === 'native',
       onChange,
       disabled: isDisabled,
       ...(value == null ? {} : {value}),

From dd21ca81e20d54b5e610f1a52978d246eb54742e Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 24 Oct 2023 18:10:26 -0700
Subject: [PATCH 32/38] Always clear validation on reset

---
 .../picker/test/Picker.test.js                | 38 +++++++++++++++++++
 .../form/src/useFormValidationState.ts        |  8 +++-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/picker/test/Picker.test.js b/packages/@react-spectrum/picker/test/Picker.test.js
index 21eea96cbb5..8adda397871 100644
--- a/packages/@react-spectrum/picker/test/Picker.test.js
+++ b/packages/@react-spectrum/picker/test/Picker.test.js
@@ -2365,6 +2365,44 @@ describe('Picker', function () {
           expect(picker).toHaveAttribute('aria-describedby');
           expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
         });
+
+        it('clears validation on reset', async () => {
+          let {getByTestId, getByRole} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <Picker name="picker" data-testid="picker" label="Test" isRequired validationBehavior="native">
+                  <Item key="one">One</Item>
+                  <Item key="two">Two</Item>
+                  <Item key="three">Three</Item>
+                </Picker>
+                <Button data-testid="reset" type="reset">Reset</Button>
+              </Form>
+            </Provider>
+          );
+
+          let picker = getByTestId('picker');
+          let input = document.querySelector('[name=picker]');
+          expect(input).toHaveAttribute('required');
+          expect(picker).not.toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(false);
+
+          act(() => {getByTestId('form').checkValidity();});
+
+          expect(picker).toHaveAttribute('aria-describedby');
+          expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+          await user.click(picker);
+          act(() => jest.runAllTimers());
+
+          let listbox = getByRole('listbox');
+          let items = within(listbox).getAllByRole('option');
+          await user.click(items[0]);
+          act(() => jest.runAllTimers());
+          expect(picker).not.toHaveAttribute('aria-describedby');
+
+          await user.click(getByTestId('reset'));
+          expect(picker).not.toHaveAttribute('aria-describedby');
+        });
       });
 
       describe('validationBehavior=aria', () => {
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index df22a97212f..8d733a82436 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -166,12 +166,18 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
         setCurrentValidity(error);
       }
 
+      // Do not commit validation after the next render. This avoids a condition where
+      // useSelect calls commitValidation inside an onReset handler.
+      if (validationBehavior === 'native') {
+        setCommitQueued(false);
+      }
+
       setServerErrorCleared(true);
     },
     commitValidation() {
       // Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
       // Wait until after the next render to commit so that the latest value has been validated.
-      if (validationBehavior !== 'aria') {
+      if (validationBehavior === 'native') {
         setCommitQueued(true);
       }
       setServerErrorCleared(true);

From c8c09ec7651919c6c6c3ff3030de7c26a58e77ad Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 24 Oct 2023 21:04:43 -0700
Subject: [PATCH 33/38] only commit on blur if the value changed

---
 .../datepicker/src/useDateField.ts            | 12 ++++---
 .../numberfield/src/useNumberField.ts         |  8 +++--
 .../src/MobileSearchAutocomplete.tsx          | 15 ++++----
 .../test/SearchAutocomplete.test.js           | 25 ++++++++++++++
 .../color/test/ColorField.test.js             | 33 ++++++++++++++++++
 .../combobox/src/MobileComboBox.tsx           | 11 +++---
 .../combobox/test/ComboBox.test.js            | 25 ++++++++++++++
 .../datepicker/test/DateField.test.js         | 34 +++++++++++++++++++
 .../datepicker/test/DatePicker.test.js        |  3 +-
 .../datepicker/test/DateRangePicker.test.js   |  1 +
 .../datepicker/test/TimeField.test.js         | 11 +++---
 .../numberfield/test/NumberField.test.js      | 33 ++++++++++++++++++
 .../color/src/useColorFieldState.ts           |  4 +--
 .../combobox/src/useComboBoxState.ts          |  7 +++-
 .../datepicker/src/useDateFieldState.ts       |  1 -
 .../numberfield/src/useNumberFieldState.ts    |  2 --
 16 files changed, 192 insertions(+), 33 deletions(-)

diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index b70346986c6..c4c3816c223 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -72,16 +72,20 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     errorMessage: props.errorMessage || validationErrors
   });
 
+  let valueOnFocus = useRef<DateValue | null>(null);
   let {focusWithinProps} = useFocusWithin({
     ...props,
+    onFocusWithin(e) {
+      valueOnFocus.current = state.value;
+      props.onFocus?.(e);
+    },
     onBlurWithin: (e) => {
       state.confirmPlaceholder();
-
-      if (props.onBlur) {
-        props.onBlur(e);
+      if (state.value !== valueOnFocus.current) {
+        state.commitValidation();
       }
+      props.onBlur?.(e);
     },
-    onFocusWithin: props.onFocus,
     onFocusWithinChange: props.onFocusChange
   });
 
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index 3abebdb200a..f96bdeae03e 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -85,14 +85,15 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     decrementToMin,
     numberValue,
     inputValue,
-    commit
+    commit,
+    commitValidation
   } = state;
 
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let inputId = useId(id);
   let {focusProps} = useFocus({
-    onBlur: () => {
+    onBlur() {
       // Set input value to normalized valid value
       commit();
     }
@@ -183,10 +184,11 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   let onKeyDownEnter = useCallback((e) => {
     if (e.key === 'Enter') {
       commit();
+      commitValidation();
     } else {
       e.continuePropagation();
     }
-  }, [commit]);
+  }, [commit, commitValidation]);
 
   let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
diff --git a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
index d586344d322..5cbae6baaf1 100644
--- a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
@@ -408,19 +408,18 @@ function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
   );
 
   React.useEffect(() => {
-    if (inputRef.current) {
-      focusSafely(inputRef.current);
-    }
+    focusSafely(inputRef.current);
+  }, []);
 
-    // When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false.
+  React.useEffect(() => {
+    // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.
     // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay
     // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain")
     // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363
-    return () => {
+    if (!state.isOpen && state.isFocused) {
       state.setFocused(false);
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    }
+  });
 
   let {dialogProps} = useDialog({
     'aria-labelledby': useId(labelProps.id)
diff --git a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
index 08335b023a0..5bad635761a 100644
--- a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
+++ b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
@@ -2700,6 +2700,31 @@ describe('SearchAutocomplete', function () {
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input).not.toHaveAttribute('aria-invalid');
           });
+
+          it('only commits on blur if the value changed', async () => {
+            let {getByTestId} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleSearchAutocomplete data-testid="input" isRequired validationBehavior="native"  />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('required');
+            expect(input).not.toHaveAttribute('aria-required');
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(false);
+
+            await user.tab();
+            await user.tab({shift: true});
+            expect(input).not.toHaveAttribute('aria-describedby');
+
+            act(() => {getByTestId('form').checkValidity();});
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+          });
         });
       });
     });
diff --git a/packages/@react-spectrum/color/test/ColorField.test.js b/packages/@react-spectrum/color/test/ColorField.test.js
index c297fdc728a..5b0ee8b0712 100644
--- a/packages/@react-spectrum/color/test/ColorField.test.js
+++ b/packages/@react-spectrum/color/test/ColorField.test.js
@@ -492,6 +492,39 @@ describe('ColorField', function () {
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
       });
+
+      it('only commits on blur if the value changed', async () => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <ColorField data-testid="input" label="Value" isRequired validationBehavior="native" />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('required');
+        expect(input).not.toHaveAttribute('aria-required');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab();
+        await user.tab({shift: true});
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        act(() => {getByTestId('form').checkValidity();});
+
+        expect(input).toHaveAttribute('aria-describedby');
+
+        await user.tab();
+        await user.keyboard('333');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+        expect(input).not.toHaveAttribute('aria-describedby');
+      });
     });
 
     describe('validationBehavior=aria', () => {
diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
index 3b981681318..3ff6831ecb1 100644
--- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
@@ -351,16 +351,17 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
 
   React.useEffect(() => {
     focusSafely(inputRef.current);
+  }, []);
 
-    // When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false.
+  React.useEffect(() => {
+    // When the tray closes, set state.isFocused (i.e. the tray input's focus tracker) to false.
     // This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay
     // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain")
     // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363
-    return () => {
+    if (!state.isOpen && state.isFocused) {
       state.setFocused(false);
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    }
+  });
 
   let {dialogProps} = useDialog({
     'aria-labelledby': useId(labelProps.id)
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index d077716b41a..7796006d58e 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -5512,6 +5512,31 @@ describe('ComboBox', function () {
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
           });
+
+          it('only commits on blur if the value changed', async () => {
+            let {getByTestId} = render(
+              <Provider theme={theme}>
+                <Form data-testid="form">
+                  <ExampleComboBox data-testid="input" isRequired validationBehavior="native"  />
+                </Form>
+              </Provider>
+            );
+
+            let input = getByTestId('input');
+            expect(input).toHaveAttribute('required');
+            expect(input).not.toHaveAttribute('aria-required');
+            expect(input).not.toHaveAttribute('aria-describedby');
+            expect(input.validity.valid).toBe(false);
+
+            await user.tab();
+            await user.tab({shift: true});
+            expect(input).not.toHaveAttribute('aria-describedby');
+
+            act(() => {getByTestId('form').checkValidity();});
+
+            expect(input).toHaveAttribute('aria-describedby');
+            expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+          });
         });
 
         describe('validationBehavior=aria', () => {
diff --git a/packages/@react-spectrum/datepicker/test/DateField.test.js b/packages/@react-spectrum/datepicker/test/DateField.test.js
index 4e06421a9d6..8bb823881ba 100644
--- a/packages/@react-spectrum/datepicker/test/DateField.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateField.test.js
@@ -564,6 +564,40 @@ describe('DateField', function () {
 
           expect(group).not.toHaveAttribute('aria-describedby');
         });
+
+        it('only commits on blur if the value changed', async () => {
+          let {getByRole, getByTestId} = render(
+            <Provider theme={theme}>
+              <Form data-testid="form">
+                <DateField label="Date" name="date" isRequired validationBehavior="native" />
+              </Form>
+            </Provider>
+          );
+
+          let group = getByRole('group');
+          let input = document.querySelector('input[name=date]');
+          expect(input).toHaveAttribute('required');
+          expect(input.validity.valid).toBe(false);
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          await user.tab();
+          await user.tab({shift: true});
+          expect(group).not.toHaveAttribute('aria-describedby');
+
+          act(() => {getByTestId('form').checkValidity();});
+
+          expect(group).toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).toContain('Constraints not satisfied');
+
+          await user.keyboard('[Tab]232023');
+
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(true);
+
+          await user.tab();
+          expect(getDescription()).not.toContain('Constraints not satisfied');
+        });
       });
 
       describe('validationBehavior=aria', () => {
diff --git a/packages/@react-spectrum/datepicker/test/DatePicker.test.js b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
index 17ac134dd81..fb52c6d5387 100644
--- a/packages/@react-spectrum/datepicker/test/DatePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
@@ -2077,11 +2077,12 @@ describe('DatePicker', function () {
           expect(getDescription()).toContain('Invalid value');
           expect(input.validity.valid).toBe(false);
 
+          await user.tab({shift: true});
           await user.tab({shift: true});
           await user.keyboard('2024[ArrowLeft]3[ArrowLeft]2');
           act(() => document.activeElement.blur());
 
-          expect(group).not.toHaveAttribute('aria-describedby');
+          expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(true);
         });
 
diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index 34bd8cf0ba5..26d26161430 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -1674,6 +1674,7 @@ describe('DateRangePicker', function () {
           expect(getDescription()).toContain('Invalid start date. Invalid end date.');
           expect(input.validity.valid).toBe(false);
 
+          await user.tab({shift: true});
           await user.tab({shift: true});
           await user.keyboard('2024[ArrowLeft]3[ArrowLeft]2');
           act(() => document.activeElement.blur());
diff --git a/packages/@react-spectrum/datepicker/test/TimeField.test.js b/packages/@react-spectrum/datepicker/test/TimeField.test.js
index 50c3ba48f4f..20cb8cfa141 100644
--- a/packages/@react-spectrum/datepicker/test/TimeField.test.js
+++ b/packages/@react-spectrum/datepicker/test/TimeField.test.js
@@ -402,7 +402,7 @@ describe('TimeField', function () {
             return (
               <Provider theme={theme}>
                 <Form onSubmit={onSubmit} validationErrors={serverErrors}>
-                  <TimeField name="date" label="Value" validationBehavior="native" />
+                  <TimeField name="date" label="Value" defaultValue={new Time(9)} validationBehavior="native" />
                   <Button type="submit" data-testid="submit">Submit</Button>
                 </Form>
               </Provider>
@@ -413,17 +413,16 @@ describe('TimeField', function () {
 
           let group = getByRole('group');
           let input = document.querySelector('input[name=date]');
-          expect(group).not.toHaveAttribute('aria-describedby');
+          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+          expect(getDescription()).not.toContain('Invalid value');
 
           await user.click(getByTestId('submit'));
 
-          let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Invalid value');
           expect(input.validity.valid).toBe(false);
 
           await user.tab({shift: true});
-          await user.keyboard('2024[ArrowLeft]3[ArrowLeft]2');
-          act(() => document.activeElement.blur());
+          await user.keyboard('[ArrowUp][Tab]');
 
           expect(getDescription()).not.toContain('Invalid value');
           expect(input.validity.valid).toBe(true);
@@ -530,7 +529,7 @@ describe('TimeField', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Invalid value');
 
-          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
+          await user.keyboard('[Tab][ArrowUp][Tab][Tab][Tab]');
           expect(getDescription()).not.toContain('Invalid value');
         });
       });
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
index c5ab83fcfbb..aca06c31166 100644
--- a/packages/@react-spectrum/numberfield/test/NumberField.test.js
+++ b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -2406,6 +2406,39 @@ describe('NumberField', function () {
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Please enter a value');
       });
+
+      it('only commits on blur if the value changed', async () => {
+        let {getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <NumberField data-testid="input" label="Value" isRequired validationBehavior="native" />
+            </Form>
+          </Provider>
+        );
+
+        let input = getByTestId('input');
+        expect(input).toHaveAttribute('required');
+        expect(input).not.toHaveAttribute('aria-required');
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab();
+        await user.tab({shift: true});
+        expect(input).not.toHaveAttribute('aria-describedby');
+
+        act(() => {getByTestId('form').checkValidity();});
+
+        expect(input).toHaveAttribute('aria-describedby');
+
+        await user.tab();
+        await user.keyboard('4');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+        expect(input).not.toHaveAttribute('aria-describedby');
+      });
     });
 
     describe('validationBehavior=aria', () => {
diff --git a/packages/@react-stately/color/src/useColorFieldState.ts b/packages/@react-stately/color/src/useColorFieldState.ts
index 9f9be79f6a9..57b9dc2bdae 100644
--- a/packages/@react-stately/color/src/useColorFieldState.ts
+++ b/packages/@react-stately/color/src/useColorFieldState.ts
@@ -108,8 +108,6 @@ export function useColorFieldState(
   }, [inputValue]);
 
   let commit = () => {
-    validation.commitValidation();
-
     // Set to empty state if input value is empty
     if (!inputValue.length) {
       safelySetColorValue(null);
@@ -142,6 +140,7 @@ export function useColorFieldState(
       setInputValue(newValue.toString('hex'));
     }
     safelySetColorValue(newValue);
+    validation.commitValidation();
   };
   let decrement = () => {
     let newValue = addColorValue(parsedValue, -step);
@@ -153,6 +152,7 @@ export function useColorFieldState(
       setInputValue(newValue.toString('hex'));
     }
     safelySetColorValue(newValue);
+    validation.commitValidation();
   };
   let incrementToMax = () => safelySetColorValue(MAX_COLOR);
   let decrementToMin = () => safelySetColorValue(MIN_COLOR);
diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts
index 61286a4898a..d505cfba1c2 100644
--- a/packages/@react-stately/combobox/src/useComboBoxState.ts
+++ b/packages/@react-stately/combobox/src/useComboBoxState.ts
@@ -308,8 +308,10 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     }
   };
 
+  let valueOnFocus = useRef(inputValue);
   let setFocused = (isFocused: boolean) => {
     if (isFocused) {
+      valueOnFocus.current = inputValue;
       if (menuTrigger === 'focus') {
         open(null, 'focus');
       }
@@ -317,7 +319,10 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
       if (shouldCloseOnBlur) {
         commitValue();
       }
-      validation.commitValidation();
+
+      if (inputValue !== valueOnFocus.current) {
+        validation.commitValidation();
+      }
     }
 
     setFocusedState(isFocused);
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index 3e18a33358c..596435e1743 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -379,7 +379,6 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
         setValidSegments(validSegments);
         setValue(displayValue.copy());
       }
-      validation.commitValidation();
     },
     clearSegment(part) {
       delete validSegments[part];
diff --git a/packages/@react-stately/numberfield/src/useNumberFieldState.ts b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
index 4185c2c422e..fc0e019f1eb 100644
--- a/packages/@react-stately/numberfield/src/useNumberFieldState.ts
+++ b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
@@ -124,8 +124,6 @@ export function useNumberFieldState(
 
   let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);
   let commit = () => {
-    validation.commitValidation();
-
     // Set to empty state if input value is empty
     if (!inputValue.length) {
       setNumberValue(NaN);

From 36a3c4cbf1421edd7cb21466d4fdad61077d1ca4 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 24 Oct 2023 21:38:01 -0700
Subject: [PATCH 34/38] ts

---
 .../autocomplete/src/MobileSearchAutocomplete.tsx             | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
index 5cbae6baaf1..d7f5128c303 100644
--- a/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx
@@ -408,7 +408,9 @@ function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
   );
 
   React.useEffect(() => {
-    focusSafely(inputRef.current);
+    if (inputRef.current) {
+      focusSafely(inputRef.current);
+    }
   }, []);
 
   React.useEffect(() => {

From 9d1fbacbd15eb98e62cef900af450326032d3886 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 26 Oct 2023 15:45:29 -0700
Subject: [PATCH 35/38] Commit radiogroup validation on keyboard interactions

---
 .../@react-spectrum/radio/test/Radio.test.js  | 37 +++++++++++++++++++
 .../radio/src/useRadioGroupState.ts           | 11 +++---
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/packages/@react-spectrum/radio/test/Radio.test.js b/packages/@react-spectrum/radio/test/Radio.test.js
index db7b4ff2202..76e4eac68e1 100644
--- a/packages/@react-spectrum/radio/test/Radio.test.js
+++ b/packages/@react-spectrum/radio/test/Radio.test.js
@@ -718,6 +718,43 @@ describe('Radios', function () {
         expect(group).not.toHaveAttribute('aria-describedby');
       });
 
+      it('updates validation state with the keyboard', async () => {
+        let {getAllByRole, getByRole, getByTestId} = render(
+          <Provider theme={theme}>
+            <Form data-testid="form">
+              <RadioGroup aria-label="favorite pet" isRequired validationBehavior="native">
+                <Radio value="dogs">Dogs</Radio>
+                <Radio value="cats">Cats</Radio>
+                <Radio value="dragons">Dragons</Radio>
+              </RadioGroup>
+            </Form>
+          </Provider>
+        );
+
+        let group = getByRole('radiogroup');
+        expect(group).not.toHaveAttribute('aria-describedby');
+
+        let radios = getAllByRole('radio');
+        for (let input of radios) {
+          expect(input).toHaveAttribute('required');
+          expect(input).not.toHaveAttribute('aria-required');
+          expect(input.validity.valid).toBe(false);
+        }
+
+        act(() => {getByTestId('form').checkValidity();});
+
+        expect(group).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        await user.tab();
+        await user.keyboard('[ArrowDown]');
+        for (let input of radios) {
+          expect(input.validity.valid).toBe(true);
+        }
+
+        expect(group).not.toHaveAttribute('aria-describedby');
+      });
+
       it('supports validate function', async () => {
         let {getAllByRole, getByRole, getByTestId} = render(
           <Provider theme={theme}>
diff --git a/packages/@react-stately/radio/src/useRadioGroupState.ts b/packages/@react-stately/radio/src/useRadioGroupState.ts
index b1eeba23eba..889c17c9388 100644
--- a/packages/@react-stately/radio/src/useRadioGroupState.ts
+++ b/packages/@react-stately/radio/src/useRadioGroupState.ts
@@ -68,17 +68,18 @@ export function useRadioGroupState(props: RadioGroupProps): RadioGroupState  {
   let [selectedValue, setSelected] = useControlledState(props.value, props.defaultValue ?? null, props.onChange);
   let [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
 
+  let validation = useFormValidationState({
+    ...props,
+    value: selectedValue
+  });
+
   let setSelectedValue = (value) => {
     if (!props.isReadOnly && !props.isDisabled) {
       setSelected(value);
+      validation.commitValidation();
     }
   };
 
-  let validation = useFormValidationState({
-    ...props,
-    value: selectedValue
-  });
-
   let isInvalid = validation.displayValidation.isInvalid;
 
   return {

From 93a422d8dc6e6519618444d2303c9bddbf2cc626 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Fri, 27 Oct 2023 11:53:26 +1100
Subject: [PATCH 36/38] TS Strict fixes

---
 .../@react-aria/form/src/useFormValidation.ts |  4 +--
 .../interactions/src/useInteractOutside.ts    |  2 +-
 .../@react-aria/interactions/src/usePress.ts  | 32 +++++++++----------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/@react-aria/form/src/useFormValidation.ts b/packages/@react-aria/form/src/useFormValidation.ts
index e6a48b566b6..2a2d7e3ce24 100644
--- a/packages/@react-aria/form/src/useFormValidation.ts
+++ b/packages/@react-aria/form/src/useFormValidation.ts
@@ -68,8 +68,8 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
     input.addEventListener('change', onChange);
     form?.addEventListener('reset', onReset);
     return () => {
-      input.removeEventListener('invalid', onInvalid);
-      input.removeEventListener('change', onChange);
+      input!.removeEventListener('invalid', onInvalid);
+      input!.removeEventListener('change', onChange);
       form?.removeEventListener('reset', onReset);
     };
   }, [ref, onInvalid, onChange, onReset, validationBehavior]);
diff --git a/packages/@react-aria/interactions/src/useInteractOutside.ts b/packages/@react-aria/interactions/src/useInteractOutside.ts
index 33c242839e4..f95d219a856 100644
--- a/packages/@react-aria/interactions/src/useInteractOutside.ts
+++ b/packages/@react-aria/interactions/src/useInteractOutside.ts
@@ -37,7 +37,7 @@ export function useInteractOutside(props: InteractOutsideProps) {
     ignoreEmulatedMouseEvents: false
   });
 
-  let onPointerDown = useEffectEvent((e: PointerEvent) => {
+  let onPointerDown = useEffectEvent((e) => {
     if (onInteractOutside && isValidEvent(e, ref)) {
       if (onInteractOutsideStart) {
         onInteractOutsideStart(e);
diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts
index 52e1b88ef64..e7fc3c878a9 100644
--- a/packages/@react-aria/interactions/src/usePress.ts
+++ b/packages/@react-aria/interactions/src/usePress.ts
@@ -157,7 +157,7 @@ export function usePress(props: PressHookProps): PressResult {
   let triggerPressStart = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
     let state = ref.current;
     if (isDisabled || state.didFirePressStart) {
-      return;
+      return false;
     }
 
     let shouldStopPropagation = true;
@@ -181,7 +181,7 @@ export function usePress(props: PressHookProps): PressResult {
   let triggerPressEnd = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
     let state = ref.current;
     if (!state.didFirePressStart) {
-      return;
+      return false;
     }
 
     state.ignoreClickAfterPress = true;
@@ -214,7 +214,7 @@ export function usePress(props: PressHookProps): PressResult {
   let triggerPressUp = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
     let state = ref.current;
     if (isDisabled) {
-      return;
+      return false;
     }
 
     if (onPressUp) {
@@ -231,7 +231,7 @@ export function usePress(props: PressHookProps): PressResult {
   let cancel = useEffectEvent((e: EventBase) => {
     let state = ref.current;
     if (state.isPressed && state.target) {
-      if (state.isOverTarget) {
+      if (state.isOverTarget && state.pointerType) {
         triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
       }
       state.isPressed = false;
@@ -460,11 +460,11 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         if (state.target && isOverTarget(e, state.target)) {
-          if (!state.isOverTarget) {
+          if (!state.isOverTarget && state.pointerType) {
             state.isOverTarget = true;
             triggerPressStart(createEvent(state.target, e), state.pointerType);
           }
-        } else if (state.target && state.isOverTarget) {
+        } else if (state.target && state.isOverTarget && state.pointerType) {
           state.isOverTarget = false;
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
           cancelOnPointerExit(e);
@@ -473,9 +473,9 @@ export function usePress(props: PressHookProps): PressResult {
 
       let onPointerUp = (e: PointerEvent) => {
         if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
-          if (isOverTarget(e, state.target)) {
+          if (isOverTarget(e, state.target) && state.pointerType) {
             triggerPressEnd(createEvent(state.target, e), state.pointerType);
-          } else if (state.isOverTarget) {
+          } else if (state.isOverTarget && state.pointerType) {
             triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
           }
 
@@ -543,7 +543,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         let shouldStopPropagation = true;
-        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType) {
           state.isOverTarget = true;
           shouldStopPropagation = triggerPressStart(e, state.pointerType);
         }
@@ -559,7 +559,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         let shouldStopPropagation = true;
-        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType) {
           state.isOverTarget = false;
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
           cancelOnPointerExit(e);
@@ -594,9 +594,9 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        if (state.target && isOverTarget(e, state.target)) {
+        if (state.target && isOverTarget(e, state.target) && state.pointerType) {
           triggerPressEnd(createEvent(state.target, e), state.pointerType);
-        } else if (state.target && state.isOverTarget) {
+        } else if (state.target && state.isOverTarget && state.pointerType) {
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
         }
 
@@ -650,11 +650,11 @@ export function usePress(props: PressHookProps): PressResult {
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
         let shouldStopPropagation = true;
         if (touch && isOverTarget(touch, e.currentTarget)) {
-          if (!state.isOverTarget) {
+          if (!state.isOverTarget && state.pointerType) {
             state.isOverTarget = true;
             shouldStopPropagation = triggerPressStart(e, state.pointerType);
           }
-        } else if (state.isOverTarget) {
+        } else if (state.isOverTarget && state.pointerType) {
           state.isOverTarget = false;
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
           cancelOnPointerExit(e);
@@ -677,10 +677,10 @@ export function usePress(props: PressHookProps): PressResult {
 
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
         let shouldStopPropagation = true;
-        if (touch && isOverTarget(touch, e.currentTarget)) {
+        if (touch && isOverTarget(touch, e.currentTarget) && state.pointerType) {
           triggerPressUp(e, state.pointerType);
           shouldStopPropagation = triggerPressEnd(e, state.pointerType);
-        } else if (state.isOverTarget) {
+        } else if (state.isOverTarget && state.pointerType) {
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
         }
 

From 2fc531f8576ec78ca240a7e98f4e24e7d042fb85 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Fri, 27 Oct 2023 12:10:14 +1100
Subject: [PATCH 37/38] fix pointer event util to always have pointertype

---
 packages/dev/test-utils/src/events.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/test-utils/src/events.ts b/packages/dev/test-utils/src/events.ts
index 6b0a7f842cd..e0d9de3e084 100644
--- a/packages/dev/test-utils/src/events.ts
+++ b/packages/dev/test-utils/src/events.ts
@@ -77,7 +77,7 @@ export function installPointerEvent() {
         this._init = init;
       }
       get pointerType() {
-        return this._init.pointerType;
+        return this._init.pointerType ?? 'mouse';
       }
       get pointerId() {
         return this._init.pointerId;

From f3ffbd938eee2a3e218449b508396078ccf729aa Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Fri, 27 Oct 2023 12:22:38 +1100
Subject: [PATCH 38/38] allow empty string

---
 .../@react-aria/interactions/src/usePress.ts  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts
index e7fc3c878a9..e2e64784f96 100644
--- a/packages/@react-aria/interactions/src/usePress.ts
+++ b/packages/@react-aria/interactions/src/usePress.ts
@@ -231,7 +231,7 @@ export function usePress(props: PressHookProps): PressResult {
   let cancel = useEffectEvent((e: EventBase) => {
     let state = ref.current;
     if (state.isPressed && state.target) {
-      if (state.isOverTarget && state.pointerType) {
+      if (state.isOverTarget && state.pointerType != null) {
         triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
       }
       state.isPressed = false;
@@ -460,11 +460,11 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         if (state.target && isOverTarget(e, state.target)) {
-          if (!state.isOverTarget && state.pointerType) {
+          if (!state.isOverTarget && state.pointerType != null) {
             state.isOverTarget = true;
             triggerPressStart(createEvent(state.target, e), state.pointerType);
           }
-        } else if (state.target && state.isOverTarget && state.pointerType) {
+        } else if (state.target && state.isOverTarget && state.pointerType != null) {
           state.isOverTarget = false;
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
           cancelOnPointerExit(e);
@@ -473,9 +473,9 @@ export function usePress(props: PressHookProps): PressResult {
 
       let onPointerUp = (e: PointerEvent) => {
         if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
-          if (isOverTarget(e, state.target) && state.pointerType) {
+          if (isOverTarget(e, state.target) && state.pointerType != null) {
             triggerPressEnd(createEvent(state.target, e), state.pointerType);
-          } else if (state.isOverTarget && state.pointerType) {
+          } else if (state.isOverTarget && state.pointerType != null) {
             triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
           }
 
@@ -543,7 +543,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         let shouldStopPropagation = true;
-        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType) {
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
           state.isOverTarget = true;
           shouldStopPropagation = triggerPressStart(e, state.pointerType);
         }
@@ -559,7 +559,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         let shouldStopPropagation = true;
-        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType) {
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
           state.isOverTarget = false;
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
           cancelOnPointerExit(e);
@@ -594,9 +594,9 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        if (state.target && isOverTarget(e, state.target) && state.pointerType) {
+        if (state.target && isOverTarget(e, state.target) && state.pointerType != null) {
           triggerPressEnd(createEvent(state.target, e), state.pointerType);
-        } else if (state.target && state.isOverTarget && state.pointerType) {
+        } else if (state.target && state.isOverTarget && state.pointerType != null) {
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
         }
 
@@ -650,11 +650,11 @@ export function usePress(props: PressHookProps): PressResult {
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
         let shouldStopPropagation = true;
         if (touch && isOverTarget(touch, e.currentTarget)) {
-          if (!state.isOverTarget && state.pointerType) {
+          if (!state.isOverTarget && state.pointerType != null) {
             state.isOverTarget = true;
             shouldStopPropagation = triggerPressStart(e, state.pointerType);
           }
-        } else if (state.isOverTarget && state.pointerType) {
+        } else if (state.isOverTarget && state.pointerType != null) {
           state.isOverTarget = false;
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
           cancelOnPointerExit(e);
@@ -677,10 +677,10 @@ export function usePress(props: PressHookProps): PressResult {
 
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
         let shouldStopPropagation = true;
-        if (touch && isOverTarget(touch, e.currentTarget) && state.pointerType) {
+        if (touch && isOverTarget(touch, e.currentTarget) && state.pointerType != null) {
           triggerPressUp(e, state.pointerType);
           shouldStopPropagation = triggerPressEnd(e, state.pointerType);
-        } else if (state.isOverTarget && state.pointerType) {
+        } else if (state.isOverTarget && state.pointerType != null) {
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
         }