diff --git a/packages/@react-aria/checkbox/src/useCheckbox.ts b/packages/@react-aria/checkbox/src/useCheckbox.ts
index 1b258eb0f8b..77e0a2bd97c 100644
--- a/packages/@react-aria/checkbox/src/useCheckbox.ts
+++ b/packages/@react-aria/checkbox/src/useCheckbox.ts
@@ -11,11 +11,12 @@
  */
 
 import {AriaCheckboxProps} from '@react-types/checkbox';
+import {FormValidationResult, useFormValidation} from '@react-aria/utils';
 import {InputHTMLAttributes, RefObject, useEffect} from 'react';
 import {ToggleState} from '@react-stately/toggle';
 import {useToggle} from '@react-aria/toggle';
 
-export interface CheckboxAria {
+export interface CheckboxAria extends FormValidationResult {
   /** Props for the input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Whether the checkbox is selected. */
@@ -37,7 +38,11 @@ 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} = useToggle(props, state, inputRef);
+  let validation = useFormValidation(inputRef, props.validationState, '', props.validationBehavior, props.onValidationChange);
+  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle({
+    ...props,
+    validationState: validation.validationState
+  }, state, inputRef);
 
   let {isIndeterminate} = props;
   useEffect(() => {
@@ -56,6 +61,7 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     isSelected,
     isPressed,
     isDisabled,
-    isReadOnly
+    isReadOnly,
+    ...validation
   };
 }
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
index 2d4cf119b2a..90f4f599ef6 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroup.ts
@@ -11,7 +11,7 @@
  */
 
 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 {filterDOMProps, mergeProps} from '@react-aria/utils';
@@ -35,7 +35,7 @@ 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,
@@ -43,14 +43,15 @@ export function useCheckboxGroup(props: AriaCheckboxGroupProps, state: CheckboxG
     // shouldn't be labeled by a <label> element.
     labelElementType: 'span'
   });
-  checkboxGroupDescriptionIds.set(state, descriptionProps.id);
-  checkboxGroupErrorMessageIds.set(state, errorMessageProps.id);
+  checkboxGroupData.set(state, {
+    name,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior
+  });
 
   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',
diff --git a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
index 2d547d92692..40f5a74c4f9 100644
--- a/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
+++ b/packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts
@@ -12,7 +12,7 @@
 
 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 {useToggleState} from '@react-stately/toggle';
@@ -41,11 +41,13 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     }
   });
 
+  let {name, descriptionId, errorMessageId, validationBehavior} = checkboxGroupData.get(state)!;
   let res = useCheckbox({
     ...props,
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isDisabled: props.isDisabled || state.isDisabled,
-    name: props.name || checkboxGroupNames.get(state)
+    name: props.name || name,
+    validationBehavior: props.validationBehavior || validationBehavior
   }, toggleState, inputRef);
 
   return {
@@ -53,8 +55,8 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     inputProps: {
       ...res.inputProps,
       'aria-describedby': [
-        state.validationState === 'invalid' ? checkboxGroupErrorMessageIds.get(state) : null,
-        checkboxGroupDescriptionIds.get(state)
+        state.validationState === 'invalid' ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(' ') || undefined
     }
   };
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/color/src/useColorArea.ts b/packages/@react-aria/color/src/useColorArea.ts
index 98d770380a2..9407e5effc3 100644
--- a/packages/@react-aria/color/src/useColorArea.ts
+++ b/packages/@react-aria/color/src/useColorArea.ts
@@ -13,7 +13,7 @@
 import {AriaColorAreaProps, ColorChannel} from '@react-types/color';
 import {ColorAreaState} from '@react-stately/color';
 import {DOMAttributes} from '@react-types/shared';
-import {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
+import {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef, useState} from 'react';
@@ -54,7 +54,9 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     inputXRef,
     inputYRef,
     containerRef,
-    'aria-label': ariaLabel
+    'aria-label': ariaLabel,
+    xName,
+    yName
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
@@ -68,8 +70,15 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       focusWithoutScrolling(inputRef.current);
     }
   }, [inputXRef]);
-  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
 
+  useFormReset(inputXRef, [state.xValue, state.yValue], ([x, y]) => {
+    let newColor = state.value
+      .withChannelValue(state.channels.xChannel, x)
+      .withChannelValue(state.channels.yChannel, y);
+    state.setValue(newColor);
+  });
+
+  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
   let {xChannel, yChannel, zChannel} = state.channels;
   let xChannelStep = state.xChannelStep;
   let yChannelStep = state.yChannelStep;
@@ -410,6 +419,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       'aria-valuetext': getAriaValueTextForChannel(xChannel),
       disabled: isDisabled,
       value: state.value.getChannelValue(xChannel),
+      name: xName,
       tabIndex: (isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1),
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -434,6 +444,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
       'aria-orientation': 'vertical',
       disabled: isDisabled,
       value: state.value.getChannelValue(yChannel),
+      name: yName,
       tabIndex: (isMobile || focusedInput === 'y' ? undefined : -1),
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
diff --git a/packages/@react-aria/color/src/useColorField.ts b/packages/@react-aria/color/src/useColorField.ts
index a94e3bc9c3b..522b93fb9cc 100644
--- a/packages/@react-aria/color/src/useColorField.ts
+++ b/packages/@react-aria/color/src/useColorField.ts
@@ -12,6 +12,7 @@
 
 import {AriaColorFieldProps} from '@react-types/color';
 import {ColorFieldState} from '@react-stately/color';
+import {FormValidationResult, mergeProps, useId} from '@react-aria/utils';
 import {
   HTMLAttributes,
   LabelHTMLAttributes,
@@ -19,12 +20,11 @@ import {
   useCallback,
   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';
 
-export interface ColorFieldAria {
+export interface ColorFieldAria extends FormValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
@@ -96,7 +96,7 @@ export function useColorField(
     }
   };
 
-  let {labelProps, inputProps} = useFormattedTextField(
+  let {inputProps, ...otherFieldProps} = useFormattedTextField(
     mergeProps(props, {
       id: inputId,
       value: inputValue,
@@ -107,7 +107,6 @@ export function useColorField(
     }), state, ref);
 
   return {
-    labelProps,
     inputProps: mergeProps(inputProps, spinButtonProps, focusWithinProps, {
       role: 'textbox',
       'aria-valuemax': null,
@@ -117,6 +116,7 @@ export function useColorField(
       autoCorrect: 'off',
       spellCheck: 'false',
       onBlur: commit
-    })
+    }),
+    ...otherFieldProps
   };
 }
diff --git a/packages/@react-aria/color/src/useColorSlider.ts b/packages/@react-aria/color/src/useColorSlider.ts
index aeaa59e8ba2..b7c1a49a180 100644
--- a/packages/@react-aria/color/src/useColorSlider.ts
+++ b/packages/@react-aria/color/src/useColorSlider.ts
@@ -43,7 +43,7 @@ export interface ColorSliderAria {
  * Color sliders allow users to adjust an individual channel of a color value.
  */
 export function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {
-  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel} = props;
+  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name} = props;
 
   let {locale, direction} = useLocale();
 
@@ -58,6 +58,7 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
     index: 0,
     orientation,
     isDisabled: props.isDisabled,
+    name,
     trackRef,
     inputRef
   }, state);
diff --git a/packages/@react-aria/color/src/useColorWheel.ts b/packages/@react-aria/color/src/useColorWheel.ts
index b1229b36cae..23f4f5f2bb9 100644
--- a/packages/@react-aria/color/src/useColorWheel.ts
+++ b/packages/@react-aria/color/src/useColorWheel.ts
@@ -13,7 +13,7 @@
 import {AriaColorWheelProps} from '@react-types/color';
 import {ColorWheelState} from '@react-stately/color';
 import {DOMAttributes} from '@react-types/shared';
-import {focusWithoutScrolling, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useLabels} from '@react-aria/utils';
 import React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
 import {useKeyboard, useMove} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
@@ -43,7 +43,8 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     isDisabled,
     innerRadius,
     outerRadius,
-    'aria-label': ariaLabel
+    'aria-label': ariaLabel,
+    name
   } = props;
 
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
@@ -56,6 +57,8 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     }
   }, [inputRef]);
 
+  useFormReset(inputRef, state.hue, state.setHue);
+
   let currentPosition = useRef<{x: number, y: number}>(null);
 
   let {keyboardProps} = useKeyboard({
@@ -311,6 +314,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
         'aria-valuetext': state.value.formatChannelValue('hue', locale),
         disabled: isDisabled,
         value: `${state.value.getChannelValue('hue')}`,
+        name,
         onChange: (e: ChangeEvent<HTMLInputElement>) => {
           state.setHue(parseFloat(e.target.value));
         }
diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
index 3253d6704f0..b119e56aee9 100644
--- a/packages/@react-aria/combobox/src/useComboBox.ts
+++ b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -16,7 +16,7 @@ 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 {chain, isAppleDevice, mergeProps, useLabels} from '@react-aria/utils';
+import {chain, FormValidationResult, isAppleDevice, mergeProps, useLabels} from '@react-aria/utils';
 import {ComboBoxState} from '@react-stately/combobox';
 import {FocusEvent, InputHTMLAttributes, KeyboardEvent, RefObject, TouchEvent, useEffect, useMemo, useRef} from 'react';
 import {getChildNodes, getItemCount} from '@react-stately/collections';
@@ -40,7 +40,7 @@ export interface AriaComboBoxOptions<T> extends Omit<AriaComboBoxProps<T>, 'chil
   keyboardDelegate?: KeyboardDelegate
 }
 
-export interface ComboBoxAria<T> {
+export interface ComboBoxAria<T> extends FormValidationResult {
   /** Props for the label element. */
   labelProps: DOMAttributes,
   /** Props for the combo box input element. */
@@ -166,7 +166,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     state.setFocused(true);
   };
 
-  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
+  let {labelProps, inputProps, ...otherFieldProps} = useTextField({
     ...props,
     onChange: state.setInputValue,
     onKeyDown: !isReadOnly && chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown),
@@ -332,7 +332,6 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
       shouldSelectOnPressUp: true,
       shouldFocusOnHover: true
     }),
-    descriptionProps,
-    errorMessageProps
+    ...otherFieldProps
   };
 }
diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index 4211b15c2b3..9e1c918d31d 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -12,10 +12,10 @@
 
 import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {createFocusManager, FocusManager} from '@react-aria/focus';
-import {DateFieldState} from '@react-stately/datepicker';
-import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useDescription} from '@react-aria/utils';
-import {FocusEvent, RefObject, useEffect, useMemo, useRef} from 'react';
+import {DateFieldState, TimeFieldState} from '@react-stately/datepicker';
+import {DOMAttributes, KeyboardEvent, ValidationState} from '@react-types/shared';
+import {filterDOMProps, FormValidationResult, mergeProps, useDescription, useFormReset, useFormValidation} from '@react-aria/utils';
+import {FocusEvent, InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDatePickerGroup} from './useDatePickerGroup';
@@ -24,13 +24,18 @@ import {useFocusWithin} from '@react-aria/interactions';
 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'> {
+  /** A ref for the hidden input element for HTML form submission. */
+  inputRef?: RefObject<HTMLInputElement>
+}
 
-export interface DateFieldAria {
+export interface DateFieldAria extends FormValidationResult {
    /** Props for the field's visible label element, if any. */
   labelProps: DOMAttributes,
    /** Props for the field grouping element. */
   fieldProps: DOMAttributes,
+  /** Props for the hidden input element for HTML form submission. */
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the description element, if any. */
   descriptionProps: DOMAttributes,
   /** Props for the error message element, if any. */
@@ -42,7 +47,8 @@ interface HookData {
   ariaLabel: string,
   ariaLabelledBy: string,
   ariaDescribedBy: string,
-  focusManager: FocusManager
+  focusManager: FocusManager,
+  validationState: ValidationState
 }
 
 export const hookData = new WeakMap<DateFieldState, HookData>();
@@ -58,8 +64,11 @@ 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 {validationState, errorMessage, validationDetails} = useFormValidation(props.inputRef, state.validationState, props.errorMessage, props.validationBehavior, props.onValidationChange);
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
+    validationState,
+    errorMessage,
     labelElementType: 'span'
   });
 
@@ -96,7 +105,8 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     ariaLabel: props['aria-label'],
     ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,
     ariaDescribedBy: describedBy,
-    focusManager
+    focusManager,
+    validationState
   });
 
   let autoFocusRef = useRef(props.autoFocus);
@@ -125,6 +135,23 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     autoFocusRef.current = false;
   }, [focusManager]);
 
+  useFormReset(props.inputRef, state.value, state.setValue);
+  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 {
     labelProps: {
@@ -145,16 +172,27 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
         }
       }
     }),
+    inputProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    validationState,
+    errorMessage,
+    validationDetails
   };
 }
 
+export interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {
+  /** A ref for the hidden input element for HTML form submission. */
+  inputRef?: RefObject<HTMLInputElement>
+}
+
 /**
  * Provides the behavior and accessibility implementation for a time field component.
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-export function useTimeField<T extends TimeValue>(props: AriaTimeFieldProps<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
-  return useDateField(props, state, ref);
+export function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element>): DateFieldAria {
+  let res = useDateField(props, state, ref);
+  res.inputProps.value = state.timeValue?.toString() || '';
+  return res;
 }
diff --git a/packages/@react-aria/datepicker/src/useDatePicker.ts b/packages/@react-aria/datepicker/src/useDatePicker.ts
index 9dd5d9dc48b..05fe96c4050 100644
--- a/packages/@react-aria/datepicker/src/useDatePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDatePicker.ts
@@ -14,10 +14,10 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaDatePickerProps, DateValue} from '@react-types/datepicker';
 import {AriaDialogProps} from '@react-types/dialog';
 import {CalendarProps} from '@react-types/calendar';
+import {chain, filterDOMProps, FormValidationResult, mergeProps, useDescription, useFormValidationState, useId} from '@react-aria/utils';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerState} from '@react-stately/datepicker';
 import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {RefObject, useMemo} from 'react';
@@ -27,7 +27,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 FormValidationResult {
   /** 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 +56,12 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let fieldId = useId();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
+  let [{validationState, errorMessage, validationDetails}, setFormValidationState] = useFormValidationState(state.validationState, props.errorMessage);
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    validationState,
+    errorMessage
   });
 
   let groupProps = useDatePickerGroup(state, ref);
@@ -128,8 +131,12 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
       isRequired: props.isRequired,
+      validationBehavior: props.validationBehavior,
       validationState: state.validationState,
-      autoFocus: props.autoFocus
+      errorMessage: props.errorMessage,
+      onValidationChange: chain(setFormValidationState, props.onValidationChange),
+      autoFocus: props.autoFocus,
+      name: props.name
     },
     descriptionProps,
     errorMessageProps,
@@ -159,6 +166,9 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
       validationState: state.validationState,
       errorMessage: props.errorMessage
-    }
+    },
+    validationState,
+    errorMessage,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index 539778eef7f..ecd74f70263 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -15,19 +15,19 @@ 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, KeyboardEvent} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {DOMAttributes, FormValidationEvent, KeyboardEvent} from '@react-types/shared';
+import {filterDOMProps, FormValidationResult, mergeProps, mergeValidity, useDescription, useFormValidationState, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 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 FormValidationResult {
   /** 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 +55,16 @@ export interface DateRangePickerAria {
  */
 export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element>): DateRangePickerAria {
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let [startValidation, setStartValidation] = useFormValidationState(state.validationState, props.errorMessage);
+  let [endValidation, setEndValidation] = useFormValidationState(state.validationState, props.errorMessage);
+  let validationState = startValidation.validationState || endValidation.validationState;
+  let errorMessage = startValidation.errorMessage || endValidation.errorMessage;
+  let validationDetails = mergeValidity(startValidation.validationDetails, endValidation.validationDetails);
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    validationState,
+    errorMessage
   });
 
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
@@ -101,7 +108,9 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     isRequired: props.isRequired,
-    validationState: state.validationState
+    validationBehavior: props.validationBehavior,
+    validationState: state.validationState,
+    errorMessage: props.errorMessage
   };
 
   let domProps = filterDOMProps(props);
@@ -114,6 +123,25 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     onFocusWithinChange: props.onFocusChange
   });
 
+  let validityRef = useRef(null);
+  let onValidationChange = (v: FormValidationEvent) => {
+    let c = validityRef.current;
+
+    // Ignore duplicate events.
+    if (
+      c &&
+      c.errorMessage === v.errorMessage &&
+      Object.entries(v.validationDetails).every(([k, v]) => c.validationDetails[k] === v)
+    ) {
+      return;
+    }
+
+    validityRef.current = v;
+    if (props.onValidationChange) {
+      props.onValidationChange(v);
+    }
+  };
+
   return {
     groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
       role: 'group',
@@ -163,13 +191,23 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       ...commonFieldProps,
       value: state.value?.start,
       onChange: start => state.setDateTime('start', start),
-      autoFocus: props.autoFocus
+      autoFocus: props.autoFocus,
+      name: props.startName,
+      onValidationChange(v) {
+        setStartValidation(v);
+        onValidationChange(getValidationEvent(v, validationResultToEvent(endValidation)));
+      }
     },
     endFieldProps: {
       ...endFieldProps,
       ...commonFieldProps,
       value: state.value?.end,
-      onChange: end => state.setDateTime('end', end)
+      onChange: end => state.setDateTime('end', end),
+      name: props.endName,
+      onValidationChange(v) {
+        setEndValidation(v);
+        onValidationChange(getValidationEvent(validationResultToEvent(startValidation), v));
+      }
     },
     descriptionProps,
     errorMessageProps,
@@ -186,6 +224,24 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
       validationState: state.validationState,
       errorMessage: props.errorMessage
-    }
+    },
+    validationState,
+    errorMessage,
+    validationDetails
+  };
+}
+
+function getValidationEvent(a: FormValidationEvent, b: FormValidationEvent): FormValidationEvent {
+  let isInvalid = a.isInvalid || b.isInvalid;
+  let errorMessage = a.errorMessage || b.errorMessage;
+  let validationDetails = mergeValidity(a.validationDetails, b.validationDetails);
+  return {isInvalid, errorMessage, validationDetails};
+}
+
+function validationResultToEvent(result: FormValidationResult): FormValidationEvent {
+  return {
+    isInvalid: !result.validationDetails.valid,
+    errorMessage: typeof result.errorMessage === 'string' ? result.errorMessage : '',
+    validationDetails: result.validationDetails
   };
 }
diff --git a/packages/@react-aria/datepicker/src/useDateSegment.ts b/packages/@react-aria/datepicker/src/useDateSegment.ts
index 21351d9cf0f..530c48f4fd4 100644
--- a/packages/@react-aria/datepicker/src/useDateSegment.ts
+++ b/packages/@react-aria/datepicker/src/useDateSegment.ts
@@ -35,7 +35,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
   let enteredKeys = useRef('');
   let {locale} = useLocale();
   let displayNames = useDisplayNames();
-  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager, validationState} = hookData.get(state);
 
   let textValue = segment.isPlaceholder ? '' : segment.text;
   let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);
@@ -335,7 +335,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
   // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being
   // read every time the user navigates to a new segment.
   let firstSegment = useMemo(() => state.segments.find(s => s.isEditable), [state.segments]);
-  if (segment !== firstSegment && state.validationState !== 'invalid') {
+  if (segment !== firstSegment && validationState !== 'invalid') {
     ariaDescribedBy = undefined;
   }
 
@@ -364,7 +364,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     segmentProps: mergeProps(spinButtonProps, labelProps, {
       id,
       ...touchPropOverrides,
-      'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
+      'aria-invalid': validationState === 'invalid' ? 'true' : undefined,
       'aria-describedby': ariaDescribedBy,
       'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
       'data-placeholder': segment.isPlaceholder || undefined,
diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts
index 20056d50996..5da00377d45 100644
--- a/packages/@react-aria/interactions/src/usePress.ts
+++ b/packages/@react-aria/interactions/src/usePress.ts
@@ -788,7 +788,7 @@ function shouldPreventDefaultKeyboard(target: Element, key: string) {
   }
 
   if (target instanceof HTMLButtonElement) {
-    return target.type !== 'submit';
+    return target.type !== 'submit' && target.type !== 'reset';
   }
 
   return true;
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
index 2abaf6cfba1..def89a0bd08 100644
--- a/packages/@react-aria/numberfield/src/useNumberField.ts
+++ b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -13,7 +13,7 @@
 import {AriaButtonProps} from '@react-types/button';
 import {AriaNumberFieldProps} from '@react-types/numberfield';
 import {DOMAttributes, TextInputDOMProps} from '@react-types/shared';
-import {filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useId} from '@react-aria/utils';
+import {filterDOMProps, FormValidationResult, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';
 import {
   InputHTMLAttributes,
   LabelHTMLAttributes,
@@ -33,7 +33,7 @@ import {
 } from '@react-aria/i18n';
 import {useSpinButton} from '@react-aria/spinbutton';
 
-export interface NumberFieldAria {
+export interface NumberFieldAria extends FormValidationResult {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the group wrapper around the input and stepper buttons. */
@@ -182,9 +182,10 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
 
   let domProps = filterDOMProps(props);
 
-  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
+  let {labelProps, inputProps: textFieldProps, ...otherFieldProps} = useFormattedTextField({
     ...otherProps,
     ...domProps,
+    name: undefined,
     label,
     autoFocus,
     isDisabled,
@@ -209,6 +210,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     errorMessage
   }, state, inputRef);
 
+  useFormReset(inputRef, state.numberValue, state.setNumberValue);
+
   let inputProps = mergeProps(
     spinButtonProps,
     focusProps,
@@ -298,7 +301,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     inputProps,
     incrementButtonProps,
     decrementButtonProps,
-    errorMessageProps,
-    descriptionProps
+    ...otherFieldProps
   };
 }
diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts
index 0f74369e811..727e6206bda 100644
--- a/packages/@react-aria/radio/src/useRadio.ts
+++ b/packages/@react-aria/radio/src/useRadio.ts
@@ -11,12 +11,13 @@
  */
 
 import {AriaRadioProps} from '@react-types/radio';
-import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
 import {InputHTMLAttributes, RefObject} from 'react';
-import {radioGroupDescriptionIds, radioGroupErrorMessageIds, radioGroupNames} from './utils';
+import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {useFocusable} from '@react-aria/focus';
 import {usePress} from '@react-aria/interactions';
+import {ValidationState} from '@react-types/shared';
 
 export interface RadioAria {
   /** Props for the input element. */
@@ -26,7 +27,9 @@ export interface RadioAria {
   /** Whether the radio is currently selected. */
   isSelected: boolean,
   /** Whether the radio is in a pressed state. */
-  isPressed: boolean
+  isPressed: boolean,
+  /** The validation state of the radio. */
+  validationState: ValidationState
 }
 
 /**
@@ -73,23 +76,29 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
     tabIndex = undefined;
   }
 
+  let {name, descriptionId, errorMessageId, isRequired, validationBehavior, errorMessage, onValidationChange} = radioGroupData.get(state)!;
+  let {validationState} = useFormValidation(ref, state.validationState, errorMessage, validationBehavior, onValidationChange);
+  useFormReset(ref, state.selectedValue, state.setSelectedValue);
+
   return {
     inputProps: mergeProps(domProps, {
       ...interactions,
       type: 'radio',
-      name: radioGroupNames.get(state),
+      name,
       tabIndex,
       disabled: isDisabled,
+      required: isRequired && validationBehavior === 'native',
       checked,
       value,
       onChange,
       'aria-describedby': [
-        state.validationState === 'invalid' ? radioGroupErrorMessageIds.get(state) : null,
-        radioGroupDescriptionIds.get(state)
+        validationState === 'invalid' ? errorMessageId : null,
+        descriptionId
       ].filter(Boolean).join(' ') || undefined
     }),
     isDisabled,
     isSelected: checked,
-    isPressed
+    isPressed,
+    validationState
   };
 }
diff --git a/packages/@react-aria/radio/src/useRadioGroup.ts b/packages/@react-aria/radio/src/useRadioGroup.ts
index 5c9062f6f86..1e172442609 100644
--- a/packages/@react-aria/radio/src/useRadioGroup.ts
+++ b/packages/@react-aria/radio/src/useRadioGroup.ts
@@ -11,16 +11,17 @@
  */
 
 import {AriaRadioGroupProps} from '@react-types/radio';
-import {DOMAttributes} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
+import {DOMAttributes, FormValidationEvent} from '@react-types/shared';
+import {filterDOMProps, FormValidationResult, mergeProps, useFormValidationState, 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';
+import {useRef} from 'react';
 
-export interface RadioGroupAria {
+export interface RadioGroupAria extends FormValidationResult {
   /** Props for the radio group wrapper element. */
   radioGroupProps: DOMAttributes,
   /** Props for the radio group's visible label (if any). */
@@ -40,22 +41,54 @@ export interface RadioGroupAria {
 export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState): RadioGroupAria {
   let {
     name,
-    validationState,
     isReadOnly,
-    isRequired,
+    isRequired = false,
+    validationBehavior = 'aria',
     isDisabled,
     orientation = 'vertical'
   } = props;
   let {direction} = useLocale();
 
+  let [{validationState, errorMessage, validationDetails}, setValidity] = useFormValidationState(props.validationState, props.errorMessage);
   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'
+    labelElementType: 'span',
+    validationState,
+    errorMessage
+  });
+
+  let validityRef = useRef(null);
+  let onValidationChange = (v: FormValidationEvent) => {
+    let c = validityRef.current;
+
+    // Ignore duplicate events.
+    if (
+      c &&
+      c.errorMessage === v.errorMessage &&
+      Object.entries(v.validationDetails).every(([k, v]) => c.validationDetails[k] === v)
+    ) {
+      return;
+    }
+
+    validityRef.current = v;
+    setValidity(v);
+    if (props.onValidationChange) {
+      props.onValidationChange(v);
+    }
+  };
+
+  let groupName = useId(name);
+  radioGroupData.set(state, {
+    name: groupName,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    isRequired,
+    validationBehavior,
+    errorMessage,
+    onValidationChange
   });
-  radioGroupDescriptionIds.set(state, descriptionProps.id);
-  radioGroupErrorMessageIds.set(state, errorMessageProps.id);
 
   let domProps = filterDOMProps(props, {labelable: true});
 
@@ -119,9 +152,6 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     }
   };
 
-  let groupName = useId(name);
-  radioGroupNames.set(state, groupName);
-
   return {
     radioGroupProps: mergeProps(domProps, {
       // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
@@ -138,6 +168,9 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
     }),
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    validationState,
+    errorMessage,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/radio/src/utils.ts b/packages/@react-aria/radio/src/utils.ts
index 697d7965811..f48992ad42a 100644
--- a/packages/@react-aria/radio/src/utils.ts
+++ b/packages/@react-aria/radio/src/utils.ts
@@ -10,8 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
+import {FormValidationEvent} from '@react-types/shared';
 import {RadioGroupState} from '@react-stately/radio';
+import {ReactNode} from 'react';
 
-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,
+  isRequired: boolean,
+  validationBehavior: 'aria' | 'native',
+  errorMessage: ReactNode,
+  onValidationChange?: (e: FormValidationEvent) => void
+}
+
+export const radioGroupData = new WeakMap<RadioGroupState, RadioGroupData>();
diff --git a/packages/@react-aria/searchfield/src/useSearchField.ts b/packages/@react-aria/searchfield/src/useSearchField.ts
index 0e8ac480526..46d85019849 100644
--- a/packages/@react-aria/searchfield/src/useSearchField.ts
+++ b/packages/@react-aria/searchfield/src/useSearchField.ts
@@ -12,7 +12,7 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {AriaSearchFieldProps} from '@react-types/searchfield';
-import {chain} from '@react-aria/utils';
+import {chain, FormValidationResult} from '@react-aria/utils';
 import {DOMAttributes} from '@react-types/shared';
 import {InputHTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
 // @ts-ignore
@@ -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 FormValidationResult {
   /** 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/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index aa6ad3e1428..c3771cdddeb 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -11,8 +11,10 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import React, {ReactNode, RefObject} from 'react';
+import React, {ForwardedRef, forwardRef, ReactNode, RefObject} from 'react';
+import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
+import {useFormReset, useObjectRef, useUpdateEffect} from '@react-aria/utils';
 import {useInteractionModality} from '@react-aria/interactions';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -20,7 +22,7 @@ export interface AriaHiddenSelectProps {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
-   autoComplete?: string,
+  autoComplete?: string,
 
   /** The text label for the select. */
   label?: ReactNode,
@@ -40,16 +42,32 @@ export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
   triggerRef: RefObject<FocusableElement>
 }
 
+export interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
+  /** A ref to the hidden `<select>` element. */
+  selectRef?: RefObject<HTMLSelectElement>
+}
+
 /**
  * Provides the behavior and accessibility implementation for a hidden `<select>` element, which
  * can be used in combination with `useSelect` to support browser form autofill, mobile form
  * navigation, and native HTML form submission.
  */
-export function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {
-  let {autoComplete, name, isDisabled} = props;
+export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {
+  let data = selectData.get(state) || {};
+  let {
+    autoComplete = data.autoComplete,
+    name = data.name,
+    isDisabled = data.isDisabled
+  } = props;
   let modality = useInteractionModality();
   let {visuallyHiddenProps} = useVisuallyHidden();
 
+  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);
+  useUpdateEffect(() => {
+    // When the value changes, emit an event for form validation to pick up.
+    props.selectRef?.current?.dispatchEvent(new Event('change', {bubbles: true}));
+  }, [state.selectedKey]);
+
   // 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
   // seem to identify it just by surrounding text.
@@ -85,20 +103,17 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectSt
       autoComplete,
       disabled: isDisabled,
       name,
-      size: state.collection.size,
       value: state.selectedKey ?? '',
+      required: data.isRequired && data.validationBehavior === 'native',
       onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)
     }
   };
 }
 
-/**
- * Renders a hidden native `<select>` element, which can be used to support browser
- * form autofill, mobile form navigation, and native form submission.
- */
-export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
-  let {state, triggerRef, label, name, isDisabled} = props;
-  let {containerProps, inputProps, selectProps} = useHiddenSelect(props, state, triggerRef);
+function HiddenSelect<T>(props: HiddenSelectProps<T>, ref: ForwardedRef<HTMLSelectElement>) {
+  let {state, triggerRef, label, isDisabled} = props;
+  let selectRef = useObjectRef(ref);
+  let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);
 
   // If used in a <form>, use a hidden input so the value can be submitted to a server.
   // If the collection isn't too big, use a hidden <select> element for this so that browser
@@ -109,7 +124,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
         <input {...inputProps} />
         <label>
           {label}
-          <select {...selectProps}>
+          <select {...selectProps} ref={selectRef}>
             <option />
             {[...state.collection.getKeys()].map(key => {
               let item = state.collection.getItem(key);
@@ -127,12 +142,12 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
         </label>
       </div>
     );
-  } else if (name) {
+  } else if (selectProps.name) {
     return (
       <input
         type="hidden"
         autoComplete={selectProps.autoComplete}
-        name={name}
+        name={selectProps.name}
         disabled={isDisabled}
         value={state.selectedKey ?? ''} />
     );
@@ -140,3 +155,10 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
 
   return null;
 }
+
+/**
+ * Renders a hidden native `<select>` element, which can be used to support browser
+ * form autofill, mobile form navigation, and native form submission.
+ */
+const _HiddenSelect = forwardRef(HiddenSelect);
+export {_HiddenSelect as HiddenSelect};
diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts
index 5f1399fc9f9..f97edc87f6f 100644
--- a/packages/@react-aria/select/src/useSelect.ts
+++ b/packages/@react-aria/select/src/useSelect.ts
@@ -11,9 +11,10 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
+import {AriaHiddenSelectProps} from './HiddenSelect';
 import {AriaListBoxOptions} from '@react-aria/listbox';
 import {AriaSelectProps} from '@react-types/select';
-import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
+import {chain, filterDOMProps, FormValidationResult, mergeProps, useFormValidation, useId} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, KeyboardDelegate} from '@react-types/shared';
 import {FocusEvent, RefObject, useMemo} from 'react';
 import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';
@@ -28,10 +29,12 @@ export interface AriaSelectOptions<T> extends Omit<AriaSelectProps<T>, 'children
    * An optional keyboard delegate implementation for type to select,
    * to override the default.
    */
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate,
+  /** A ref to the hidden `<select>` element. */
+  hiddenSelectRef?: RefObject<HTMLSelectElement>
 }
 
-export interface SelectAria<T> {
+export interface SelectAria<T> extends FormValidationResult {
   /** Props for the label element. */
   labelProps: DOMAttributes,
 
@@ -51,6 +54,13 @@ export interface SelectAria<T> {
   errorMessageProps: DOMAttributes
 }
 
+interface SelectData extends AriaHiddenSelectProps {
+  isRequired?: boolean,
+  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.
@@ -110,9 +120,12 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     }
   });
 
+  let {validationState, errorMessage, validationDetails} = useFormValidation(props.hiddenSelectRef, props.validationState, props.errorMessage, props.validationBehavior, props.onValidationChange);
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    validationState,
+    errorMessage
   });
 
   typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
@@ -123,6 +136,15 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
 
   let valueId = useId();
 
+  selectData.set(state, {
+    autoComplete: props.autoComplete,
+    label: props.label,
+    name: props.name,
+    isDisabled,
+    isRequired: props.isRequired,
+    validationBehavior: props.validationBehavior
+  });
+
   return {
     labelProps: {
       ...labelProps,
@@ -206,6 +228,9 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
       ].filter(Boolean).join(' ')
     },
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    validationState,
+    errorMessage,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/slider/src/useSliderThumb.ts b/packages/@react-aria/slider/src/useSliderThumb.ts
index 59e16f699ec..310ae0ba335 100644
--- a/packages/@react-aria/slider/src/useSliderThumb.ts
+++ b/packages/@react-aria/slider/src/useSliderThumb.ts
@@ -1,5 +1,5 @@
 import {AriaSliderThumbProps} from '@react-types/slider';
-import {clamp, focusWithoutScrolling, mergeProps, useGlobalListeners} from '@react-aria/utils';
+import {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils';
 import {DOMAttributes} from '@react-types/shared';
 import {getSliderThumbId, sliderIds} from './utils';
 import React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';
@@ -50,7 +50,8 @@ export function useSliderThumb(
     validationState,
     trackRef,
     inputRef,
-    orientation = state.orientation
+    orientation = state.orientation,
+    name
   } = opts;
 
   let isDisabled = opts.isDisabled || state.isDisabled;
@@ -223,6 +224,10 @@ export function useSliderThumb(
     }
   ) : {};
 
+  useFormReset(inputRef, value, (v) => {
+    state.setThumbValue(index, v);
+  });
+
   // We install mouse handlers for the drag motion on the thumb div, but
   // not the key handler for moving the thumb with the slider.  Instead,
   // we focus the range input, and let the browser handle the keyboard
@@ -235,6 +240,7 @@ export function useSliderThumb(
       max: state.getThumbMaxValue(index),
       step: state.step,
       value: value,
+      name,
       disabled: isDisabled,
       'aria-orientation': orientation,
       'aria-valuetext': state.getThumbValueLabel(index),
diff --git a/packages/@react-aria/textfield/src/useFormattedTextField.ts b/packages/@react-aria/textfield/src/useFormattedTextField.ts
index d4cb134f126..c217c477edb 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 {inputProps: textFieldProps, ...otherProps} = useTextField(props, inputRef);
 
   let compositionStartState = useRef(null);
   return {
@@ -149,8 +149,6 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
         }
       }
     ),
-    labelProps,
-    descriptionProps,
-    errorMessageProps
+    ...otherProps
   };
 }
diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
index 63939287175..91a29bcb16d 100644
--- a/packages/@react-aria/textfield/src/useTextField.ts
+++ b/packages/@react-aria/textfield/src/useTextField.ts
@@ -20,7 +20,7 @@ import {
   RefObject
 } from 'react';
 import {DOMAttributes} from '@react-types/shared';
-import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {filterDOMProps, FormValidationResult, mergeProps, useFormReset, useFormValidation} from '@react-aria/utils';
 import {useField} from '@react-aria/label';
 import {useFocusable} from '@react-aria/focus';
 
@@ -85,7 +85,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 FormValidationResult {
   /** Props for the input element. */
   inputProps: TextFieldInputProps<T>,
   /** Props for the text field's visible label element, if any. */
@@ -109,13 +109,21 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     inputElementType = 'input',
     isDisabled = false,
     isRequired = false,
+    validationBehavior = 'aria',
+    onValidationChange,
     isReadOnly = false,
-    validationState,
     type = 'text',
+    value,
+    defaultValue,
     onChange = () => {}
   }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;
+  let {validationState, errorMessage, validationDetails} = useFormValidation(ref, props.validationState, props.errorMessage, validationBehavior, onValidationChange);
   let {focusableProps} = useFocusable(props, ref);
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
+    ...props,
+    validationState,
+    errorMessage
+  });
   let domProps = filterDOMProps(props, {labelable: true});
 
   const inputOnlyProps = {
@@ -123,6 +131,8 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     pattern: props.pattern
   };
 
+  useFormReset(ref, value ?? defaultValue ?? '', onChange);
+
   return {
     labelProps,
     inputProps: mergeProps(
@@ -131,7 +141,8 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
       {
         disabled: isDisabled,
         readOnly: isReadOnly,
-        'aria-required': isRequired || undefined,
+        required: isRequired && validationBehavior === 'native',
+        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
         'aria-invalid': validationState === 'invalid' || undefined,
         'aria-errormessage': props['aria-errormessage'],
         'aria-activedescendant': props['aria-activedescendant'],
@@ -168,6 +179,9 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
       }
     ),
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    validationState,
+    errorMessage,
+    validationDetails
   };
 }
diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts
index fbdc842ddd1..0b6545353a1 100644
--- a/packages/@react-aria/toggle/src/useToggle.ts
+++ b/packages/@react-aria/toggle/src/useToggle.ts
@@ -11,7 +11,7 @@
  */
 
 import {AriaToggleProps} from '@react-types/checkbox';
-import {filterDOMProps, mergeProps} 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';
@@ -39,6 +39,7 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
   let {
     isDisabled = false,
     isRequired = false,
+    validationBehavior = 'aria',
     isReadOnly = false,
     value,
     name,
@@ -70,15 +71,18 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
   let interactions = mergeProps(pressProps, focusableProps);
   let domProps = filterDOMProps(props, {labelable: true});
 
+  useFormReset(ref, state.isSelected, state.setSelected);
+
   return {
     inputProps: mergeProps(domProps, {
       'aria-invalid': validationState === 'invalid' || 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,
       onChange,
       disabled: isDisabled,
+      required: isRequired && validationBehavior === 'native',
       ...(value == null ? {} : {value}),
       name,
       type: 'checkbox',
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index d63b4b1f4e0..7484582b331 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -36,3 +36,5 @@ export {clamp, snapValueToStep} from '@react-stately/utils';
 export {isVirtualClick, isVirtualPointerEvent} from './isVirtualEvent';
 export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
+export {useFormReset, useFormValidation, useFormValidationState, mergeValidity} from './useFormReset';
+export type {FormValidationResult} from './useFormReset';
diff --git a/packages/@react-aria/utils/src/useFormReset.ts b/packages/@react-aria/utils/src/useFormReset.ts
new file mode 100644
index 00000000000..0cefcc6bb7b
--- /dev/null
+++ b/packages/@react-aria/utils/src/useFormReset.ts
@@ -0,0 +1,229 @@
+/*
+ * 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 {FormValidationEvent, ValidationState} from '@react-types/shared';
+import {ReactNode, RefObject, useEffect, useRef, useState} from 'react';
+import {useEffectEvent} from './useEffectEvent';
+
+export function useFormReset<T>(
+  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+  initialValue: T,
+  onReset: (value: T) => void
+) {
+  let resetValue = useRef(initialValue);
+  let handleReset = useEffectEvent(() => {
+    if (onReset) {
+      onReset(resetValue.current);
+    }
+  });
+
+  useEffect(() => {
+    let form = ref?.current?.form;
+    form?.addEventListener('reset', handleReset);
+    return () => {
+      form?.removeEventListener('reset', handleReset);
+    };
+  }, [ref, handleReset]);
+}
+
+export interface FormValidationResult {
+  /** The validation state of the input. */
+  validationState: ValidationState,
+  /** The form validation error message for the input. */
+  errorMessage: ReactNode,
+  /** The native form validation details for the input element. */
+  validationDetails: ValidityState
+}
+
+export function useFormValidation(
+  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+  validationState: ValidationState,
+  errorMessage: ReactNode,
+  validationBehavior: 'native' | 'aria',
+  onValidationChange?: (value: FormValidationEvent) => void
+): FormValidationResult {
+  useEffect(() => {
+    if (validationBehavior === 'native') {
+      // Use the provided error message if available, otherwise use a default string.
+      // This is usually not shown to the user because there is often a custom UI for error messages,
+      // but it is required to mark the input as invalid and prevent form submission.
+      let error = '';
+      if (validationState === 'invalid') {
+        error = typeof errorMessage === 'string' && errorMessage ? errorMessage : 'Invalid value.';
+      }
+      ref.current?.setCustomValidity(error);
+    }
+  }, [validationBehavior, validationState, errorMessage, ref]);
+
+  let [result, setValidity] = useFormValidationState(validationState, errorMessage);
+  useInputValidity(validationBehavior === 'native' ? ref : null, (validity) => {
+    setValidity(validity);
+    if (onValidationChange) {
+      onValidationChange({
+        isInvalid: !validity.validationDetails.valid,
+        errorMessage: validity.errorMessage,
+        validationDetails: validity.validationDetails
+      });
+    }
+  });
+
+  return result;
+}
+
+interface InputValidity {
+  validationDetails: ValidityState,
+  errorMessage: string
+}
+
+const DEFAULT_VALIDITY: InputValidity = {
+  validationDetails: {
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valueMissing: false,
+    valid: true
+  },
+  errorMessage: ''
+};
+
+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<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+  onValidationChange?: (value: InputValidity) => void
+) {
+  let validation = useRef(DEFAULT_VALIDITY);
+  let updateValidation = useEffectEvent((newValidation: InputValidity) => {
+    // Ignore custom errors. We don't want events for these.
+    if (newValidation.validationDetails.customError) {
+      return;
+    }
+
+    // Ignore duplicate events.
+    if (
+      validation.current.errorMessage === newValidation.errorMessage &&
+      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: InputEvent) => {
+      e.preventDefault();
+      updateValidation({
+        validationDetails: getValidity(input),
+        errorMessage: input.validationMessage
+      });
+    };
+
+    let onChange = () => {
+      if (input.validity.valid) {
+        updateValidation({
+          validationDetails: getValidity(input),
+          errorMessage: input.validationMessage
+        });
+      }
+    };
+
+    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 getValidationResult(validity: InputValidity, validationState: ValidationState, errorMessage: ReactNode) {
+  if (!validationState && !validity.validationDetails.valid && !validity.validationDetails.customError) {
+    // Use native error unless a custom one is provided.
+    validationState = 'invalid';
+    errorMessage = validity.errorMessage;
+  }
+
+  return {
+    validationState,
+    errorMessage,
+    validationDetails: validity.validationDetails
+  };
+}
+
+export function useFormValidationState(validationState: ValidationState, errorMessage: ReactNode): [FormValidationResult, (validity: InputValidity) => void] {
+  let [validation, setValidation] = useState<InputValidity>(DEFAULT_VALIDITY);
+  return [getValidationResult(validation, validationState, errorMessage), setValidation];
+}
+
+export function mergeValidity(a: ValidityState, b: ValidityState) {
+  return {
+    badInput: a.badInput || b.badInput,
+    customError: a.customError || b.customError,
+    patternMismatch: a.patternMismatch || b.patternMismatch,
+    rangeOverflow: a.rangeOverflow || b.rangeOverflow,
+    rangeUnderflow: a.rangeUnderflow || b.rangeUnderflow,
+    stepMismatch: a.stepMismatch || b.stepMismatch,
+    tooLong: a.tooLong || b.tooLong,
+    tooShort: a.tooShort || b.tooShort,
+    typeMismatch: a.typeMismatch || b.typeMismatch,
+    valueMissing: a.valueMissing || b.valueMissing,
+    valid: a.valid && b.valid
+  };
+}
diff --git a/packages/@react-spectrum/checkbox/src/Checkbox.tsx b/packages/@react-spectrum/checkbox/src/Checkbox.tsx
index 9b7aa2bca76..93c7eaec23a 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,13 +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,
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
@@ -46,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, validationState} = groupState
     // eslint-disable-next-line react-hooks/rules-of-hooks
     ? useCheckboxGroupItem({
       ...props,
diff --git a/packages/@react-spectrum/checkbox/test/Checkbox.test.js b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
index 75baef4bcb8..72532e5ad18 100644
--- a/packages/@react-spectrum/checkbox/test/Checkbox.test.js
+++ b/packages/@react-spectrum/checkbox/test/Checkbox.test.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, render} from '@react-spectrum/test-utils';
+import {act, fireEvent, render} from '@react-spectrum/test-utils';
 import {Checkbox} from '../';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
@@ -261,4 +261,126 @@ describe('Checkbox', function () {
     expect(checkbox.checked).toBeFalsy();
     expect(onChangeSpy).not.toHaveBeenCalled();
   });
+
+  it('supports form reset', () => {
+    function Test() {
+      let [isSelected, setSelected] = React.useState(false);
+      return (
+        <form>
+          <Checkbox data-testid="checkbox" isSelected={isSelected} onChange={setSelected}>Checkbox</Checkbox>
+          <input type="reset" data-testid="reset" />
+        </form>
+      );
+    }
+
+    let {getByTestId} = render(<Test />);
+    let input = getByTestId('checkbox');
+
+    expect(input).not.toBeChecked();
+    act(() => userEvent.click(input));
+    expect(input).toBeChecked();
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(input).not.toBeChecked();
+  });
+
+  it('supports validationBehavior', () => {
+    let {getByRole, rerender} = render(<Checkbox isRequired>Checkbox</Checkbox>);
+    let input = getByRole('checkbox');
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(input).not.toHaveAttribute('required');
+
+    rerender(<Checkbox isRequired validationBehavior="native">Checkbox</Checkbox>);
+    expect(input).not.toHaveAttribute('aria-required', 'true');
+    expect(input).toHaveAttribute('required');
+  });
+
+  it('supports native validation', async () => {
+    let onValidationChange = jest.fn();
+    let {getByTestId, getByRole} = render(
+      <form data-testid="form">
+        <Checkbox name="test" validationBehavior="native" isRequired onValidationChange={onValidationChange}>Checkbox</Checkbox>
+      </form>
+    );
+    let input = getByRole('checkbox');
+    let form = getByTestId('form');
+
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(onValidationChange).not.toHaveBeenCalled();
+
+    act(() => {form.checkValidity();});
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(onValidationChange).toHaveBeenCalledTimes(1);
+    expect(onValidationChange).toHaveBeenLastCalledWith({
+      isInvalid: true,
+      errorMessage: 'Constraints not satisfied',
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valueMissing: true,
+        valid: false
+      }
+    });
+
+    act(() => userEvent.click(input));
+    fireEvent.change(input); // old user-event in React 16 tests doesn't fire change event.
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(onValidationChange).toHaveBeenCalledTimes(2);
+    expect(onValidationChange).toHaveBeenLastCalledWith({
+      isInvalid: false,
+      errorMessage: '',
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valueMissing: false,
+        valid: true
+      }
+    });
+  });
+
+  it('supports native custom validation message', async () => {
+    let tree = (validationState) => (
+      <form data-testid="form">
+        <Checkbox name="test" validationBehavior="native" validationState={validationState}>Checkbox</Checkbox>
+      </form>
+    );
+
+    let {getByRole, rerender} = render(tree('invalid', 'custom'));
+    let input = getByRole('checkbox');
+
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(input.validity.valid).toBe(false);
+    expect(input.validity.customError).toBe(true);
+
+    rerender(tree(undefined, undefined));
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(input.validity.valid).toBe(true);
+  });
+
+  it('should not set native validation message when validationBehavior=aria', async () => {
+    let {getByRole} = render(
+      <form data-testid="form">
+        <Checkbox name="test" validationState="invalid">Checkbox</Checkbox>
+      </form>
+    );
+    let input = getByRole('checkbox');
+
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(input.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 b11f070a51b..96ae29d911c 100644
--- a/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
+++ b/packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, render, within} from '@react-spectrum/test-utils';
 import {Checkbox, CheckboxGroup} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
-import {render, within} from '@react-spectrum/test-utils';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
@@ -372,4 +372,55 @@ describe('CheckboxGroup', () => {
     let description = document.getElementById(group.getAttribute('aria-describedby'));
     expect(description).toHaveTextContent('Error message');
   });
+
+  it('supports form reset', () => {
+    function Test() {
+      let [value, setValue] = React.useState(['dogs']);
+      return (
+        <Provider theme={theme}>
+          <form>
+            <CheckboxGroup name="pets" label="Pets" value={value} onChange={setValue}>
+              <Checkbox value="dogs">Dogs</Checkbox>
+              <Checkbox value="cats">Cats</Checkbox>
+              <Checkbox value="dragons">Dragons</Checkbox>
+            </CheckboxGroup>
+            <input type="reset" data-testid="reset" />
+          </form>
+        </Provider>
+      );
+    }
+
+    let {getAllByRole, getByTestId} = render(<Test />);
+    let checkboxes = getAllByRole('checkbox');
+
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[1]).not.toBeChecked();
+    expect(checkboxes[2]).not.toBeChecked();
+    act(() => userEvent.click(checkboxes[1]));
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[1]).toBeChecked();
+    expect(checkboxes[2]).not.toBeChecked();
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[1]).not.toBeChecked();
+    expect(checkboxes[2]).not.toBeChecked();
+  });
+
+  it('supports validationBehavior=native', () => {
+    let {getAllByRole} = render(
+      <Provider theme={theme}>
+        <CheckboxGroup label="Favorite Pet" validationBehavior="native">
+          <Checkbox value="dogs" isRequired>Dogs</Checkbox>
+          <Checkbox value="cats" isRequired>Cats</Checkbox>
+          <Checkbox value="dragons" isRequired>Dragons</Checkbox>
+        </CheckboxGroup>
+      </Provider>
+    );
+    for (let input of getAllByRole('checkbox')) {
+      expect(input).toHaveAttribute('required');
+      expect(input).not.toHaveAttribute('aria-required');
+    }
+  });
 });
diff --git a/packages/@react-spectrum/color/package.json b/packages/@react-spectrum/color/package.json
index 23ab22b95d4..54adc7bb790 100644
--- a/packages/@react-spectrum/color/package.json
+++ b/packages/@react-spectrum/color/package.json
@@ -42,6 +42,7 @@
     "@react-aria/interactions": "^3.15.1",
     "@react-aria/slider": "^3.4.1",
     "@react-aria/utils": "^3.17.0",
+    "@react-spectrum/form": "^3.6.2",
     "@react-spectrum/label": "^3.12.1",
     "@react-spectrum/layout": "^3.5.2",
     "@react-spectrum/textfield": "^3.10.2",
diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx
index 7f94e9b0991..a96161b4cea 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');
@@ -43,10 +42,9 @@ function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
   return (
     <TextFieldBase
       {...otherProps}
+      {...result}
       ref={ref}
       inputRef={inputRef}
-      labelProps={labelProps}
-      inputProps={inputProps}
       inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />
   );
 }
diff --git a/packages/@react-spectrum/color/test/ColorArea.test.tsx b/packages/@react-spectrum/color/test/ColorArea.test.tsx
index 34d136b10f8..b9b0b461d32 100644
--- a/packages/@react-spectrum/color/test/ColorArea.test.tsx
+++ b/packages/@react-spectrum/color/test/ColorArea.test.tsx
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, fireEvent, installMouseEvent, installPointerEvent, render} from '@react-spectrum/test-utils';
 import {ColorArea} from '../';
 import {composeStories} from '@storybook/testing-react';
 import {defaultTheme} from '@adobe/react-spectrum';
-import {fireEvent, installMouseEvent, installPointerEvent, render} from '@react-spectrum/test-utils';
 import {parseColor} from '@react-stately/color';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -631,4 +631,42 @@ describe('ColorArea', () => {
       expect(document.activeElement).toBe(zSlider);
     });
   });
+
+  describe('forms', () => {
+    it('supports form name', () => {
+      let {getAllByRole} = render(<ColorArea xName="red" yName="green" />);
+      let inputs = getAllByRole('slider', {hidden: true});
+      expect(inputs[0]).toHaveAttribute('name', 'red');
+      expect(inputs[0]).toHaveValue('255');
+      expect(inputs[1]).toHaveAttribute('name', 'green');
+      expect(inputs[1]).toHaveValue('255');
+    });
+
+    it('supports form reset', () => {
+      function Test() {
+        let [value, setValue] = React.useState(parseColor('rgb(100, 200, 0)'));
+        return (
+          <form>
+            <ColorArea value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+      }
+
+      let {getByTestId, getAllByRole} = render(<Test />);
+      let inputs = getAllByRole('slider', {hidden: true});
+
+      expect(inputs[0]).toHaveValue('100');
+      expect(inputs[1]).toHaveValue('200');
+      fireEvent.change(inputs[0], {target: {value: '10'}});
+      fireEvent.change(inputs[1], {target: {value: '20'}});
+      expect(inputs[0]).toHaveValue('10');
+      expect(inputs[1]).toHaveValue('20');
+
+      let button = getByTestId('reset');
+      act(() => userEvent.click(button));
+      expect(inputs[0]).toHaveValue('100');
+      expect(inputs[1]).toHaveValue('200');
+    });
+  });
 });
diff --git a/packages/@react-spectrum/color/test/ColorField.test.js b/packages/@react-spectrum/color/test/ColorField.test.js
index c73e4fb3388..3824705976b 100644
--- a/packages/@react-spectrum/color/test/ColorField.test.js
+++ b/packages/@react-spectrum/color/test/ColorField.test.js
@@ -96,7 +96,14 @@ describe('ColorField', function () {
   it('should be required', function () {
     let {getByLabelText} = renderComponent({isRequired: true});
     let colorField = getByLabelText(/Primary Color/);
-    expect(colorField).toBeRequired();
+    expect(colorField).toHaveAttribute('aria-required', 'true');
+    expect(colorField).not.toHaveAttribute('required');
+  });
+
+  it('should support validationBehavior=native', function () {
+    let {getByLabelText} = renderComponent({isRequired: true, validationBehavior: 'native'});
+    let colorField = getByLabelText(/Primary Color/);
+    expect(colorField).toHaveAttribute('required');
   });
 
   it('should be empty when invalid value is provided', function () {
@@ -366,4 +373,93 @@ describe('ColorField', function () {
     fireEvent.keyUp(colorField, {key});
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
   });
+
+  it('supports form reset', async () => {
+    function Test() {
+      let [value, setValue] = React.useState(parseColor('#abc'));
+      return (
+        <Provider theme={theme}>
+          <form>
+            <ColorField data-testid="input" label="Color" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        </Provider>
+      );
+    }
+
+    let {getByTestId} = render(<Test />);
+    let input = getByTestId('input');
+
+    expect(input).toHaveValue('#AABBCC');
+    await act(() => userEvent.type(input, '{selectall}'));
+    typeText(input, 'def');
+    act(() => input.blur());
+    expect(input).toHaveValue('#DDEEFF');
+
+    let button = getByTestId('reset');
+    act(() => input.blur());
+    act(() => userEvent.click(button));
+    expect(input).toHaveValue('#AABBCC');
+  });
+
+  it('supports native validation', async () => {
+    let {getByTestId} = render(
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <ColorField label="Color" data-testid="input" name="color" validationBehavior="native" isRequired />
+        </form>
+      </Provider>
+    );
+    let input = getByTestId('input');
+    let form = getByTestId('form');
+
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(input).not.toHaveAttribute('aria-invalid');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
+
+  it('supports native custom validation message', async () => {
+    let tree = (validationState, errorMessage) => (
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <ColorField label="Color" data-testid="input" name="color" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+        </form>
+      </Provider>
+    );
+
+    let {getByTestId, rerender} = render(tree('invalid', 'custom'));
+    let input = getByTestId('input');
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(input.validity.valid).toBe(false);
+    expect(input.validationMessage).toBe('custom');
+
+    rerender(tree(undefined, undefined));
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(input.validity.valid).toBe(true);
+  });
+
+  it('should not set native validation message when validationBehavior=aria', async () => {
+    let {getByTestId} = render(
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <ColorField label="Color" data-testid="input" name="color" validationState="invalid" errorMessage="custom" />
+        </form>
+      </Provider>
+    );
+    let input = getByTestId('input');
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(input.validity.valid).toBe(true);
+  });
 });
diff --git a/packages/@react-spectrum/color/test/ColorSlider.test.tsx b/packages/@react-spectrum/color/test/ColorSlider.test.tsx
index e7ab3380f81..6f904872212 100644
--- a/packages/@react-spectrum/color/test/ColorSlider.test.tsx
+++ b/packages/@react-spectrum/color/test/ColorSlider.test.tsx
@@ -259,6 +259,36 @@ describe('ColorSlider', () => {
     expect(document.activeElement).toBe(buttonA);
   });
 
+  it('supports form name', () => {
+    let {getByRole} = render(<ColorSlider defaultValue="#7f0000" channel="red" name="redColor" />);
+    let input = getByRole('slider');
+    expect(input).toHaveAttribute('name', 'redColor');
+    expect(input).toHaveValue('127');
+  });
+
+  it('supports form reset', () => {
+    function Test() {
+      let [value, setValue] = React.useState(parseColor('#7f0000'));
+      return (
+        <form>
+          <ColorSlider channel="red" value={value} onChange={setValue} />
+          <input type="reset" data-testid="reset" />
+        </form>
+      );
+    }
+
+    let {getByTestId, getByRole} = render(<Test />);
+    let input = getByRole('slider');
+
+    expect(input).toHaveValue('127');
+    fireEvent.change(input, {target: {value: '255'}});
+    expect(input).toHaveValue('255');
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(input).toHaveValue('127');
+  });
+
   describe('keyboard events', () => {
     it('works', () => {
       let defaultColor = parseColor('#000000');
diff --git a/packages/@react-spectrum/color/test/ColorWheel.test.tsx b/packages/@react-spectrum/color/test/ColorWheel.test.tsx
index deef385708a..07444b1a88b 100644
--- a/packages/@react-spectrum/color/test/ColorWheel.test.tsx
+++ b/packages/@react-spectrum/color/test/ColorWheel.test.tsx
@@ -94,6 +94,36 @@ describe('ColorWheel', () => {
     expect(document.activeElement).toBe(buttonA);
   });
 
+  it('supports form name', () => {
+    let {getByRole} = render(<ColorWheel name="hue" />);
+    let input = getByRole('slider');
+    expect(input).toHaveAttribute('name', 'hue');
+    expect(input).toHaveValue('0');
+  });
+
+  it('supports form reset', () => {
+    function Test() {
+      let [value, setValue] = React.useState(parseColor('hsl(15, 100%, 50%)'));
+      return (
+        <form>
+          <ColorWheel value={value} onChange={setValue} />
+          <input type="reset" data-testid="reset" />
+        </form>
+      );
+    }
+
+    let {getByTestId, getByRole} = render(<Test />);
+    let input = getByRole('slider');
+
+    expect(input).toHaveValue('15');
+    fireEvent.change(input, {target: {value: '30'}});
+    expect(input).toHaveValue('30');
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(input).toHaveValue('15');
+  });
+
   describe('labelling', () => {
     it('should support a custom aria-label', () => {
       let {getByRole} = render(<ColorWheel aria-label="Color hue" />);
diff --git a/packages/@react-spectrum/combobox/package.json b/packages/@react-spectrum/combobox/package.json
index bdbe6547a88..9dbecff3b09 100644
--- a/packages/@react-spectrum/combobox/package.json
+++ b/packages/@react-spectrum/combobox/package.json
@@ -46,6 +46,7 @@
     "@react-aria/overlays": "^3.14.1",
     "@react-aria/utils": "^3.17.0",
     "@react-spectrum/button": "^3.12.2",
+    "@react-spectrum/form": "^3.6.2",
     "@react-spectrum/label": "^3.12.1",
     "@react-spectrum/listbox": "^3.10.1",
     "@react-spectrum/overlays": "^5.1.1",
diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx
index 529ecafdb61..478ed80c286 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');
@@ -73,8 +75,14 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
     direction = 'bottom',
     isQuiet,
     loadingState,
-    onLoadMore
+    onLoadMore,
+    allowsCustomValue,
+    name,
+    formValue = 'text'
   } = props;
+  if (allowsCustomValue) {
+    formValue = 'text';
+  }
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let isAsync = loadingState != null;
@@ -96,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, ...otherFieldProps} = useComboBox(
     {
       ...props,
       keyboardDelegate: layout,
@@ -104,7 +112,8 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
       popoverRef: unwrappedPopoverRef,
       listBoxRef,
       inputRef: inputRef,
-      menuTrigger
+      menuTrigger,
+      name: formValue === 'text' ? name : undefined
     },
     state
   );
@@ -137,9 +146,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
     <>
       <Field
         {...props}
-        descriptionProps={descriptionProps}
-        errorMessageProps={errorMessageProps}
-        labelProps={labelProps}
+        {...otherFieldProps}
         ref={domRef}>
         <ComboBoxInput
           {...props}
@@ -148,8 +155,10 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
           inputProps={inputProps}
           inputRef={inputRef}
           triggerProps={buttonProps}
-          triggerRef={buttonRef} />
+          triggerRef={buttonRef}
+          validationState={otherFieldProps.validationState} />
       </Field>
+      {name && formValue === 'key' && <input type="hidden" name={name} value={state.selectedKey ?? ''} />}
       <Popover
         state={state}
         UNSAFE_style={style}
diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
index 365204133ae..edbb9dc43f5 100644
--- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
@@ -27,9 +27,9 @@ import {FocusRing, focusSafely, FocusScope} from '@react-aria/focus';
 import intlMessages from '../intl/*.json';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
-import {mergeProps, useId} from '@react-aria/utils';
+import {mergeProps, useFormReset, useFormValidation, useId, useUpdateEffect} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useRef, useState} from 'react';
+import React, {HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useRef, useState} from 'react';
 import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {setInteractionModality, useHover} from '@react-aria/interactions';
 import {SpectrumComboBoxProps} from '@react-types/combobox';
@@ -50,9 +50,17 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
   let {
     isQuiet,
     isDisabled,
-    validationState,
-    isReadOnly
+    isReadOnly,
+    name,
+    formValue = 'text',
+    allowsCustomValue,
+    isRequired,
+    validationBehavior,
+    onValidationChange
   } = props;
+  if (allowsCustomValue) {
+    formValue = 'text';
+  }
 
   let {contains} = useFilter({sensitivity: 'base'});
   let state = useComboBoxState({
@@ -69,9 +77,13 @@ 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);
+  let {validationState, errorMessage} = useFormValidation(inputRef, props.validationState, props.errorMessage, validationBehavior, onValidationChange);
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    validationState,
+    errorMessage
   });
 
   // Focus the button and show focus ring when clicking on the label
@@ -82,11 +94,37 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
     }
   };
 
+  let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+    type: 'hidden',
+    name,
+    value: formValue === 'text' ? state.inputValue : state.selectedKey ?? ''
+  };
+
+  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);
+  useUpdateEffect(() => {
+    // When the value changes, emit an event for form validation to pick up.
+    inputRef.current?.dispatchEvent(new Event('change', {bubbles: true}));
+  }, [inputProps.value]);
+
   return (
     <>
       <Field
         {...props}
         labelProps={labelProps}
+        validationState={validationState}
+        errorMessage={errorMessage}
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
         elementType="span"
         ref={domRef}
         includeNecessityIndicatorInAccessibilityName>
@@ -101,6 +139,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
           {state.inputValue || props.placeholder || ''}
         </ComboBoxButton>
       </Field>
+      {name && <input {...inputProps} ref={inputRef} />}
       <Tray state={state} isFixedHeight {...overlayProps}>
         <ComboBoxTray
           {...props}
@@ -301,7 +340,9 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       buttonRef: unwrapDOMRef(buttonRef),
       popoverRef: popoverRef,
       listBoxRef,
-      inputRef
+      inputRef,
+      // Handled outside the tray.
+      name: undefined
     },
     state
   );
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index e650ddc4dfd..7ecd532c806 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -4724,7 +4724,7 @@ describe('ComboBox', function () {
     });
 
     afterAll(function () {
-      jest.restoreAllMocks();
+      jest.clearAllMocks();
     });
     // NVDA workaround so that letters are read out when user presses left/right arrow to navigate through what they typed
     it('clears aria-activedescendant when user presses left/right arrow (NVDA fix)', function () {
@@ -5158,4 +5158,360 @@ describe('ComboBox', function () {
       });
     });
   });
+
+  describe('forms', () => {
+    describe('desktop', () => {
+      beforeAll(function () {
+        jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
+      });
+
+      afterAll(function () {
+        jest.clearAllMocks();
+      });
+
+      it('should support validationBehavior', () => {
+        let {getByRole, rerender} = render(<ExampleComboBox isRequired />);
+        let input = getByRole('combobox');
+        expect(input).toHaveAttribute('aria-required', 'true');
+        expect(input).not.toHaveAttribute('required');
+
+        rerender(<ExampleComboBox isRequired validationBehavior="native" />);
+        expect(input).not.toHaveAttribute('aria-required', 'true');
+        expect(input).toHaveAttribute('required');
+      });
+
+      it('should support form reset', () => {
+        let {getByRole, getByTestId} = render(
+          <form>
+            <ExampleComboBox name="test" />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+
+        let combobox = getByRole('combobox');
+        expect(combobox).toHaveAttribute('name', 'test');
+        typeText(combobox, 'Tw');
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        let listbox = getByRole('listbox');
+        let items = within(listbox).getAllByRole('option');
+        act(() => {
+          triggerPress(items[0]);
+          jest.runAllTimers();
+        });
+
+        expect(combobox).toHaveValue('Two');
+
+        let button = getByTestId('reset');
+        act(() => userEvent.click(button));
+        expect(combobox).toHaveValue('');
+      });
+
+      it('should support formValue', () => {
+        let {getByRole, rerender} = render(<ExampleComboBox name="test" selectedKey="2" />);
+        let input = getByRole('combobox');
+        expect(input).toHaveAttribute('name', 'test');
+        expect(input).toHaveValue('Two');
+        expect(document.querySelector('input[type=hidden]')).toBeNull();
+
+        rerender(<ExampleComboBox name="test" formValue="key" selectedKey="2" />);
+        expect(input).not.toHaveAttribute('name');
+
+        let hiddenInput = document.querySelector('input[type=hidden]');
+        expect(hiddenInput).toHaveAttribute('name', 'test');
+        expect(hiddenInput).toHaveValue('2');
+      });
+
+      it('supports native validation', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId, getByRole} = render(
+          <form data-testid="form">
+            <ExampleComboBox name="test" validationBehavior="native" isRequired onValidationChange={onValidationChange} />
+          </form>
+        );
+        let input = getByRole('combobox');
+        let form = getByTestId('form');
+
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => {form.checkValidity();});
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith({
+          isInvalid: true,
+          errorMessage: 'Constraints not satisfied',
+          validationDetails: {
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: true,
+            valid: false
+          }
+        });
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        typeText(input, 'Tw');
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        let listbox = getByRole('listbox');
+        let items = within(listbox).getAllByRole('option');
+        act(() => {
+          triggerPress(items[0]);
+          jest.runAllTimers();
+        });
+
+        expect(input).toHaveValue('Two');
+        act(() => input.blur());
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith({
+          isInvalid: false,
+          errorMessage: '',
+          validationDetails: {
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+            valid: true
+          }
+        });
+      });
+
+      it('supports native custom validation message', async () => {
+        let tree = (validationState, errorMessage) => (
+          <form data-testid="form">
+            <ExampleComboBox name="test" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+          </form>
+        );
+
+        let {getByRole, rerender} = render(tree('invalid', 'custom'));
+        let input = getByRole('combobox');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+        expect(input.validity.valid).toBe(false);
+        expect(input.validationMessage).toBe('custom');
+
+        rerender(tree(undefined, undefined));
+        expect(input).not.toHaveAttribute('aria-describedby');
+        expect(input).not.toHaveAttribute('aria-invalid');
+        expect(input.validity.valid).toBe(true);
+      });
+
+      it('should not set native validation message when validationBehavior=aria', async () => {
+        let {getByRole} = render(
+          <form data-testid="form">
+            <ExampleComboBox name="test" validationState="invalid" errorMessage="custom" />
+          </form>
+        );
+        let input = getByRole('combobox');
+
+        expect(input).toHaveAttribute('aria-describedby');
+        expect(input).toHaveAttribute('aria-invalid');
+        expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+        expect(input.validity.valid).toBe(true);
+      });
+    });
+
+    describe('mobile', () => {
+      beforeEach(() => {
+        jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
+      });
+
+      afterEach(() => {
+        act(() => jest.runAllTimers());
+        jest.clearAllMocks();
+      });
+
+      it('should support validationBehavior', () => {
+        let {rerender} = render(<ExampleComboBox name="test" isRequired />);
+        let input = document.querySelector('input[name=test]');
+        expect(input).not.toHaveAttribute('required');
+        expect(input).toHaveAttribute('type', 'hidden');
+
+        rerender(<ExampleComboBox name="test" isRequired validationBehavior="native" />);
+        expect(input).toHaveAttribute('required');
+        expect(input).toHaveAttribute('type', 'text');
+        expect(input).toHaveAttribute('hidden');
+      });
+
+      it('should support form reset', () => {
+        let {getByRole, getAllByRole, getByTestId} = render(
+          <form>
+            <ExampleComboBox name="test" />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+
+        let button = getAllByRole('button')[0];
+
+        triggerPress(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');
+        act(() => {
+          triggerPress(items[0]);
+          jest.runAllTimers();
+        });
+
+        let input = document.querySelector('input[name=test]');
+        expect(input).toHaveValue('One');
+
+        let reset = getByTestId('reset');
+        act(() => userEvent.click(reset));
+        expect(input).toHaveValue('');
+      });
+
+      it('should support formValue', () => {
+        let {rerender} = render(<ExampleComboBox name="test" selectedKey="2" />);
+        let input = document.querySelector('input[name=test]');
+        expect(input).toHaveAttribute('type', 'hidden');
+        expect(input).toHaveAttribute('name', 'test');
+        expect(input).toHaveValue('Two');
+
+        rerender(<ExampleComboBox name="test" formValue="key" selectedKey="2" />);
+        expect(input).toHaveValue('2');
+      });
+
+      it('supports native validation', async () => {
+        let onValidationChange = jest.fn();
+        let {getByTestId, getAllByRole, getByRole} = render(
+          <form data-testid="form">
+            <ExampleComboBox name="test" validationBehavior="native" isRequired onValidationChange={onValidationChange} />
+          </form>
+        );
+        let button = getAllByRole('button')[0];
+        let form = getByTestId('form');
+
+        expect(button).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).not.toHaveBeenCalled();
+
+        act(() => {form.checkValidity();});
+        expect(onValidationChange).toHaveBeenCalledTimes(1);
+        expect(onValidationChange).toHaveBeenLastCalledWith({
+          isInvalid: true,
+          errorMessage: 'Constraints not satisfied',
+          validationDetails: {
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: true,
+            valid: false
+          }
+        });
+
+        expect(button).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+        triggerPress(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');
+        act(() => {
+          triggerPress(items[0]);
+          jest.runAllTimers();
+        });
+
+        expect(button).not.toHaveAttribute('aria-describedby');
+        expect(onValidationChange).toHaveBeenCalledTimes(2);
+        expect(onValidationChange).toHaveBeenLastCalledWith({
+          isInvalid: false,
+          errorMessage: '',
+          validationDetails: {
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+            valid: true
+          }
+        });
+      });
+
+      it('supports native custom validation message', async () => {
+        let tree = (validationState, errorMessage) => (
+          <form data-testid="form">
+            <ExampleComboBox name="test" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+          </form>
+        );
+
+        let {getAllByRole, rerender} = render(tree('invalid', 'custom'));
+        let button = getAllByRole('button')[0];
+
+        expect(button).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+        let input = document.querySelector('input[name=test]');
+        expect(input.validity.valid).toBe(false);
+        expect(input.validationMessage).toBe('custom');
+
+        rerender(tree(undefined, undefined));
+        expect(button).not.toHaveAttribute('aria-describedby');
+        expect(input.validity.valid).toBe(true);
+      });
+
+      it('should not set native validation message when validationBehavior=aria', async () => {
+        let {getAllByRole} = render(
+          <form data-testid="form">
+            <ExampleComboBox name="test" validationState="invalid" errorMessage="custom" />
+          </form>
+        );
+        let button = getAllByRole('button')[0];
+
+        expect(button).toHaveAttribute('aria-describedby');
+        expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+        let input = document.querySelector('input[name=test]');
+        expect(input.validity.valid).toBe(true);
+      });
+    });
+  });
 });
diff --git a/packages/@react-spectrum/datepicker/package.json b/packages/@react-spectrum/datepicker/package.json
index a7f9d42da62..151ea103831 100644
--- a/packages/@react-spectrum/datepicker/package.json
+++ b/packages/@react-spectrum/datepicker/package.json
@@ -46,6 +46,7 @@
     "@react-spectrum/button": "^3.12.2",
     "@react-spectrum/calendar": "^3.2.2",
     "@react-spectrum/dialog": "^3.7.2",
+    "@react-spectrum/form": "^3.6.2",
     "@react-spectrum/label": "^3.12.1",
     "@react-spectrum/layout": "^3.5.2",
     "@react-spectrum/utils": "^3.9.2",
diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx
index 337ec89454f..f3439c653f3 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,
@@ -43,8 +45,12 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
     createCalendar
   });
 
+  let fieldRef = useRef(null);
   let inputRef = useRef(null);
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useDateField(props, state, inputRef);
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, validationState, errorMessage} = useDateField({
+    ...props,
+    inputRef
+  }, state, fieldRef);
 
   // Note: this description is intentionally not passed to useDatePicker.
   // The format help text is unnecessary for screen reader users because each segment already has a label.
@@ -59,18 +65,19 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
       ref={domRef}
       elementType="span"
       description={description}
+      errorMessage={errorMessage}
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <Input
-        ref={inputRef}
+        ref={fieldRef}
         fieldProps={fieldProps}
         isDisabled={isDisabled}
         isQuiet={isQuiet}
         autoFocus={autoFocus}
-        validationState={state.validationState}
+        validationState={validationState}
         className={classNames(datepickerStyles, 'react-spectrum-DateField')}>
         {state.segments.map((segment, i) =>
           (<DatePickerSegment
@@ -81,6 +88,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
             isReadOnly={isReadOnly}
             isRequired={isRequired} />)
         )}
+        <input {...inputProps} ref={inputRef} />
       </Input>
     </Field>
   );
diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
index e02a4245d56..e66ec6cf4b4 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,
@@ -53,7 +55,19 @@ 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,
+    validationState,
+    errorMessage
+  } = useDatePicker(props, state, targetRef);
   let {isOpen, setOpen} = state;
   let {direction} = useLocale();
   let domRef = useFocusManagerRef(ref);
@@ -76,7 +90,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': validationState === 'invalid' && !isDisabled,
       'is-disabled': isDisabled,
       'is-hovered': isHovered,
       'is-focused': isFocused,
@@ -89,7 +103,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     'spectrum-InputGroup-input',
     {
       'is-disabled': isDisabled,
-      'is-invalid': state.validationState === 'invalid' && !isDisabled
+      'is-invalid': validationState === 'invalid' && !isDisabled
     }
   );
 
@@ -115,10 +129,11 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
       ref={domRef}
       elementType="span"
       description={description}
+      errorMessage={errorMessage}
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <div
         {...mergeProps(groupProps, hoverProps, focusProps)}
@@ -127,7 +142,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>
@@ -149,7 +164,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>
@@ -159,7 +174,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
                 <Calendar
                   {...calendarProps}
                   visibleMonths={visibleMonths}
-                  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 &&
                   <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>
                     <TimeField
diff --git a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
index adfa67184a0..51f3ffba42a 100644
--- a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
@@ -41,7 +41,8 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
     createCalendar
   });
 
-  let {fieldProps} = useDateField(props, state, ref);
+  let inputRef = useRef();
+  let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);
 
   return (
     <div {...fieldProps} data-testid={props['data-testid']} className={classNames(datepickerStyles, 'react-spectrum-Datepicker-segments', inputClassName)} ref={ref}>
@@ -54,6 +55,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
           isReadOnly={isReadOnly}
           isRequired={isRequired} />)
       )}
+      <input {...inputProps} ref={inputRef} />
     </div>
   );
 }
diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
index f1d7871d9df..36dae1aef9a 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,
@@ -53,7 +55,19 @@ 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,
+    validationState,
+    errorMessage
+  } = useDateRangePicker(props, state, targetRef);
   let {isOpen, setOpen} = state;
   let {direction} = useLocale();
   let domRef = useFocusManagerRef(ref);
@@ -76,7 +90,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     'spectrum-InputGroup',
     {
       'spectrum-InputGroup--quiet': isQuiet,
-      'spectrum-InputGroup--invalid': state.validationState === 'invalid' && !isDisabled,
+      'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
       'is-disabled': isDisabled,
       'is-hovered': isHovered,
       'is-focused': isFocused,
@@ -89,7 +103,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     'spectrum-InputGroup-input',
     {
       'is-disabled': isDisabled,
-      'is-invalid': state.validationState === 'invalid' && !isDisabled
+      'is-invalid': validationState === 'invalid' && !isDisabled
     }
   );
 
@@ -115,10 +129,11 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
       ref={domRef}
       elementType="span"
       description={description}
+      errorMessage={errorMessage}
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>
       <div
         {...mergeProps(groupProps, hoverProps, focusProps)}
@@ -127,7 +142,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>
@@ -163,7 +178,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>
@@ -173,7 +188,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
                 <RangeCalendar
                   {...calendarProps}
                   visibleMonths={visibleMonths}
-                  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/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx
index 74798fd24c3..9510b1920c9 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,
@@ -41,8 +43,12 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
     locale
   });
 
+  let fieldRef = useRef(null);
   let inputRef = useRef(null);
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useTimeField(props, state, inputRef);
+  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, validationState, errorMessage} = useTimeField({
+    ...props,
+    inputRef
+  }, state, fieldRef);
 
   return (
     <Field
@@ -52,15 +58,16 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={state.validationState}
+      validationState={validationState}
+      errorMessage={errorMessage}
       wrapperClassName={classNames(datepickerStyles, 'react-spectrum-TimeField-fieldWrapper')}>
       <Input
-        ref={inputRef}
+        ref={fieldRef}
         fieldProps={fieldProps}
         isDisabled={isDisabled}
         isQuiet={isQuiet}
         autoFocus={autoFocus}
-        validationState={state.validationState}
+        validationState={validationState}
         className={classNames(datepickerStyles, 'react-spectrum-TimeField')}>
         {state.segments.map((segment, i) =>
           (<DatePickerSegment
@@ -71,6 +78,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
             isReadOnly={isReadOnly}
             isRequired={isRequired} />)
         )}
+        <input {...inputProps} ref={inputRef} />
       </Input>
     </Field>
   );
diff --git a/packages/@react-spectrum/datepicker/test/DateField.test.js b/packages/@react-spectrum/datepicker/test/DateField.test.js
index 1c87d65a549..9a29d4067fe 100644
--- a/packages/@react-spectrum/datepicker/test/DateField.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateField.test.js
@@ -11,7 +11,7 @@
  */
 
 import {act, fireEvent, render as render_, within} from '@react-spectrum/test-utils';
-import {CalendarDate} from '@internationalized/date';
+import {CalendarDate, CalendarDateTime, getLocalTimeZone, today, ZonedDateTime} from '@internationalized/date';
 import {DateField} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
@@ -260,6 +260,8 @@ describe('DateField', function () {
     it('should call blur when focus leaves', function () {
       let {getAllByRole} = render(<DateField label="Date" onBlur={onBlurSpy} onFocus={onFocusSpy} onFocusChange={onFocusChangeSpy} />);
       let segments = getAllByRole('spinbutton');
+      // workaround bug in userEvent.tab(). hidden inputs aren't focusable.
+      document.querySelector('input[type=hidden]').tabIndex = -1;
 
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
@@ -300,4 +302,193 @@ describe('DateField', function () {
       expect(onKeyUpSpy).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('forms', () => {
+    it('supports form values', () => {
+      let {rerender} = render(<DateField name="date" label="Date" value={new CalendarDate(2020, 2, 3)} />);
+      let input = document.querySelector('input[name=date]');
+      expect(input).toHaveValue('2020-02-03');
+
+      rerender(<DateField name="date" label="Date" value={new CalendarDateTime(2020, 2, 3, 8, 30)} />);
+      expect(input).toHaveValue('2020-02-03T08:30:00');
+
+      rerender(<DateField name="date" label="Date" value={new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000, 12, 24, 45)} />);
+      expect(input).toHaveValue('2020-02-03T12:24:45-08:00[America/Los_Angeles]');
+    });
+
+    it('supports form reset', () => {
+      function Test() {
+        let [value, setValue] = React.useState(new CalendarDate(2020, 2, 3));
+        return (
+          <form>
+            <DateField name="date" label="Value" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+      }
+
+      let {getByTestId, getByRole, getAllByRole} = render(<Test />);
+      let group = getByRole('group');
+      let input = document.querySelector('input[name=date]');
+      let segments = getAllByRole('spinbutton');
+
+      let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+      expect(getDescription()).toBe('Selected Date: February 3, 2020');
+
+      expect(input).toHaveValue('2020-02-03');
+      expect(input).toHaveAttribute('name', 'date');
+      fireEvent.keyDown(segments[0], {key: 'ArrowUp'});
+      fireEvent.keyUp(segments[0], {key: 'ArrowUp'});
+      expect(getDescription()).toBe('Selected Date: March 3, 2020');
+      expect(input).toHaveValue('2020-03-03');
+
+      let button = getByTestId('reset');
+      act(() => userEvent.click(button));
+      expect(getDescription()).toBe('Selected Date: February 3, 2020');
+      expect(input).toHaveValue('2020-02-03');
+    });
+
+    it('supports native validation', async () => {
+      let onValidationChange = jest.fn();
+      let {getByTestId, getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <DateField label="Value" name="date" validationBehavior="native" isRequired onValidationChange={onValidationChange} />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let form = getByTestId('form');
+
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(onValidationChange).not.toHaveBeenCalled();
+
+      act(() => {form.checkValidity();});
+      expect(onValidationChange).toHaveBeenCalledTimes(1);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: true,
+        errorMessage: 'Constraints not satisfied',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: true,
+          valid: false
+        }
+      });
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+    });
+
+    it('supports native custom validation message', () => {
+      let tree = (validationState, errorMessage) => (
+        <form data-testid="form">
+          <DateField label="Value" name="date" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+        </form>
+      );
+
+      let {getByRole, getAllByRole, rerender} = render(tree('invalid', 'custom'));
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=date]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(input.validity.valid).toBe(false);
+      expect(input.validationMessage).toBe('custom');
+
+      rerender(tree(undefined, undefined));
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+    });
+
+    it('should set native input invalid when outside min/max range', () => {
+      let onValidationChange = jest.fn();
+      let {getAllByRole} = render(
+        <form data-testid="form">
+          <DateField label="Value" name="date" validationBehavior="native" minValue={today(getLocalTimeZone())} defaultValue={today(getLocalTimeZone())} onValidationChange={onValidationChange} />
+        </form>
+      );
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=date]');
+
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+      expect(onValidationChange).not.toHaveBeenCalled();
+
+      fireEvent.keyDown(spinbuttons[0], {key: 'ArrowDown'});
+      fireEvent.keyUp(spinbuttons[0], {key: 'ArrowDown'});
+
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(false);
+      expect(onValidationChange).toHaveBeenCalledTimes(1);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: true,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: true,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: false
+        }
+      });
+
+      fireEvent.keyDown(spinbuttons[0], {key: 'ArrowUp'});
+      fireEvent.keyUp(spinbuttons[0], {key: 'ArrowUp'});
+
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+      expect(onValidationChange).toHaveBeenCalledTimes(2);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: false,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: true
+        }
+      });
+    });
+
+    it('should not set native validation message when validationBehavior=aria', () => {
+      let {getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <DateField label="Value" name="date" validationState="invalid" errorMessage="custom" />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=date]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(input.validity.valid).toBe(true);
+    });
+  });
 });
diff --git a/packages/@react-spectrum/datepicker/test/DatePicker.test.js b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
index e5f236fa3e9..e1733de1159 100644
--- a/packages/@react-spectrum/datepicker/test/DatePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePicker.test.js
@@ -917,14 +917,14 @@ describe('DatePicker', function () {
       let {getByTestId, queryByTestId} = render(<DatePicker label="Date" defaultValue={new CalendarDate('BC', 2020, 2, 3)} />);
       let field = getByTestId('date-field');
       let era = getByTestId('era');
-      expect(era).toBe(field.lastChild);
+      expect(era).toBe(within(field).getAllByRole('spinbutton').pop());
 
       act(() => era.focus());
       fireEvent.keyDown(era, {key: 'ArrowUp'});
       fireEvent.keyUp(era, {key: 'ArrowUp'});
 
       expect(queryByTestId('era')).toBeNull();
-      expect(document.activeElement).toBe(field.lastChild);
+      expect(document.activeElement).toBe(within(field).getAllByRole('spinbutton').pop());
     });
 
     it('should focus the next segment when the era is removed and is the first segment', function () {
@@ -1785,4 +1785,181 @@ describe('DatePicker', function () {
       expect(onChange).toHaveBeenCalledWith(new CalendarDateTime(2022, 4, 5, 5, 45));
     });
   });
+
+  describe('forms', () => {
+    it('supports form reset', () => {
+      function Test() {
+        let [value, setValue] = React.useState(new CalendarDate(2020, 2, 3));
+        return (
+          <form>
+            <DatePicker name="date" label="Value" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+      }
+
+      let {getByTestId, getByRole, getAllByRole} = render(<Test />);
+      let group = getByRole('group');
+      let input = document.querySelector('input[name=date]');
+      let segments = getAllByRole('spinbutton');
+
+      let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+      expect(getDescription()).toBe('Selected Date: February 3, 2020');
+
+      expect(input).toHaveValue('2020-02-03');
+      expect(input).toHaveAttribute('name', 'date');
+      fireEvent.keyDown(segments[0], {key: 'ArrowUp'});
+      fireEvent.keyUp(segments[0], {key: 'ArrowUp'});
+      expect(getDescription()).toBe('Selected Date: March 3, 2020');
+      expect(input).toHaveValue('2020-03-03');
+
+      let button = getByTestId('reset');
+      act(() => userEvent.click(button));
+      expect(getDescription()).toBe('Selected Date: February 3, 2020');
+      expect(input).toHaveValue('2020-02-03');
+    });
+
+    it('supports native validation', async () => {
+      let onValidationChange = jest.fn();
+      let {getByTestId, getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <DatePicker label="Value" name="date" validationBehavior="native" isRequired onValidationChange={onValidationChange} />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let form = getByTestId('form');
+
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(onValidationChange).not.toHaveBeenCalled();
+
+      act(() => {form.checkValidity();});
+      expect(onValidationChange).toHaveBeenCalledTimes(1);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: true,
+        errorMessage: 'Constraints not satisfied',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: true,
+          valid: false
+        }
+      });
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+    });
+
+    it('supports native custom validation message', async () => {
+      let tree = (validationState, errorMessage) => (
+        <form data-testid="form">
+          <DatePicker label="Value" name="date" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+        </form>
+      );
+
+      let {getByRole, getAllByRole, rerender} = render(tree('invalid', 'custom'));
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=date]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(input.validity.valid).toBe(false);
+      expect(input.validationMessage).toBe('custom');
+
+      rerender(tree(undefined, undefined));
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+    });
+
+    it('should set native input invalid when outside min/max range', () => {
+      let onValidationChange = jest.fn();
+      let {getAllByRole} = render(
+        <form data-testid="form">
+          <DatePicker label="Value" name="date" validationBehavior="native" minValue={today(getLocalTimeZone())} defaultValue={today(getLocalTimeZone())} onValidationChange={onValidationChange} />
+        </form>
+      );
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=date]');
+
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+      expect(onValidationChange).not.toHaveBeenCalled();
+
+      fireEvent.keyDown(spinbuttons[0], {key: 'ArrowDown'});
+      fireEvent.keyUp(spinbuttons[0], {key: 'ArrowDown'});
+
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(false);
+      expect(onValidationChange).toHaveBeenCalledTimes(1);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: true,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: true,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: false
+        }
+      });
+
+      fireEvent.keyDown(spinbuttons[0], {key: 'ArrowUp'});
+      fireEvent.keyUp(spinbuttons[0], {key: 'ArrowUp'});
+
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+      expect(onValidationChange).toHaveBeenCalledTimes(2);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: false,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: true
+        }
+      });
+    });
+
+    it('should not set native validation message when validationBehavior=aria', async () => {
+      let {getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <DatePicker label="Value" name="date" validationState="invalid" errorMessage="custom" />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=date]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(input.validity.valid).toBe(true);
+    });
+  });
 });
diff --git a/packages/@react-spectrum/datepicker/test/DatePickerBase.test.js b/packages/@react-spectrum/datepicker/test/DatePickerBase.test.js
index d006901ac91..bde6e6bfbad 100644
--- a/packages/@react-spectrum/datepicker/test/DatePickerBase.test.js
+++ b/packages/@react-spectrum/datepicker/test/DatePickerBase.test.js
@@ -129,6 +129,22 @@ describe('DatePickerBase', function () {
       for (let segment of segments) {
         expect(segment).toHaveAttribute('aria-required', 'true');
       }
+
+      let input = document.querySelector('input');
+      expect(input).toHaveAttribute('type', 'hidden');
+      expect(input).not.toHaveAttribute('required');
+    });
+
+    it.each`
+      Name                   | Component
+      ${'DatePicker'}        | ${DatePicker}
+      ${'DateRangePicker'}   | ${DateRangePicker}
+    `('$Name should support validationBehavior=native', ({Component}) => {
+      render(<Component label="Date" isRequired validationBehavior="native" />);
+      let input = document.querySelector('input');
+      expect(input).toHaveAttribute('type', 'text');
+      expect(input).toHaveAttribute('required');
+      expect(input).toHaveAttribute('hidden');
     });
 
     it.each`
diff --git a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
index 46c400b6b1a..f9426323db1 100644
--- a/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
+++ b/packages/@react-spectrum/datepicker/test/DateRangePicker.test.js
@@ -1471,4 +1471,192 @@ describe('DateRangePicker', function () {
       expectPlaceholder(endDate, 'mm/dd/yyyy');
     });
   });
+
+  describe('forms', () => {
+    it('supports form reset', () => {
+      function Test() {
+        let [value, setValue] = React.useState({start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2022, 4, 8)});
+        return (
+          <form>
+            <DateRangePicker startName="start" endName="end" label="Value" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+      }
+
+      let {getByTestId, getByRole, getAllByRole} = render(<Test />);
+      let group = getByRole('group');
+      let start = document.querySelector('input[name=start]');
+      let end = document.querySelector('input[name=end]');
+      let segments = getAllByRole('spinbutton');
+
+      let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+      expect(getDescription()).toBe('Selected Range: February 3, 2020 to April 8, 2022');
+
+      expect(start).toHaveValue('2020-02-03');
+      expect(end).toHaveValue('2022-04-08');
+      expect(start).toHaveAttribute('name', 'start');
+      expect(end).toHaveAttribute('name', 'end');
+      fireEvent.keyDown(segments[0], {key: 'ArrowUp'});
+      fireEvent.keyUp(segments[0], {key: 'ArrowUp'});
+      expect(getDescription()).toBe('Selected Range: March 3, 2020 to April 8, 2022');
+      expect(start).toHaveValue('2020-03-03');
+      expect(end).toHaveValue('2022-04-08');
+
+      let button = getByTestId('reset');
+      act(() => userEvent.click(button));
+      expect(getDescription()).toBe('Selected Range: February 3, 2020 to April 8, 2022');
+      expect(start).toHaveValue('2020-02-03');
+      expect(end).toHaveValue('2022-04-08');
+    });
+
+    it('supports native validation', async () => {
+      let onValidationChange = jest.fn();
+      let {getByTestId, getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <DateRangePicker label="Value" startName="start" endName="end" validationBehavior="native" isRequired onValidationChange={onValidationChange} />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let form = getByTestId('form');
+
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(onValidationChange).not.toHaveBeenCalled();
+
+      act(() => {form.checkValidity();});
+      expect(onValidationChange).toHaveBeenCalledTimes(1);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: true,
+        errorMessage: 'Constraints not satisfied',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: true,
+          valid: false
+        }
+      });
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+    });
+
+    it('supports native custom validation message', async () => {
+      let tree = (validationState, errorMessage) => (
+        <form data-testid="form">
+          <DateRangePicker label="Value" startName="start" endName="end" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+        </form>
+      );
+
+      let {getByRole, getAllByRole, rerender} = render(tree('invalid', 'custom'));
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let start = document.querySelector('input[name=start]');
+      let end = document.querySelector('input[name=end]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(start.validity.valid).toBe(false);
+      expect(start.validationMessage).toBe('custom');
+      expect(end.validity.valid).toBe(false);
+      expect(end.validationMessage).toBe('custom');
+
+      rerender(tree(undefined, undefined));
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(start.validity.valid).toBe(true);
+      expect(end.validity.valid).toBe(true);
+    });
+
+    it('should set native input invalid when outside min/max range', () => {
+      let onValidationChange = jest.fn();
+      let {getAllByRole} = render(
+        <form data-testid="form">
+          <DateRangePicker label="Value" startName="start" endName="end" validationBehavior="native" minValue={today(getLocalTimeZone())} defaultValue={{start: today(getLocalTimeZone()), end: today(getLocalTimeZone()).add({days: 3})}} onValidationChange={onValidationChange} />
+        </form>
+      );
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=start]');
+
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+      expect(onValidationChange).not.toHaveBeenCalled();
+
+      fireEvent.keyDown(spinbuttons[0], {key: 'ArrowDown'});
+      fireEvent.keyUp(spinbuttons[0], {key: 'ArrowDown'});
+
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(false);
+      expect(onValidationChange).toHaveBeenCalledTimes(1);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: true,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: true,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: false
+        }
+      });
+
+      fireEvent.keyDown(spinbuttons[0], {key: 'ArrowUp'});
+      fireEvent.keyUp(spinbuttons[0], {key: 'ArrowUp'});
+
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+      expect(onValidationChange).toHaveBeenCalledTimes(2);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: false,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: true
+        }
+      });
+    });
+
+    it('should not set native validation message when validationBehavior=aria', async () => {
+      let {getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <DateRangePicker label="Value" startName="start" endName="end" validationState="invalid" errorMessage="custom" />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let start = document.querySelector('input[name=start]');
+      let end = document.querySelector('input[name=end]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(start.validity.valid).toBe(true);
+      expect(end.validity.valid).toBe(true);
+    });
+  });
 });
diff --git a/packages/@react-spectrum/datepicker/test/TimeField.test.js b/packages/@react-spectrum/datepicker/test/TimeField.test.js
index 7c82a280923..3a07acd22a8 100644
--- a/packages/@react-spectrum/datepicker/test/TimeField.test.js
+++ b/packages/@react-spectrum/datepicker/test/TimeField.test.js
@@ -136,6 +136,8 @@ describe('TimeField', function () {
     it('should call blur when focus leaves', function () {
       let {getAllByRole} = render(<TimeField label="Time" onBlur={onBlurSpy} onFocus={onFocusSpy} onFocusChange={onFocusChangeSpy} />);
       let segments = getAllByRole('spinbutton');
+      // workaround bug in userEvent.tab(). hidden inputs aren't focusable.
+      document.querySelector('input[type=hidden]').tabIndex = -1;
 
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
@@ -177,4 +179,98 @@ describe('TimeField', function () {
       expect(onKeyUpSpy).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('forms', () => {
+    it('supports form reset', () => {
+      function Test() {
+        let [value, setValue] = React.useState(new Time(8, 30));
+        return (
+          <form>
+            <TimeField name="time" label="Value" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        );
+      }
+
+      let {getByTestId, getByRole, getAllByRole} = render(<Test />);
+      let group = getByRole('group');
+      let input = document.querySelector('input[name=time]');
+      let segments = getAllByRole('spinbutton');
+
+      let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
+      expect(getDescription()).toBe('Selected Time: 8:30 AM');
+
+      expect(input).toHaveValue('08:30:00');
+      expect(input).toHaveAttribute('name', 'time');
+      fireEvent.keyDown(segments[0], {key: 'ArrowUp'});
+      fireEvent.keyUp(segments[0], {key: 'ArrowUp'});
+      expect(getDescription()).toBe('Selected Time: 9:30 AM');
+      expect(input).toHaveValue('09:30:00');
+
+      let button = getByTestId('reset');
+      act(() => userEvent.click(button));
+      expect(getDescription()).toBe('Selected Time: 8:30 AM');
+      expect(input).toHaveValue('08:30:00');
+    });
+
+    it('supports native validation', async () => {
+      let {getByTestId, getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <TimeField label="Value" name="time" validationBehavior="native" isRequired />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let form = getByTestId('form');
+
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+
+      act(() => {form.checkValidity();});
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+    });
+
+    it('supports native custom validation message', async () => {
+      let tree = (validationState, errorMessage) => (
+        <form data-testid="form">
+          <TimeField label="Value" name="time" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+        </form>
+      );
+
+      let {getByRole, getAllByRole, rerender} = render(tree('invalid', 'custom'));
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=time]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(input.validity.valid).toBe(false);
+      expect(input.validationMessage).toBe('custom');
+
+      rerender(tree(undefined, undefined));
+      expect(group).not.toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).not.toHaveAttribute('aria-invalid');
+      expect(input.validity.valid).toBe(true);
+    });
+
+    it('should not set native validation message when validationBehavior=aria', async () => {
+      let {getByRole, getAllByRole} = render(
+        <form data-testid="form">
+          <TimeField label="Value" name="time" validationState="invalid" errorMessage="custom" />
+        </form>
+      );
+      let group = getByRole('group');
+      let spinbuttons = getAllByRole('spinbutton');
+      let input = document.querySelector('input[name=time]');
+
+      expect(group).toHaveAttribute('aria-describedby');
+      expect(spinbuttons[0]).toHaveAttribute('aria-invalid');
+      expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(input.validity.valid).toBe(true);
+    });
+  });
 });
diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx
index 7e1781c5d0d..f72299bec43 100644
--- a/packages/@react-spectrum/form/src/Form.tsx
+++ b/packages/@react-spectrum/form/src/Form.tsx
@@ -50,6 +50,7 @@ function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
     isDisabled,
     isReadOnly,
     validationState,
+    validationBehavior = 'aria',
     ...otherProps
   } = props;
 
@@ -59,14 +60,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(
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index a8b822a7f5f..2e18f8e84e0 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -13,12 +13,15 @@
 import {action} from '@storybook/addon-actions';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
+import {CalendarDate, getLocalTimeZone, today} 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, DatePicker, DateRangePicker} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '../';
 import {FormTranslatedText} from './../chromatic/FormLanguages.chromatic';
@@ -29,6 +32,7 @@ import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React, {Key, useEffect, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
+import {Slider} from '@react-spectrum/slider';
 import {StatusLight} from '@react-spectrum/statuslight';
 import {Switch} from '@react-spectrum/switch';
 import {TagGroup} from '@react-spectrum/tag';
@@ -457,161 +461,73 @@ function FormWithControls(props: any = {}) {
   let [favoritePet, setFavoritePet] = useState('cats');
   let [favoriteColor, setFavoriteColor] = useState('green' as Key);
   let [howIFeel, setHowIFeel] = useState('I feel good, o I feel so good!');
-  let [firstName2, setFirstName2] = useState('hello');
-  let [isHunter2, setIsHunter2] = useState(true);
-  let [favoritePet2, setFavoritePet2] = useState('cats');
-  let [favoriteColor2, setFavoriteColor2] = useState('green' as Key);
-  let [howIFeel2, setHowIFeel2] = useState('I feel good, o I feel so good!');
-  let [preventDefault, setPreventDefault] = useState(true);
+  let [birthday, setBirthday] = useState(new CalendarDate(1732, 2, 22));
+  let [money, setMoney] = useState(50);
+  let [superSpeed, setSuperSpeed] = useState(true);
 
   return (
-    <Flex>
-      <Checkbox alignSelf="start" isSelected={preventDefault} onChange={setPreventDefault}>Prevent Default onSubmit</Checkbox>
-      <Form
-        onSubmit={e => {
-          action('onSubmit')(e);
-          if (preventDefault) {
-            e.preventDefault();
-          }
-        }}
-        {...props}>
-        <TextField name="first-name" label="First Name controlled" value={firstName} onChange={setFirstName} />
-        <TextField name="last-name" label="Last Name default" defaultValue="world" />
-        <TextField name="street-address" label="Street Address none" />
-        <Picker name="country" label="Country none" items={countries}>
-          {item => <Item key={item.name}>{item.name}</Item>}
-        </Picker>
-        <Checkbox name="is-hunter" isSelected={isHunter} onChange={setIsHunter}>I am a hunter! controlled</Checkbox>
-        <Checkbox name="is-wizard" defaultSelected>I am a wizard! default</Checkbox>
-        <RadioGroup label="Favorite pet controlled" name="favorite-pet-group" value={favoritePet} onChange={setFavoritePet}>
-          <Radio value="dogs">Dogs</Radio>
-          <Radio value="cats">Cats</Radio>
-          <Radio value="dragons">Dragons</Radio>
-        </RadioGroup>
-        <RadioGroup label="Favorite pet none" name="favorite-pet-group2" defaultValue="cats">
-          <Radio value="dogs">Dogs</Radio>
-          <Radio value="cats">Cats</Radio>
-          <Radio value="dragons">Dragons</Radio>
-        </RadioGroup>
-        <Picker name="favorite-color" label="Favorite color controlled" selectedKey={favoriteColor} onSelectionChange={setFavoriteColor}>
-          <Item key="red">Red</Item>
-          <Item key="orange">Orange</Item>
-          <Item key="yellow">Yellow</Item>
-          <Item key="green">Green</Item>
-          <Item key="blue">Blue</Item>
-          <Item key="purple">Purple</Item>
-        </Picker>
-        <TextArea name="comments-controlled" label="Comments" value={howIFeel} onChange={setHowIFeel} />
-        <TextArea name="comments-uncontrolled" label="Comments" defaultValue="hello" />
-        <ComboBox label="Favorite Animal" name="favorite-animal">
-          <Item key="red panda">Red Panda</Item>
-          <Item key="aardvark">Aardvark</Item>
-          <Item key="kangaroo">Kangaroo</Item>
-          <Item key="snake">Snake</Item>
-        </ComboBox>
-        <TagGroup label="Favorite tags">
-          <Item key="1">Cool Tag 1</Item>
-          <Item key="2">Cool Tag 2</Item>
-          <Item key="3">Cool Tag 3</Item>
-          <Item key="4">Cool Tag 4</Item>
-          <Item key="5">Cool Tag 5</Item>
-          <Item key="6">Cool Tag 6</Item>
-        </TagGroup>
-        <ButtonGroup>
-          <Button variant="primary" type="submit">Submit</Button>
-        </ButtonGroup>
-      </Form>
-      <form
-        onSubmit={e => {
-          action('onSubmit')(e);
-          if (preventDefault) {
-            e.preventDefault();
-          }
-        }}
-        {...props}>
-        <Flex direction="column" gap="size-500" marginTop="size-500">
-          <label>
-            First Name controlled
-            <input type="text" value={firstName2} onChange={e => setFirstName2(e.target.value)} />
-          </label>
-          <label>
-            Last Name default
-            <input type="text" defaultValue="world" />
-          </label>
-          <label>
-            Street Address none
-            <input type="text" />
-          </label>
-          <label>
-            Country none
-            <select name="Country">
-              {countries.map(item => <option value={item.name}>{item.name}</option>)}
-            </select>
-          </label>
-          <label>
-            I am a hunter! controlled
-            <input type="checkbox" checked={isHunter2} onChange={e => setIsHunter2(e.target.checked)} />
-          </label>
-          <label>
-            I am a wizard! default
-            <input type="checkbox" defaultChecked />
-          </label>
-          <div style={{display: 'flex', flexDirection: 'column'}}>
-            Favorite Pet controlled
-            <label>
-              Dogs
-              <input type="radio" name="favorit-pet-group3" value="dogs" checked={favoritePet2 === 'dogs'} onChange={e => setFavoritePet2(e.target.value)} />
-            </label>
-            <label>
-              Cats
-              <input type="radio" name="favorit-pet-group3" value="cats" checked={favoritePet2 === 'cats'} onChange={e => setFavoritePet2(e.target.value)} />
-            </label>
-            <label>
-              Dragons
-              <input type="radio" name="favorit-pet-group3" value="dragons" checked={favoritePet2 === 'dragons'} onChange={e => setFavoritePet2(e.target.value)} />
-            </label>
-          </div>
-          <div style={{display: 'flex', flexDirection: 'column'}}>
-            Favorite Pet uncontrolled
-            <label>
-              Dogs
-              <input type="radio" name="favorit-pet-group4" value="dogs" />
-            </label>
-            <label>
-              Cats
-              <input type="radio" name="favorit-pet-group4" value="cats" defaultChecked />
-            </label>
-            <label>
-              Dragons
-              <input type="radio" name="favorit-pet-group4" value="dragons" />
-            </label>
-          </div>
-          <label>
-            Favorite Color controlled
-            <select onChange={e => setFavoriteColor2(e.target.value)}>
-              <option value="red" selected={favoriteColor2 === 'red'}>Red</option>
-              <option value="orange" selected={favoriteColor2 === 'orange'}>Orange</option>
-              <option value="yellow" selected={favoriteColor2 === 'yellow'}>Yellow</option>
-              <option value="green" selected={favoriteColor2 === 'green'}>Green</option>
-              <option value="blue" selected={favoriteColor2 === 'blue'}>Blue</option>
-              <option value="purple" selected={favoriteColor2 === 'purple'}>Purple</option>
-            </select>
-          </label>
-          <label>
-            Comments controlled
-            <textarea value={howIFeel2} onChange={e => setHowIFeel2(e.target.value)} />
-          </label>
-          <label>
-            Comments default
-            <textarea defaultValue="hello" />
-          </label>
-          <ButtonGroup>
-            <Button variant="secondary" type="reset">Reset</Button>
-            <Button variant="primary" type="submit">Submit</Button>
-          </ButtonGroup>
-        </Flex>
-      </form>
-    </Flex>
+    <Form
+      onSubmit={e => {
+        action('onSubmit')(Object.fromEntries(new FormData(e.target as HTMLFormElement).entries()));
+        e.preventDefault();
+      }}
+      isRequired
+      validationBehavior="native"
+      {...props}>
+      <TextField name="first-name" label="First Name (controlled)" value={firstName} onChange={setFirstName} />
+      <TextField name="last-name" label="Last Name (uncontrolled)" defaultValue="world" />
+      <TextField name="street-address" label="Street Address (uncontrolled)" />
+      <Picker name="country" label="Country (uncontrolled)" items={countries}>
+        {item => <Item key={item.name}>{item.name}</Item>}
+      </Picker>
+      <NumberField name="age" label="Age (uncontrolled)" />
+      <NumberField name="money" label="Money (controlled)" formatOptions={{style: 'currency', currency: 'USD'}} value={money} onChange={setMoney} />
+      <Picker name="favorite-color" label="Favorite color (controlled)" selectedKey={favoriteColor} onSelectionChange={setFavoriteColor}>
+        <Item key="red">Red</Item>
+        <Item key="orange">Orange</Item>
+        <Item key="yellow">Yellow</Item>
+        <Item key="green">Green</Item>
+        <Item key="blue">Blue</Item>
+        <Item key="purple">Purple</Item>
+      </Picker>
+      <Checkbox name="is-hunter" isSelected={isHunter} onChange={setIsHunter}>I am a hunter! (controlled)</Checkbox>
+      <Checkbox name="is-wizard" defaultSelected>I am a wizard! (uncontrolled)</Checkbox>
+      <Switch name="airplane-mode">Airplane mode (uncontrolled)</Switch>
+      <Switch name="super-speed" isSelected={superSpeed} onChange={setSuperSpeed}>Super speed (controlled)</Switch>
+      <RadioGroup label="Favorite pet (controlled)" name="favorite-pet-group" value={favoritePet} onChange={setFavoritePet}>
+        <Radio value="dogs">Dogs</Radio>
+        <Radio value="cats">Cats</Radio>
+        <Radio value="dragons">Dragons</Radio>
+      </RadioGroup>
+      <RadioGroup label="Favorite pet (uncontrolled)" name="favorite-pet-group2">
+        <Radio value="dogs">Dogs</Radio>
+        <Radio value="cats">Cats</Radio>
+        <Radio value="dragons">Dragons</Radio>
+      </RadioGroup>
+      <CheckboxGroup name="conditions" label="Agree to the following (uncontrolled)" isRequired>
+        <Checkbox value="terms" isRequired>Terms and conditions</Checkbox>
+        <Checkbox value="privacy" isRequired>Privacy policy</Checkbox>
+        <Checkbox value="cookies" isRequired>Cookie policy</Checkbox>
+      </CheckboxGroup>
+      <TextArea name="comments-controlled" label="Comments (controlled)" value={howIFeel} onChange={setHowIFeel} />
+      <TextArea name="comments-uncontrolled" label="Comments (uncontrolled)" defaultValue="hello" />
+      <ComboBox label="Favorite Animal (uncontrolled)" name="favorite-animal" formValue="key">
+        <Item key="red panda">Red Panda</Item>
+        <Item key="aardvark">Aardvark</Item>
+        <Item key="kangaroo">Kangaroo</Item>
+        <Item key="snake">Snake</Item>
+      </ComboBox>
+      <DateField name="date-uncontrolled" label="Birth date (uncontrolled)" minValue={new CalendarDate(2023, 2, 3)} />
+      <DateField name="date-controlled" label="Birth date (controlled)" value={birthday} onChange={setBirthday} />
+      <DateRangePicker startName="trip-start" endName="trip-end" label="Trip dates (uncontrolled)" />
+      <DatePicker name="date-picker" label="Appointment date (uncontrolled)" minValue={today(getLocalTimeZone())} />
+      <Slider name="cookies" label="Cookies (uncontrolled)" defaultValue={50} />
+      <ColorField name="color" label="Color (uncontrolled)" />
+      <ButtonGroup>
+        <Button variant="primary" type="submit">Submit</Button>
+        <Button variant="secondary" type="reset">Reset</Button>
+      </ButtonGroup>
+    </Form>
   );
 }
 
diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json
index ec5fe75abc9..7454191ce9f 100644
--- a/packages/@react-spectrum/numberfield/package.json
+++ b/packages/@react-spectrum/numberfield/package.json
@@ -43,6 +43,7 @@
     "@react-aria/numberfield": "^3.5.1",
     "@react-aria/utils": "^3.17.0",
     "@react-spectrum/button": "^3.12.2",
+    "@react-spectrum/form": "^3.6.2",
     "@react-spectrum/label": "^3.12.1",
     "@react-spectrum/textfield": "^3.10.2",
     "@react-spectrum/utils": "^3.9.2",
diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx
index 9944993a9d5..99ab4088dfe 100644
--- a/packages/@react-spectrum/numberfield/src/NumberField.tsx
+++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx
@@ -16,19 +16,21 @@ import {Field} from '@react-spectrum/label';
 import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
+import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';
 import React, {HTMLAttributes, InputHTMLAttributes, RefObject, useRef} from 'react';
 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';
-import {useNumberFieldState} from '@react-stately/numberfield';
 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,7 +52,9 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
     incrementButtonProps,
     decrementButtonProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    validationState,
+    errorMessage
   } = useNumberField(props, state, inputRef);
   let isMobile = provider.scale === 'large';
   let showStepper = !hideStepper;
@@ -65,7 +69,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,
@@ -80,6 +84,8 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
       labelProps={labelProps}
+      validationState={validationState}
+      errorMessage={errorMessage}
       ref={domRef}
       wrapperClassName={classNames(
         stepperStyle,
@@ -95,8 +101,10 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
         inputRef={inputRef}
         incrementProps={incrementButtonProps}
         decrementProps={decrementButtonProps}
+        validationState={validationState}
         className={className}
-        style={style} />
+        style={style}
+        state={state} />
     </Field>
   );
 }
@@ -109,7 +117,8 @@ interface NumberFieldInputProps extends SpectrumNumberFieldProps {
   incrementProps: AriaButtonProps,
   decrementProps: AriaButtonProps,
   className?: string,
-  style?: React.CSSProperties
+  style?: React.CSSProperties,
+  state: NumberFieldState
 }
 
 const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: NumberFieldInputProps, ref: RefObject<HTMLElement>) {
@@ -125,7 +134,9 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: Numbe
     isQuiet,
     isDisabled,
     hideStepper,
-    validationState
+    validationState,
+    name,
+    state
   } = props;
   let showStepper = !hideStepper;
 
@@ -172,6 +183,7 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: Numbe
           <StepButton direction="down" isQuiet={isQuiet} {...decrementProps} />
         </>
         }
+        {name && <input type="hidden" name={name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
       </div>
     </FocusRing>
   );
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
index f29df14f7a6..81b72c87801 100644
--- a/packages/@react-spectrum/numberfield/test/NumberField.test.js
+++ b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -1538,6 +1538,7 @@ describe('NumberField', function () {
     expect(textField).not.toHaveAttribute('aria-valuemax', '100');
     expect(textField).toHaveAttribute('aria-readonly', 'true');
     expect(textField).toHaveAttribute('aria-required', 'true');
+    expect(textField).not.toHaveAttribute('required');
     expect(textField).toHaveAttribute('aria-disabled', 'true');
     expect(textField).not.toHaveAttribute('role');
     expect(textField).toHaveAttribute('id', 'test-numberfield-id');
@@ -1546,6 +1547,14 @@ describe('NumberField', function () {
     expect(decrementButton).toHaveAttribute('aria-controls', textField.id);
   });
 
+  it('supports validationBehavior=native', () => {
+    let {textField} = renderNumberField({
+      isRequired: true,
+      validationBehavior: 'native'
+    });
+    expect(textField).toHaveAttribute('required');
+  });
+
   describe('labeling', () => {
     it('string label', () => {
       let {textField, incrementButton, decrementButton} = renderNumberField({
@@ -2203,4 +2212,102 @@ describe('NumberField', function () {
     expect(resetSpy).toHaveBeenCalledTimes(1);
     expect(textField).toHaveAttribute('value', '');
   });
+
+  it('supports form value', () => {
+    let {textField, rerender} = renderNumberField({name: 'age', value: 30});
+    expect(textField).not.toHaveAttribute('name');
+    let hiddenInput = document.querySelector('input[type=hidden]');
+    expect(hiddenInput).toHaveAttribute('name', 'age');
+    expect(hiddenInput).toHaveValue('30');
+
+    rerender({name: 'age', value: null});
+    expect(hiddenInput).toHaveValue('');
+  });
+
+  it('supports form reset', async () => {
+    function Test() {
+      let [value, setValue] = React.useState(10);
+      return (
+        <Provider theme={theme}>
+          <form>
+            <NumberField data-testid="input" label="Value" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        </Provider>
+      );
+    }
+
+    let {getByTestId} = render(<Test />);
+    let input = getByTestId('input');
+
+    expect(input).toHaveValue('10');
+    await act(() => userEvent.type(input, '0'));
+    expect(input).toHaveValue('100');
+
+    let button = getByTestId('reset');
+    act(() => input.blur());
+    act(() => userEvent.click(button));
+    expect(input).toHaveValue('10');
+  });
+
+  it('supports native validation', async () => {
+    let {getByTestId} = render(
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <NumberField label="Value" data-testid="input" name="name" validationBehavior="native" isRequired />
+        </form>
+      </Provider>
+    );
+    let input = getByTestId('input');
+    let form = getByTestId('form');
+
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(input).not.toHaveAttribute('aria-invalid');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
+
+  it('supports native custom validation message', async () => {
+    let tree = (validationState, errorMessage) => (
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <NumberField label="Value" data-testid="input" name="name" validationBehavior="native" validationState={validationState} errorMessage={errorMessage} />
+        </form>
+      </Provider>
+    );
+
+    let {getByTestId, rerender} = render(tree('invalid', 'custom'));
+    let input = getByTestId('input');
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(input.validity.valid).toBe(false);
+    expect(input.validationMessage).toBe('custom');
+
+    rerender(tree(undefined, undefined));
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(input.validity.valid).toBe(true);
+  });
+
+  it('should not set native validation message when validationBehavior=aria', async () => {
+    let {getByTestId} = render(
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <NumberField label="Value" data-testid="input" name="name" validationState="invalid" errorMessage="custom" />
+        </form>
+      </Provider>
+    );
+    let input = getByTestId('input');
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(input.validity.valid).toBe(true);
+  });
 });
diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json
index 73dd477b1ec..d7da6a99063 100644
--- a/packages/@react-spectrum/picker/package.json
+++ b/packages/@react-spectrum/picker/package.json
@@ -43,6 +43,7 @@
     "@react-aria/select": "^3.10.1",
     "@react-aria/utils": "^3.17.0",
     "@react-spectrum/button": "^3.12.2",
+    "@react-spectrum/form": "^3.6.2",
     "@react-spectrum/label": "^3.12.1",
     "@react-spectrum/listbox": "^3.10.1",
     "@react-spectrum/overlays": "^5.1.1",
diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx
index 6b8f1b6c2fc..27105633015 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,20 +44,18 @@ 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,
     isDisabled,
     direction = 'bottom',
     align = 'start',
     shouldFlip = true,
     placeholder = stringFormatter.format('placeholder'),
-    validationState,
     isQuiet,
     label,
     labelPosition = 'top' as LabelPosition,
     menuWidth,
-    name,
     autoFocus
   } = props;
 
@@ -76,10 +75,12 @@ 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 hiddenSelectRef = useRef<HTMLSelectElement>(null);
+  let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, validationState, errorMessage} = useSelect({
     ...props,
     'aria-describedby': (isLoadingInitial ? progressCircleId : undefined),
-    keyboardDelegate: layout
+    keyboardDelegate: layout,
+    hiddenSelectRef
   }, state, unwrappedTriggerRef);
 
   let isMobile = useIsMobileDevice();
@@ -173,12 +174,10 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
         )
       }>
       <HiddenSelect
-        autoComplete={autoComplete}
-        isDisabled={isDisabled}
         state={state}
-        triggerRef={unwrappedTriggerRef}
         label={label}
-        name={name} />
+        triggerRef={unwrappedTriggerRef}
+        ref={hiddenSelectRef} />
       <PressResponder {...mergeProps(hoverProps, triggerProps)}>
         <FieldButton
           ref={triggerRef}
@@ -240,6 +239,8 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
+      validationState={validationState}
+      errorMessage={errorMessage}
       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 93bc3ba23dd..3e834a2baf9 100644
--- a/packages/@react-spectrum/picker/test/Picker.test.js
+++ b/packages/@react-spectrum/picker/test/Picker.test.js
@@ -927,6 +927,24 @@ describe('Picker', function () {
         expect(listbox).toBeVisible();
         expect(listbox).toHaveAttribute('aria-labelledby', label.id);
       });
+
+      it('supports validationBehavior', () => {
+        let renderSelect = (validationBehavior) => (
+          <Provider theme={theme}>
+            <Picker label="Test 2" isRequired validationBehavior={validationBehavior}>
+              <Item>One</Item>
+              <Item>Two</Item>
+              <Item>Three</Item>
+            </Picker>
+          </Provider>
+        );
+        let {getByRole, rerender} = render(renderSelect('aria'));
+        let hiddenSelect = getByRole('combobox', {hidden: true});
+        expect(hiddenSelect).not.toHaveAttribute('required');
+
+        rerender(renderSelect('native'));
+        expect(hiddenSelect).toHaveAttribute('required');
+      });
     });
 
     describe('help text', function () {
@@ -1778,15 +1796,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');
@@ -2194,5 +2204,160 @@ describe('Picker', function () {
       expect(onSubmit).toHaveBeenCalledTimes(1);
       expect(value).toEqual('one');
     });
+
+    it('supports form reset', () => {
+      function Test() {
+        let [value, setValue] = React.useState('one');
+        return (
+          <Provider theme={theme}>
+            <form>
+              <Picker name="picker" data-testid="picker" label="Test" selectedKey={value} onSelectionChange={setValue}>
+                <Item key="one">One</Item>
+                <Item key="two">Two</Item>
+                <Item key="three">Three</Item>
+              </Picker>
+              <input type="reset" data-testid="reset" />
+            </form>
+          </Provider>
+        );
+      }
+
+      let {getByTestId, getByRole} = render(<Test />);
+      let picker = getByTestId('picker');
+      let input = document.querySelector('[name=picker]');
+
+      expect(input).toHaveValue('one');
+      triggerPress(picker);
+      act(() => jest.runAllTimers());
+
+      let listbox = getByRole('listbox');
+      let items = within(listbox).getAllByRole('option');
+      expect(items.length).toBe(3);
+      triggerPress(items[1]);
+      expect(input).toHaveValue('two');
+
+      let button = getByTestId('reset');
+      act(() => userEvent.click(button));
+      expect(input).toHaveValue('one');
+    });
+
+    it('supports native validation', async () => {
+      let onValidationChange = jest.fn();
+      let {getByTestId, getByRole} = render(
+        <Provider theme={theme}>
+          <form data-testid="form">
+            <Picker name="picker" data-testid="picker" label="Test" validationBehavior="native" isRequired onValidationChange={onValidationChange}>
+              <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]');
+      let form = getByTestId('form');
+
+      expect(picker).not.toHaveAttribute('aria-describedby');
+      expect(onValidationChange).not.toHaveBeenCalled();
+
+      act(() => {form.checkValidity();});
+      expect(onValidationChange).toHaveBeenCalledTimes(1);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: true,
+        errorMessage: 'Constraints not satisfied',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: true,
+          valid: false
+        }
+      });
+
+      expect(picker).toHaveAttribute('aria-describedby');
+      expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+      triggerPress(picker);
+      act(() => jest.runAllTimers());
+
+      let listbox = getByRole('listbox');
+      let items = within(listbox).getAllByRole('option');
+      expect(items.length).toBe(3);
+      triggerPress(items[1]);
+      expect(input).toHaveValue('two');
+      expect(picker).not.toHaveAttribute('aria-describedby');
+      expect(onValidationChange).toHaveBeenCalledTimes(2);
+      expect(onValidationChange).toHaveBeenLastCalledWith({
+        isInvalid: false,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: true
+        }
+      });
+    });
+
+    it('supports native custom validation message', async () => {
+      let tree = (validationState, errorMessage) => (
+        <Provider theme={theme}>
+          <form data-testid="form">
+            <Picker name="picker" data-testid="picker" label="Test" validationBehavior="native" validationState={validationState} errorMessage={errorMessage}>
+              <Item key="one">One</Item>
+              <Item key="two">Two</Item>
+              <Item key="three">Three</Item>
+            </Picker>
+          </form>
+        </Provider>
+      );
+
+      let {getByTestId, rerender} = render(tree('invalid', 'custom'));
+      let picker = getByTestId('picker');
+      let input = document.querySelector('[name=picker]');
+
+      expect(picker).toHaveAttribute('aria-describedby');
+      expect(document.getElementById(picker.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+      expect(input.validity.valid).toBe(false);
+      expect(input.validationMessage).toBe('custom');
+
+      rerender(tree(undefined, undefined));
+      expect(picker).not.toHaveAttribute('aria-describedby');
+      expect(input.validity.valid).toBe(true);
+    });
+
+    it('should not set native validation message when validationBehavior=aria', async () => {
+      let {getByTestId} = render(
+        <Provider theme={theme}>
+          <form data-testid="form">
+            <Picker name="picker" data-testid="picker" label="Test" validationState="invalid" errorMessage="custom">
+              <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('custom');
+      expect(input.validity.valid).toBe(true);
+    });
   });
 });
diff --git a/packages/@react-spectrum/radio/src/Radio.tsx b/packages/@react-spectrum/radio/src/Radio.tsx
index eae6d7f9405..db08fcf62bd 100644
--- a/packages/@react-spectrum/radio/src/Radio.tsx
+++ b/packages/@react-spectrum/radio/src/Radio.tsx
@@ -36,11 +36,10 @@ function Radio(props: SpectrumRadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let radioGroupProps = useRadioProvider();
   let {
     isEmphasized,
-    validationState,
     state
   } = radioGroupProps;
 
-  let {inputProps} = useRadio({
+  let {inputProps, validationState} = useRadio({
     ...props,
     ...radioGroupProps,
     isDisabled
diff --git a/packages/@react-spectrum/radio/src/RadioGroup.tsx b/packages/@react-spectrum/radio/src/RadioGroup.tsx
index 9ffc493f8fb..c34b724bc25 100644
--- a/packages/@react-spectrum/radio/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/radio/src/RadioGroup.tsx
@@ -27,23 +27,20 @@ function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
   props = useFormProps(props);
   let {
     isEmphasized,
-    validationState,
     children,
     orientation = 'vertical'
   } = props;
 
   let domRef = useDOMRef(ref);
   let state = useRadioGroupState(props);
-  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps} = useRadioGroup(props, state);
+  let {radioGroupProps, ...fieldProps} = useRadioGroup(props, state);
 
   return (
     <Field
       {...props}
+      {...fieldProps}
       ref={domRef}
       wrapperClassName={classNames(styles, 'spectrum-FieldGroup')}
-      labelProps={labelProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
       elementType="span">
       <div
         {...radioGroupProps}
@@ -59,7 +56,6 @@ function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
         <RadioContext.Provider
           value={{
             isEmphasized,
-            validationState,
             state
           }}>
           {children}
diff --git a/packages/@react-spectrum/radio/src/context.ts b/packages/@react-spectrum/radio/src/context.ts
index 795fb0c4eaa..ac0c2f6d892 100644
--- a/packages/@react-spectrum/radio/src/context.ts
+++ b/packages/@react-spectrum/radio/src/context.ts
@@ -16,7 +16,6 @@ import React, {useContext} from 'react';
 interface RadioGroupContext {
   isEmphasized?: boolean,
   name?: string,
-  validationState?: 'valid' | 'invalid',
   state: RadioGroupState
 }
 
diff --git a/packages/@react-spectrum/radio/test/Radio.test.js b/packages/@react-spectrum/radio/test/Radio.test.js
index ac2c4e65ea6..2e5ec1bf781 100644
--- a/packages/@react-spectrum/radio/test/Radio.test.js
+++ b/packages/@react-spectrum/radio/test/Radio.test.js
@@ -406,6 +406,14 @@ describe('Radios', function () {
     let radios = getAllByRole('radio');
     for (let radio of radios) {
       expect(radio).not.toHaveAttribute('aria-required');
+      expect(radio).not.toHaveAttribute('required');
+    }
+  });
+
+  it('supports validationBehavior=native', () => {
+    let {getAllByRole} = renderRadioGroup(RadioGroup, Radio, {isRequired: true, validationBehavior: 'native'}, []);
+    for (let input of getAllByRole('radio')) {
+      expect(input).toHaveAttribute('required');
     }
   });
 
@@ -435,6 +443,160 @@ describe('Radios', function () {
     expect(description).toHaveTextContent('Error message');
   });
 
+  it('supports form reset', () => {
+    function Test() {
+      let [value, setValue] = React.useState('dogs');
+      return (
+        <Provider theme={theme}>
+          <form>
+            <RadioGroup name="pet" label="Favorite Pet" value={value} onChange={setValue}>
+              <Radio value="dogs">Dogs</Radio>
+              <Radio value="cats">Cats</Radio>
+              <Radio value="dragons">Dragons</Radio>
+            </RadioGroup>
+            <input type="reset" data-testid="reset" />
+          </form>
+        </Provider>
+      );
+    }
+
+    let {getAllByRole, getByTestId} = render(<Test />);
+    let radios = getAllByRole('radio');
+
+    expect(radios[0]).toBeChecked();
+    expect(radios[1]).not.toBeChecked();
+    expect(radios[2]).not.toBeChecked();
+    act(() => userEvent.click(radios[1]));
+    expect(radios[0]).not.toBeChecked();
+    expect(radios[1]).toBeChecked();
+    expect(radios[2]).not.toBeChecked();
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(radios[0]).toBeChecked();
+    expect(radios[1]).not.toBeChecked();
+    expect(radios[2]).not.toBeChecked();
+  });
+
+  it('supports native validation', async () => {
+    let onValidationChange = jest.fn();
+    let {getByTestId, getByRole, getAllByRole} = render(
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <RadioGroup name="pet" label="Favorite Pet" validationBehavior="native" isRequired onValidationChange={onValidationChange}>
+            <Radio value="dogs">Dogs</Radio>
+            <Radio value="cats">Cats</Radio>
+            <Radio value="dragons">Dragons</Radio>
+          </RadioGroup>
+        </form>
+      </Provider>
+    );
+    let group = getByRole('radiogroup');
+    let radios = getAllByRole('radio');
+    let form = getByTestId('form');
+
+    expect(group).not.toHaveAttribute('aria-describedby');
+    expect(group).not.toHaveAttribute('aria-invalid');
+    expect(onValidationChange).not.toHaveBeenCalled();
+
+    act(() => {form.checkValidity();});
+    expect(onValidationChange).toHaveBeenCalledTimes(1);
+    expect(onValidationChange).toHaveBeenLastCalledWith({
+      isInvalid: true,
+      errorMessage: 'Constraints not satisfied',
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valueMissing: true,
+        valid: false
+      }
+    });
+
+    expect(group).toHaveAttribute('aria-describedby');
+    expect(group).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+
+    act(() => userEvent.click(radios[1]));
+    fireEvent.change(radios[1]); // old user-event in React 16 tests doesn't fire change event.
+    expect(group).not.toHaveAttribute('aria-describedby');
+    expect(group).not.toHaveAttribute('aria-invalid');
+    expect(onValidationChange).toHaveBeenCalledTimes(2);
+    expect(onValidationChange).toHaveBeenLastCalledWith({
+      isInvalid: false,
+      errorMessage: '',
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valueMissing: false,
+        valid: true
+      }
+    });
+  });
+
+  it('supports native custom validation message', async () => {
+    let tree = (validationState, errorMessage) => (
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <RadioGroup name="pet" label="Favorite Pet" validationBehavior="native" validationState={validationState} errorMessage={errorMessage}>
+            <Radio value="dogs">Dogs</Radio>
+            <Radio value="cats">Cats</Radio>
+            <Radio value="dragons">Dragons</Radio>
+          </RadioGroup>
+        </form>
+      </Provider>
+    );
+
+    let {getByRole, getAllByRole, rerender} = render(tree('invalid', 'custom'));
+    let group = getByRole('radiogroup');
+    let radios = getAllByRole('radio');
+
+    expect(group).toHaveAttribute('aria-describedby');
+    expect(group).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(radios[0].validity.valid).toBe(false);
+    expect(radios[0].validationMessage).toBe('custom');
+
+    rerender(tree(undefined, undefined));
+    expect(group).not.toHaveAttribute('aria-describedby');
+    expect(group).not.toHaveAttribute('aria-invalid');
+    expect(radios[0].validity.valid).toBe(true);
+  });
+
+  it('should not set native validation message when validationBehavior=aria', async () => {
+    let {getByRole, getAllByRole} = render(
+      <Provider theme={theme}>
+        <form data-testid="form">
+          <RadioGroup name="pet" label="Favorite Pet" validationState="invalid" errorMessage="custom">
+            <Radio value="dogs">Dogs</Radio>
+            <Radio value="cats">Cats</Radio>
+            <Radio value="dragons">Dragons</Radio>
+          </RadioGroup>
+        </form>
+      </Provider>
+    );
+    let group = getByRole('radiogroup');
+    let radios = getAllByRole('radio');
+
+    expect(group).toHaveAttribute('aria-describedby');
+    expect(group).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(radios[0].validity.valid).toBe(true);
+  });
+
   describe('Radio group supports roving tabIndex ', function () {
     afterEach(() => {
       radioBehavior.reset();
diff --git a/packages/@react-spectrum/searchfield/src/SearchField.tsx b/packages/@react-spectrum/searchfield/src/SearchField.tsx
index 0d6eb17f525..73e5e975413 100644
--- a/packages/@react-spectrum/searchfield/src/SearchField.tsx
+++ b/packages/@react-spectrum/searchfield/src/SearchField.tsx
@@ -43,7 +43,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, ...textfieldProps} = useSearchField(props, state, inputRef);
 
   let clearButton = (
     <ClearButton
@@ -61,10 +61,7 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
   return (
     <TextFieldBase
       {...otherProps}
-      labelProps={labelProps}
-      inputProps={inputProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
+      {...textfieldProps}
       UNSAFE_className={
         classNames(
           styles,
diff --git a/packages/@react-spectrum/slider/src/RangeSlider.tsx b/packages/@react-spectrum/slider/src/RangeSlider.tsx
index 8e19a93215b..f9c9b09d34a 100644
--- a/packages/@react-spectrum/slider/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/slider/src/RangeSlider.tsx
@@ -58,7 +58,8 @@ function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivE
               isDisabled={props.isDisabled}
               trackRef={trackRef}
               inputRef={inputRef}
-              state={state} />
+              state={state}
+              name={props.startName} />
             <div
               className={classNames(styles, 'spectrum-Slider-track')}
               style={{
@@ -70,7 +71,8 @@ function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivE
               aria-label={stringFormatter.format('maximum')}
               isDisabled={props.isDisabled}
               trackRef={trackRef}
-              state={state} />
+              state={state}
+              name={props.endName} />
             <div
               className={classNames(styles, 'spectrum-Slider-track')}
               style={{
diff --git a/packages/@react-spectrum/slider/src/Slider.tsx b/packages/@react-spectrum/slider/src/Slider.tsx
index 6e48bc4bbe0..7c16db71ebb 100644
--- a/packages/@react-spectrum/slider/src/Slider.tsx
+++ b/packages/@react-spectrum/slider/src/Slider.tsx
@@ -103,7 +103,8 @@ function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
               isDisabled={props.isDisabled}
               trackRef={trackRef}
               inputRef={inputRef}
-              state={state} />
+              state={state}
+              name={props.name} />
             {filledTrack}
             {upperTrack}
           </>
diff --git a/packages/@react-spectrum/slider/test/RangeSlider.test.tsx b/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
index 1c580e7e7a8..abd2fdf819a 100644
--- a/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
+++ b/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {fireEvent, render} from '@react-spectrum/test-utils';
+import {act, fireEvent, render} from '@react-spectrum/test-utils';
 import {press, testKeypresses} from './utils';
 import {Provider} from '@adobe/react-spectrum';
 import {RangeSlider} from '../';
@@ -183,6 +183,44 @@ describe('RangeSlider', function () {
     expect(sliderRight).toHaveAttribute('aria-valuetext', '60');
   });
 
+  it('supports form name', () => {
+    let {getAllByRole} = render(<RangeSlider label="Value" value={{start: 10, end: 40}} startName="minCookies" endName="maxCookies" />);
+    let inputs = getAllByRole('slider');
+    expect(inputs[0]).toHaveAttribute('name', 'minCookies');
+    expect(inputs[0]).toHaveValue('10');
+    expect(inputs[1]).toHaveAttribute('name', 'maxCookies');
+    expect(inputs[1]).toHaveValue('40');
+  });
+
+  it('supports form reset', () => {
+    function Test() {
+      let [value, setValue] = React.useState({start: 10, end: 40});
+      return (
+        <Provider theme={theme}>
+          <form>
+            <RangeSlider label="Value" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        </Provider>
+      );
+    }
+
+    let {getByTestId, getAllByRole} = render(<Test />);
+    let inputs = getAllByRole('slider');
+
+    expect(inputs[0]).toHaveValue('10');
+    expect(inputs[1]).toHaveValue('40');
+    fireEvent.change(inputs[0], {target: {value: '30'}});
+    fireEvent.change(inputs[1], {target: {value: '60'}});
+    expect(inputs[0]).toHaveValue('30');
+    expect(inputs[1]).toHaveValue('60');
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(inputs[0]).toHaveValue('10');
+    expect(inputs[1]).toHaveValue('40');
+  });
+
   describe('formatOptions', () => {
     it('prefixes the value with a plus sign if needed', function () {
       let {getAllByRole, getByRole} = render(
diff --git a/packages/@react-spectrum/slider/test/Slider.test.tsx b/packages/@react-spectrum/slider/test/Slider.test.tsx
index 4acd318497e..2932a0f9d7d 100644
--- a/packages/@react-spectrum/slider/test/Slider.test.tsx
+++ b/packages/@react-spectrum/slider/test/Slider.test.tsx
@@ -166,6 +166,38 @@ describe('Slider', function () {
     expect(slider).toHaveAttribute('aria-valuetext', '55');
   });
 
+  it('supports form name', () => {
+    let {getByRole} = render(<Slider label="Value" value={10} name="cookies" />);
+    let input = getByRole('slider');
+    expect(input).toHaveAttribute('name', 'cookies');
+    expect(input).toHaveValue('10');
+  });
+
+  it('supports form reset', () => {
+    function Test() {
+      let [value, setValue] = React.useState(10);
+      return (
+        <Provider theme={theme}>
+          <form>
+            <Slider label="Value" value={value} onChange={setValue} />
+            <input type="reset" data-testid="reset" />
+          </form>
+        </Provider>
+      );
+    }
+
+    let {getByTestId, getByRole} = render(<Test />);
+    let input = getByRole('slider');
+
+    expect(input).toHaveValue('10');
+    fireEvent.change(input, {target: {value: '55'}});
+    expect(input).toHaveValue('55');
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(input).toHaveValue('10');
+  });
+
   describe('formatOptions', () => {
     it('prefixes the value with a plus sign if needed', function () {
       let {getByRole} = render(
diff --git a/packages/@react-spectrum/switch/test/Switch.test.js b/packages/@react-spectrum/switch/test/Switch.test.js
index 2570fc7c036..8bb314b74be 100644
--- a/packages/@react-spectrum/switch/test/Switch.test.js
+++ b/packages/@react-spectrum/switch/test/Switch.test.js
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, render} from '@react-spectrum/test-utils';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import {Switch} from '../';
 import userEvent from '@testing-library/user-event';
 
@@ -179,4 +179,38 @@ describe('Switch', function () {
     expect(checkbox.checked).toBeTruthy();
     expect(onChangeSpy).not.toHaveBeenCalled();
   });
+
+  it('supports validationBehavior', () => {
+    let {getByRole, rerender} = render(<Switch isRequired>Switch</Switch>);
+    let input = getByRole('switch');
+    expect(input).toHaveAttribute('aria-required', 'true');
+    expect(input).not.toHaveAttribute('required');
+
+    rerender(<Switch isRequired validationBehavior="native">Switch</Switch>);
+    expect(input).not.toHaveAttribute('aria-required', 'true');
+    expect(input).toHaveAttribute('required');
+  });
+
+  it('supports form reset', () => {
+    function Test() {
+      let [isSelected, setSelected] = React.useState(false);
+      return (
+        <form>
+          <Switch data-testid="switch" isSelected={isSelected} onChange={setSelected}>Switch</Switch>
+          <input type="reset" data-testid="reset" />
+        </form>
+      );
+    }
+
+    let {getByTestId} = render(<Test />);
+    let input = getByTestId('switch');
+
+    expect(input).not.toBeChecked();
+    act(() => userEvent.click(input));
+    expect(input).toBeChecked();
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(input).not.toBeChecked();
+  });
 });
diff --git a/packages/@react-spectrum/textfield/package.json b/packages/@react-spectrum/textfield/package.json
index beae0949125..dc45442986d 100644
--- a/packages/@react-spectrum/textfield/package.json
+++ b/packages/@react-spectrum/textfield/package.json
@@ -41,6 +41,7 @@
     "@react-aria/interactions": "^3.15.1",
     "@react-aria/textfield": "^3.9.2",
     "@react-aria/utils": "^3.17.0",
+    "@react-spectrum/form": "^3.6.2",
     "@react-spectrum/label": "^3.12.1",
     "@react-spectrum/utils": "^3.9.2",
     "@react-stately/utils": "^3.6.0",
diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx
index 99d88f36f32..262a9866446 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'
@@ -75,12 +77,9 @@ function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   return (
     <TextFieldBase
       {...otherProps}
+      {...result}
       ref={ref}
       inputRef={inputRef}
-      labelProps={labelProps}
-      inputProps={inputProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
       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/test/TextField.test.js b/packages/@react-spectrum/textfield/test/TextField.test.js
index 8a8863c79b3..acc0e3c02ed 100644
--- a/packages/@react-spectrum/textfield/test/TextField.test.js
+++ b/packages/@react-spectrum/textfield/test/TextField.test.js
@@ -210,6 +210,19 @@ describe('Shared TextField behavior', () => {
     let tree = renderComponent(Component, props);
     let input = tree.getByTestId(testId);
     expect(input).toHaveAttribute(expected);
+    expect(input).not.toHaveAttribute('required');
+  });
+
+  it.each`
+    Name                | Component
+    ${'v3 TextField'}   | ${TextField}
+    ${'v3 TextArea'}    | ${TextArea}
+    ${'v3 SearchField'} | ${SearchField}
+  `('$Name supports validationBehavior=native', ({Component}) => {
+    let tree = renderComponent(Component, {isRequired: true, validationBehavior: 'native'});
+    let input = tree.getByTestId(testId);
+    expect(input).toHaveAttribute('required');
+    expect(input).not.toHaveAttribute('aria-required');
   });
 
   it.each`
@@ -434,4 +447,147 @@ describe('Shared TextField behavior', () => {
     let input = tree.getByTestId(testId);
     expect(input).toHaveAttribute('tabIndex', '-1');
   });
+
+  it.each`
+    Name                | Component
+    ${'v3 TextField'}   | ${TextField}
+    ${'v3 TextArea'}    | ${TextArea}
+    ${'v3 SearchField'} | ${SearchField}
+  `('$Name supports form reset', ({Component}) => {
+    function Test() {
+      let [value, setValue] = React.useState('Devon');
+      return (
+        <form>
+          <Component data-testid="name" label="Name" value={value} onChange={setValue} />
+          <input type="reset" data-testid="reset" />
+        </form>
+      );
+    }
+
+    let {getByTestId} = render(<Test />);
+    let input = getByTestId('name');
+
+    expect(input).toHaveValue('Devon');
+    typeText(input, ' test');
+    expect(input).toHaveValue('Devon test');
+
+    let button = getByTestId('reset');
+    act(() => userEvent.click(button));
+    expect(input).toHaveValue('Devon');
+  });
+
+  it.each`
+    Name                | Component
+    ${'v3 TextField'}   | ${TextField}
+    ${'v3 TextArea'}    | ${TextArea}
+    ${'v3 SearchField'} | ${SearchField}
+  `('$Name supports native validation', ({Component}) => {
+    let onValidationChange = jest.fn();
+    let {getByTestId} = render(
+      <form data-testid="form">
+        <Component label="Name" data-testid="name" name="name" validationBehavior="native" isRequired onValidationChange={onValidationChange} />
+      </form>
+    );
+    let input = getByTestId('name');
+    let form = getByTestId('form');
+
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(onValidationChange).not.toHaveBeenCalled();
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+    expect(onValidationChange).toHaveBeenCalledTimes(1);
+    expect(onValidationChange).toHaveBeenLastCalledWith({
+      isInvalid: true,
+      errorMessage: 'Constraints not satisfied',
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valueMissing: true,
+        valid: false
+      }
+    });
+
+    typeText(input, 'test');
+    act(() => input.blur());
+
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(onValidationChange).toHaveBeenCalledTimes(2);
+    expect(onValidationChange).toHaveBeenLastCalledWith({
+      isInvalid: false,
+      errorMessage: '',
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valueMissing: false,
+        valid: true
+      }
+    });
+  });
+
+  it.each`
+    Name                | Component
+    ${'v3 TextField'}   | ${TextField}
+  `('$Name supports native custom validation message', ({Component}) => {
+    let onValidationChange = jest.fn();
+    let {getByTestId, rerender} = render(
+      <form data-testid="form">
+        <Component label="Name" data-testid="name" name="name" validationBehavior="native" validationState="invalid" errorMessage="custom" onValidationChange={onValidationChange} />
+      </form>
+    );
+    let form = getByTestId('form');
+    let input = getByTestId('name');
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(input.validity.valid).toBe(false);
+    expect(input.validationMessage).toBe('custom');
+
+    act(() => {form.checkValidity();});
+
+    rerender(
+      <form data-testid="form">
+        <Component label="Name" data-testid="name" name="name" validationBehavior="native" />
+      </form>
+    );
+    expect(input).not.toHaveAttribute('aria-describedby');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(input.validity.valid).toBe(true);
+    expect(onValidationChange).not.toHaveBeenCalled();
+  });
+
+  it.each`
+    Name                | Component
+    ${'v3 TextField'}   | ${TextField}
+    ${'v3 TextArea'}    | ${TextArea}
+    ${'v3 SearchField'} | ${SearchField}
+  `('$Name should not set native validation message when validationBehavior=aria', ({Component}) => {
+    let {getByTestId} = render(<Component label="Name" data-testid="name" name="name" validationState="invalid" errorMessage="custom" />);
+    let input = getByTestId('name');
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(input).toHaveAttribute('aria-invalid');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('custom');
+    expect(input.validity.valid).toBe(true);
+  });
 });
diff --git a/packages/@react-stately/datepicker/src/index.ts b/packages/@react-stately/datepicker/src/index.ts
index 1ecfb0ba5fa..06dc6851a60 100644
--- a/packages/@react-stately/datepicker/src/index.ts
+++ b/packages/@react-stately/datepicker/src/index.ts
@@ -18,4 +18,4 @@ export {useTimeFieldState} from './useTimeFieldState';
 export type {DateFieldStateOptions, DateFieldState, DateSegment, SegmentType} from './useDateFieldState';
 export type {DatePickerStateOptions, DatePickerState} from './useDatePickerState';
 export type {DateRangePickerStateOptions, DateRangePickerState} from './useDateRangePickerState';
-export type {TimeFieldStateOptions} from './useTimeFieldState';
+export type {TimeFieldStateOptions, TimeFieldState} from './useTimeFieldState';
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index ad63325ca7c..40ba5f7a20c 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, isInvalid, useDefaultProps} from './utils';
+import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, isInvalid, useDefaultProps, validate} from './utils';
 import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
 import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
@@ -144,7 +144,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     hideTimeZone,
     isDisabled,
     isReadOnly,
-    isRequired
+    isRequired,
+    onValidationChange
   } = props;
 
   let v: DateValue = (props.value || props.defaultValue || props.placeholderValue);
@@ -166,6 +167,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   );
 
   let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
+  let isValueInvalid = useMemo(() => isInvalid(value, props.minValue, props.maxValue), [value, props.minValue, props.maxValue]);
 
   // We keep track of the placeholder date separately in state so that onChange is not called
   // until all segments are set. If the value === null (not undefined), then assume the component
@@ -235,11 +237,17 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       return;
     }
 
-    if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+    if (newValue == null) {
+      setDate(null);
+      setPlaceholderDate(createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone));
+      setValidSegments({});
+      validate(null, props.minValue, props.maxValue, isValueInvalid, onValidationChange);
+    } else if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
       // The display calendar should not have any effect on the emitted value.
       // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
       newValue = toCalendar(newValue, v?.calendar || new GregorianCalendar());
       setDate(newValue);
+      validate(newValue, props.minValue, props.maxValue, isValueInvalid, onValidationChange);
     } else {
       setPlaceholderDate(newValue);
     }
@@ -297,7 +305,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   };
 
   let validationState: ValidationState = props.validationState ||
-    (isInvalid(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+    (isValueInvalid ? 'invalid' : null);
 
   return {
     value: calendarValue,
@@ -364,6 +372,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
 
       setDate(null);
       setValue(value);
+      validate(null, props.minValue, props.maxValue, isValueInvalid, onValidationChange);
     },
     formatValue(fieldOptions: FieldOptions) {
       if (!calendarValue) {
diff --git a/packages/@react-stately/datepicker/src/useTimeFieldState.ts b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
index e547583480c..f9918fd6c87 100644
--- a/packages/@react-stately/datepicker/src/useTimeFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
@@ -21,12 +21,17 @@ export interface TimeFieldStateOptions<T extends TimeValue = TimeValue> extends
   locale: string
 }
 
+export interface TimeFieldState extends DateFieldState {
+  /** The current time value. */
+  timeValue: Time
+}
+
 /**
  * Provides state management for a time field component.
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFieldStateOptions<T>): DateFieldState {
+export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFieldStateOptions<T>): TimeFieldState {
   let {
     placeholderValue = new Time(),
     minValue,
@@ -46,12 +51,13 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
   let minDate = useMemo(() => convertValue(minValue, day), [minValue, day]);
   let maxDate = useMemo(() => convertValue(maxValue, day), [maxValue, day]);
 
+  let timeValue = useMemo(() => value && 'day' in value ? toTime(value) : value as Time, [value]);
   let dateTime = useMemo(() => value == null ? null : convertValue(value), [value]);
   let onChange = newValue => {
     setValue(v && 'day' in v ? newValue : newValue && toTime(newValue));
   };
 
-  return useDateFieldState({
+  let state = useDateFieldState({
     ...props,
     value: dateTime,
     defaultValue: undefined,
@@ -64,6 +70,11 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     // Calendar should not matter for time fields.
     createCalendar: () => new GregorianCalendar()
   });
+
+  return {
+    ...state,
+    timeValue
+  };
 }
 
 function convertValue(value: TimeValue, date: DateValue = today(getLocalTimeZone())) {
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index 9f60486a575..0f234442c86 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -12,6 +12,7 @@
 
 import {Calendar, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {FormValidationEvent} from '@react-types/shared';
 import {useState} from 'react';
 
 export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateValue) {
@@ -21,6 +22,37 @@ export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateV
   );
 }
 
+export function validate(
+  value: DateValue,
+  minValue: DateValue,
+  maxValue: DateValue,
+  wasInvalid: boolean,
+  onValidationChange?: (e: FormValidationEvent
+) => void) {
+  if (onValidationChange) {
+    let isNewValueInvalid = isInvalid(value, minValue, maxValue);
+    if (isNewValueInvalid !== wasInvalid) {
+      onValidationChange({
+        isInvalid: isNewValueInvalid,
+        errorMessage: '',
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: isNewValueInvalid && maxValue != null && value.compare(maxValue) > 0,
+          rangeUnderflow: isNewValueInvalid && minValue != null && value.compare(minValue) < 0,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: false,
+          valid: !isNewValueInvalid
+        }
+      });
+    }
+  }
+}
+
 export type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;
 interface FormatterOptions {
   timeZone?: string,
diff --git a/packages/@react-stately/numberfield/src/useNumberFieldState.ts b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
index 6dd6cc2cb16..c658d2ab89e 100644
--- a/packages/@react-stately/numberfield/src/useNumberFieldState.ts
+++ b/packages/@react-stately/numberfield/src/useNumberFieldState.ts
@@ -42,6 +42,8 @@ export interface NumberFieldState {
   validate(value: string): boolean,
   /** Sets the current text value of the input. */
   setInputValue(val: string): void,
+  /** Sets the number value. */
+  setNumberValue(val: number): void,
   /**
    * Commits the current input value. The value is parsed to a number, clamped according
    * to the minimum and maximum values of the field, and snapped to the nearest step value.
@@ -240,6 +242,7 @@ export function useNumberFieldState(
     minValue,
     maxValue,
     numberValue: parsedValue,
+    setNumberValue,
     setInputValue,
     inputValue,
     commit
diff --git a/packages/@react-stately/slider/src/useSliderState.ts b/packages/@react-stately/slider/src/useSliderState.ts
index 801759db3cc..3a63fb2aecc 100644
--- a/packages/@react-stately/slider/src/useSliderState.ts
+++ b/packages/@react-stately/slider/src/useSliderState.ts
@@ -231,7 +231,7 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
 
     // Round value to multiple of step, clamp value between min and max
     value = snapValueToStep(value, thisMin, thisMax, step);
-    let newValues = replaceIndex(values, index, value);
+    let newValues = replaceIndex(valuesRef.current, index, value);
     setValues(newValues);
   }
 
diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts
index 576ad2f748c..7b7cc1310b0 100644
--- a/packages/@react-types/checkbox/src/index.d.ts
+++ b/packages/@react-types/checkbox/src/index.d.ts
@@ -18,6 +18,7 @@ import {
   FocusableProps,
   HelpTextProps,
   InputBase,
+  InputDOMProps,
   LabelableProps,
   Orientation,
   SpectrumHelpTextProps,
@@ -48,14 +49,10 @@ export interface ToggleProps extends InputBase, Validation, FocusableProps {
   /**
    * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
    */
-  value?: string,
-  /**
-   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
-   */
-  name?: string
+  value?: string
 }
 
-export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps {
+export interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps {
   /**
    * Identifies the element (or elements) whose contents or presence are controlled by the current element.
    */
@@ -74,12 +71,7 @@ export interface CheckboxProps extends ToggleProps {
 
 export interface AriaCheckboxProps extends CheckboxProps, AriaToggleProps {}
 
-export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, AriaLabelingProps, AriaValidationProps {
-  /**
-   * The name of the CheckboxGroup, used when submitting an HTML form.
-   */
-  name?: string
-}
+export interface AriaCheckboxGroupProps extends CheckboxGroupProps, DOMProps, InputDOMProps, AriaLabelingProps, AriaValidationProps {}
 
 export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {
   value: string
diff --git a/packages/@react-types/color/src/index.d.ts b/packages/@react-types/color/src/index.d.ts
index f9bad57a3b0..0bbb3bfb670 100644
--- a/packages/@react-types/color/src/index.d.ts
+++ b/packages/@react-types/color/src/index.d.ts
@@ -19,6 +19,7 @@ import {
   FocusableProps,
   HelpTextProps,
   InputBase,
+  InputDOMProps,
   LabelableProps,
   SpectrumLabelableProps,
   SpectrumTextInputBase,
@@ -121,7 +122,7 @@ export interface ColorWheelProps extends Omit<ValueBase<string | Color>, 'onChan
   defaultValue?: string | Color
 }
 
-export interface AriaColorWheelProps extends ColorWheelProps, DOMProps, AriaLabelingProps {}
+export interface AriaColorWheelProps extends ColorWheelProps, InputDOMProps, DOMProps, AriaLabelingProps {}
 
 export interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit<StyleProps, 'width' | 'height'> {
   /** The outer diameter of the ColorWheel. */
@@ -137,7 +138,7 @@ export interface ColorSliderProps extends Omit<SliderProps<string | Color>, 'min
   onChangeEnd?: (value: Color) => void
 }
 
-export interface AriaColorSliderProps extends ColorSliderProps, DOMProps, AriaLabelingProps {}
+export interface AriaColorSliderProps extends ColorSliderProps, InputDOMProps, DOMProps, AriaLabelingProps {}
 
 export interface SpectrumColorSliderProps extends AriaColorSliderProps, StyleProps {
   /** Whether the value label is displayed. True by default if there is a label, false by default if not. */
@@ -159,7 +160,16 @@ export interface ColorAreaProps extends Omit<ValueBase<string | Color>, 'onChang
   onChangeEnd?: (value: Color) => void
 }
 
-export interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps {}
+export interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps {
+  /**
+   * The name of the x channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  xName?: string,
+  /**
+   * The name of the y channel input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  yName?: string
+}
 
 export interface SpectrumColorAreaProps extends AriaColorAreaProps, Omit<StyleProps, 'width' | 'height'> {
   /** Size of the Color Area. */
diff --git a/packages/@react-types/combobox/src/index.d.ts b/packages/@react-types/combobox/src/index.d.ts
index 006692e8252..92f7e4487a3 100644
--- a/packages/@react-types/combobox/src/index.d.ts
+++ b/packages/@react-types/combobox/src/index.d.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusableProps, HelpTextProps, InputBase, LabelableProps, LoadingState, SingleSelection, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps, TextInputBase, Validation} from '@react-types/shared';
+import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusableProps, HelpTextProps, InputBase, InputDOMProps, LabelableProps, LoadingState, SingleSelection, SpectrumLabelableProps, SpectrumTextInputBase, StyleProps, TextInputBase, Validation} from '@react-types/shared';
 
 export type MenuTriggerAction = 'focus' | 'input' | 'manual';
 
@@ -38,14 +38,10 @@ export interface ComboBoxProps<T> extends CollectionBase<T>, Omit<SingleSelectio
   * The interaction required to display the ComboBox menu.
   * @default 'input'
   */
-  menuTrigger?: MenuTriggerAction,
-  /**
-   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
-   */
-  name?: string
+  menuTrigger?: MenuTriggerAction
 }
 
-export interface AriaComboBoxProps<T> extends ComboBoxProps<T>, DOMProps, AriaLabelingProps {
+export interface AriaComboBoxProps<T> extends ComboBoxProps<T>, DOMProps, InputDOMProps, AriaLabelingProps {
   /** Whether keyboard navigation is circular. */
   shouldFocusWrap?: boolean
 }
@@ -69,5 +65,11 @@ export interface SpectrumComboBoxProps<T> extends SpectrumTextInputBase, Omit<Ar
    * Whether the menu should automatically flip direction when space is limited.
    * @default true
    */
-  shouldFlip?: boolean
+  shouldFlip?: boolean,
+  /**
+   * Whether the text or key of the selected item is submitted as part of an HTML form.
+   * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.
+   * @default 'text'
+   */
+  formValue?: 'text' | 'key'
 }
diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts
index 6d7aa8404d8..01469430f61 100644
--- a/packages/@react-types/datepicker/src/index.d.ts
+++ b/packages/@react-types/datepicker/src/index.d.ts
@@ -16,6 +16,7 @@ import {
   FocusableProps,
   HelpTextProps,
   InputBase,
+  InputDOMProps,
   LabelableProps,
   RangeValue,
   SpectrumLabelableProps,
@@ -56,13 +57,13 @@ interface DateFieldBase<T extends DateValue> extends InputBase, Validation, Focu
 
 interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
 export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T>> {}
-export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T> {}
+export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T>, InputDOMProps {}
 
 interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayTriggerProps {}
 export interface AriaDatePickerBaseProps<T extends DateValue> extends DatePickerBase<T>, AriaLabelingProps, DOMProps {}
 
 export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T | null, MappedDateValue<T>> {}
-export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<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>>> {
@@ -73,7 +74,16 @@ 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 AriaDatePickerBaseProps<T>, 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).
+   */
+  startName?: string,
+  /**
+   * The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  endName?: string
+}
 
 interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, StyleProps {
   /**
diff --git a/packages/@react-types/form/src/index.d.ts b/packages/@react-types/form/src/index.d.ts
index 57c117ee3a2..08bf6955f9e 100644
--- a/packages/@react-types/form/src/index.d.ts
+++ b/packages/@react-types/form/src/index.d.ts
@@ -31,6 +31,7 @@ export interface SpectrumFormProps extends DOMProps, AriaLabelingProps, StylePro
    * @default 'valid'
    */
   validationState?: ValidationState,
+  validationBehavior?: 'aria' | 'native',
   /**
    * Where to send the form-data when the form is submitted.
    */
diff --git a/packages/@react-types/numberfield/src/index.d.ts b/packages/@react-types/numberfield/src/index.d.ts
index 175d7a00259..8051f3d3e15 100644
--- a/packages/@react-types/numberfield/src/index.d.ts
+++ b/packages/@react-types/numberfield/src/index.d.ts
@@ -15,7 +15,7 @@ import {
   DOMProps,
   FocusableProps,
   HelpTextProps,
-  InputBase, LabelableProps,
+  InputBase, InputDOMProps, LabelableProps,
   RangeInputBase, SpectrumLabelableProps,
   StyleProps,
   TextInputBase,
@@ -39,7 +39,7 @@ export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLa
   incrementAriaLabel?: string
 }
 
-export interface SpectrumNumberFieldProps extends Omit<AriaNumberFieldProps, 'placeholder'>, StyleProps, SpectrumLabelableProps {
+export interface SpectrumNumberFieldProps extends Omit<AriaNumberFieldProps, 'placeholder'>, 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/radio/src/index.d.ts b/packages/@react-types/radio/src/index.d.ts
index 0a185d95642..b7312adb0b3 100644
--- a/packages/@react-types/radio/src/index.d.ts
+++ b/packages/@react-types/radio/src/index.d.ts
@@ -17,6 +17,7 @@ import {
   FocusableProps,
   HelpTextProps,
   InputBase,
+  InputDOMProps,
   LabelableProps,
   Orientation,
   SpectrumHelpTextProps,
@@ -27,17 +28,12 @@ import {
 } from '@react-types/shared';
 import {ReactElement, ReactNode} from 'react';
 
-export interface RadioGroupProps extends ValueBase<string>, InputBase, Validation, LabelableProps, HelpTextProps {
+export interface RadioGroupProps extends ValueBase<string>, InputBase, InputDOMProps, Validation, LabelableProps, HelpTextProps {
   /**
    * The axis the Radio Button(s) should align with.
    * @default 'vertical'
    */
-  orientation?: Orientation,
-  /**
-   * The name of the RadioGroup, used when submitting an HTML form.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).
-   */
-  name?: string
+  orientation?: Orientation
 }
 
 export interface RadioProps extends FocusableProps {
diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts
index 204d23e54da..242afa7bd58 100644
--- a/packages/@react-types/shared/src/dom.d.ts
+++ b/packages/@react-types/shared/src/dom.d.ts
@@ -121,9 +121,16 @@ export interface TextInputDOMEvents {
    onInput?: FormEventHandler<HTMLInputElement>
 }
 
+export interface InputDOMProps {
+  /**
+   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  name?: string
+}
+
 // DOM props that apply to all text inputs
 // Ensure this is synced with useTextField
-export interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {
+export interface TextInputDOMProps extends DOMProps, InputDOMProps, TextInputDOMEvents {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
@@ -139,11 +146,6 @@ export interface TextInputDOMProps extends DOMProps, TextInputDOMEvents {
    */
   minLength?: number,
 
-  /**
-   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
-   */
-  name?: string,
-
   /**
    * Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
    */
diff --git a/packages/@react-types/shared/src/inputs.d.ts b/packages/@react-types/shared/src/inputs.d.ts
index 653b30af794..13c5bd73ed5 100644
--- a/packages/@react-types/shared/src/inputs.d.ts
+++ b/packages/@react-types/shared/src/inputs.d.ts
@@ -21,7 +21,26 @@ export interface Validation {
    * Whether user input is required on the input before form submission.
    * Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
    */
-  isRequired?: boolean
+  isRequired?: boolean,
+  /**
+   * Whether `isRequired` should use native HTML form validation to prevent form submission
+   * when a value is missing, or only mark the field as required via ARIA.
+   * @default 'aria'
+   */
+  validationBehavior?: 'aria' | 'native',
+  /**
+   * Handler that is called when input validation changes.
+   */
+  onValidationChange?: (state: FormValidationEvent) => void
+}
+
+export interface FormValidationEvent {
+  /** Whether the input is invalid. */
+  isInvalid: boolean,
+  /** The current error message for the input if it is invalid, otherwise an empty string. */
+  errorMessage: string,
+  /** The native validation details for the input. */
+  validationDetails: ValidityState
 }
 
 export interface InputBase {
diff --git a/packages/@react-types/slider/src/index.d.ts b/packages/@react-types/slider/src/index.d.ts
index 4cc7a9bf5d0..38f7268d98b 100644
--- a/packages/@react-types/slider/src/index.d.ts
+++ b/packages/@react-types/slider/src/index.d.ts
@@ -4,6 +4,7 @@ import {
   DOMProps,
   FocusableDOMProps,
   FocusableProps,
+  InputDOMProps,
   LabelableProps,
   LabelPosition,
   Orientation,
@@ -43,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, Omit<Validation, 'validationBehavior'>, LabelableProps {
   /**
    * The orientation of the Slider.
    * @default 'horizontal'
@@ -52,7 +53,7 @@ export interface SliderThumbProps extends FocusableProps, Validation, LabelableP
   orientation?: Orientation,
   /** Whether the Thumb is disabled. */
   isDisabled?: boolean,
-  /** 
+  /**
    * Index of the thumb within the slider.
    * @default 0
    */
@@ -60,7 +61,7 @@ export interface SliderThumbProps extends FocusableProps, Validation, LabelableP
 }
 
 export interface AriaSliderProps<T = number | number[]> extends SliderProps<T>, DOMProps, AriaLabelingProps {}
-export interface AriaSliderThumbProps extends SliderThumbProps, DOMProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps {}
+export interface AriaSliderThumbProps extends SliderThumbProps, DOMProps, FocusableDOMProps, InputDOMProps, AriaLabelingProps, AriaValidationProps {}
 
 export interface SpectrumBarSliderBase<T> extends AriaSliderProps<T>, ValueBase<T>, StyleProps {
   /**
@@ -82,7 +83,7 @@ export interface SpectrumBarSliderBase<T> extends AriaSliderProps<T>, ValueBase<
   contextualHelp?: ReactNode
 }
 
-export interface SpectrumSliderProps extends SpectrumBarSliderBase<number> {
+export interface SpectrumSliderProps extends SpectrumBarSliderBase<number>, InputDOMProps {
   /**
    * Whether a fill color is shown between the start of the slider and the current value.
    * @see https://spectrum.adobe.com/page/slider/#Fill.
@@ -102,4 +103,13 @@ export interface SpectrumSliderProps extends SpectrumBarSliderBase<number> {
   trackGradient?: string[]
 }
 
-export interface SpectrumRangeSliderProps extends SpectrumBarSliderBase<RangeValue<number>> { }
+export interface SpectrumRangeSliderProps extends SpectrumBarSliderBase<RangeValue<number>> {
+  /**
+   * The name of the start input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  startName?: string,
+  /**
+   * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  endName?: string
+}
diff --git a/packages/@react-types/switch/src/index.d.ts b/packages/@react-types/switch/src/index.d.ts
index c22fc8c39f3..fc44520e083 100644
--- a/packages/@react-types/switch/src/index.d.ts
+++ b/packages/@react-types/switch/src/index.d.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, FocusableDOMProps, FocusableProps, InputBase, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, FocusableDOMProps, FocusableProps, InputBase, InputDOMProps, StyleProps} from '@react-types/shared';
 import {ReactNode} from 'react';
 
 interface SwitchBase extends InputBase, FocusableProps {
@@ -33,14 +33,10 @@ interface SwitchBase extends InputBase, FocusableProps {
   /**
    * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
    */
-  value?: string,
-  /**
-   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
-   */
-  name?: string
+  value?: string
 }
 export interface SwitchProps extends SwitchBase {}
-export interface AriaSwitchBase extends SwitchBase, FocusableDOMProps, AriaLabelingProps {
+export interface AriaSwitchBase extends SwitchBase, FocusableDOMProps, InputDOMProps, AriaLabelingProps {
   /**
    * Identifies the element (or elements) whose contents or presence are controlled by the current element.
    */
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index cc3ad0e94ac..a9f833fff38 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -13,6 +13,7 @@ import {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListBoxProps} from './ListBox';
@@ -35,9 +36,15 @@ export interface ComboBoxRenderProps {
   isOpen: boolean
 }
 
-export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'name' | 'label' | 'description' | 'errorMessage'>, RenderProps<ComboBoxRenderProps>, SlotProps {
+export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage'>, RenderProps<ComboBoxRenderProps>, SlotProps {
   /** The filter function used to determine if a option should be included in the combo box list. */
-  defaultFilter?: (textValue: string, inputValue: string) => boolean
+  defaultFilter?: (textValue: string, inputValue: string) => boolean,
+  /**
+   * Whether the text or key of the selected item is submitted as part of an HTML form.
+   * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.
+   * @default 'text'
+   */
+  formValue?: 'text' | 'key'
 }
 
 export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);
@@ -45,6 +52,14 @@ export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HT
 function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ComboBoxContext);
   let [propsFromListBox, setListBoxProps] = useState<ListBoxProps<T>>({children: []});
+  let {
+    name,
+    formValue = 'text',
+    allowsCustomValue
+  } = props;
+  if (allowsCustomValue) {
+    formValue = 'text';
+  }
 
   let {contains} = useFilter({sensitivity: 'base'});
   let {portal, collection} = useCollection({
@@ -73,14 +88,17 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
     listBoxProps,
     labelProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    ...validationProps
   } = useComboBox({
     ...props,
     label,
     inputRef,
     buttonRef,
     listBoxRef,
-    popoverRef
+    popoverRef,
+    name: formValue === 'text' ? name : undefined,
+    validationBehavior: props.validationBehavior ?? 'native'
   },
   state);
 
@@ -131,7 +149,8 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
             description: descriptionProps,
             errorMessage: errorMessageProps
           }
-        }]
+        }],
+        [FormErrorContext, validationProps]
       ]}>
       <div
         {...DOMProps}
@@ -141,6 +160,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
         data-focused={state.isFocused || undefined}
         data-open={state.isOpen || undefined} />
       {portal}
+      {name && formValue === 'key' && <input type="hidden" name={name} value={state.selectedKey ?? ''} />}
     </Provider>
   );
 }
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
index 54663981c20..4e826fc341a 100644
--- a/packages/react-aria-components/src/DateField.tsx
+++ b/packages/react-aria-components/src/DateField.tsx
@@ -14,8 +14,10 @@ import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleRen
 import {createCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, useDateFieldState, useTimeFieldState} from 'react-stately';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
+import {InputDOMProps} from '@react-types/shared';
 import {LabelContext} from './Label';
-import React, {cloneElement, createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactElement, useContext, useRef} from 'react';
+import React, {cloneElement, createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, ReactElement, RefObject, useContext, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage'>, RenderProps<DateFieldState>, SlotProps {}
@@ -23,7 +25,9 @@ export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldP
 
 interface DateInputContextValue extends SlotProps {
   state: DateFieldState,
-  fieldProps: HTMLAttributes<HTMLElement>
+  fieldProps: HTMLAttributes<HTMLElement>,
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
+  inputRef: RefObject<HTMLInputElement>
 }
 
 export const DateFieldContext = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);
@@ -41,7 +45,20 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
 
   let fieldRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useDateField({...props, label}, state, fieldRef);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let {
+    labelProps,
+    fieldProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validationProps
+  } = useDateField({
+    ...props,
+    label,
+    inputRef,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, fieldRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -55,14 +72,15 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
   return (
     <Provider
       values={[
-        [DateInputContext, {state, fieldProps, ref: fieldRef}],
+        [DateInputContext, {state, fieldProps, ref: fieldRef, inputRef, inputProps}],
         [LabelContext, {...labelProps, ref: labelRef}],
         [TextContext, {
           slots: {
             description: descriptionProps,
             errorMessage: errorMessageProps
           }
-        }]
+        }],
+        [FormErrorContext, validationProps]
       ]}>
       <div {...DOMProps} {...renderProps} ref={ref} slot={props.slot} />
     </Provider>
@@ -86,7 +104,20 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
 
   let fieldRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useTimeField({...props, label}, state, fieldRef);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let {
+    labelProps,
+    fieldProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validationProps
+  } = useTimeField({
+    ...props,
+    label,
+    inputRef,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, fieldRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -100,14 +131,15 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
   return (
     <Provider
       values={[
-        [DateInputContext, {state, fieldProps, ref: fieldRef}],
+        [DateInputContext, {state, fieldProps, ref: fieldRef, inputRef, inputProps}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [TextContext, {
           slots: {
             description: descriptionProps,
             errorMessage: errorMessageProps
           }
-        }]
+        }],
+        [FormErrorContext, validationProps]
       ]}>
       <div {...DOMProps} {...renderProps} ref={ref} slot={props.slot} />
     </Provider>
@@ -146,12 +178,12 @@ export interface DateInputRenderProps {
   isDisabled: boolean
 }
 
-export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRenderProps> {
+export interface DateInputProps extends InputDOMProps, SlotProps, StyleRenderProps<DateInputRenderProps> {
   children: (segment: IDateSegment) => ReactElement
 }
 
-function DateInput({children, slot, ...otherProps}: DateInputProps, ref: ForwardedRef<HTMLDivElement>) {
-  let [{state, fieldProps}, fieldRef] = useContextProps({slot} as DateInputProps & DateInputContextValue, ref, DateInputContext);
+function DateInput({children, slot, name, ...otherProps}: DateInputProps, ref: ForwardedRef<HTMLDivElement>) {
+  let [{state, fieldProps, inputProps, inputRef}, fieldRef] = useContextProps({slot} as DateInputProps & DateInputContextValue, ref, DateInputContext);
 
   let {hoverProps, isHovered} = useHover({});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({
@@ -177,6 +209,7 @@ function DateInput({children, slot, ...otherProps}: DateInputProps, ref: Forward
         data-disabled={state.isDisabled || undefined}>
         {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
       </div>
+      <input {...inputProps} ref={inputRef} name={name ?? inputProps.name} />
     </InternalDateInputContext.Provider>
   );
 }
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index 28514080d34..40c25abdd39 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -18,6 +18,7 @@ import {DateInputContext} from './DateField';
 import {DatePickerState, DateRangePickerState, useDateFieldState, useDatePickerState, useDateRangePickerState} from 'react-stately';
 import {DialogContext} from './Dialog';
 import {filterDOMProps} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
 import {GroupContext} from './Group';
 import {LabelContext} from './Label';
 import {PopoverContext} from './Popover';
@@ -25,7 +26,7 @@ import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage'>, RenderProps<DatePickerState>, SlotProps {}
-export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage'>, RenderProps<DateRangePickerState>, SlotProps {}
+export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'startName' | 'endName'>, RenderProps<DateRangePickerState>, SlotProps {}
 
 export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
 export const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
@@ -43,8 +44,13 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
     dialogProps,
     calendarProps,
     descriptionProps,
-    errorMessageProps
-  } = useDatePicker({...props, label}, state, groupRef);
+    errorMessageProps,
+    ...validationProps
+  } = useDatePicker({
+    ...props,
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, groupRef);
 
   let {locale} = useLocale();
   let fieldState = useDateFieldState({
@@ -54,7 +60,8 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
   });
 
   let fieldRef = useRef<HTMLDivElement>(null);
-  let {fieldProps: dateFieldProps} = useDateField({...fieldProps, label}, fieldState, fieldRef);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let {fieldProps: dateFieldProps, inputProps} = useDateField({...fieldProps, label, inputRef}, fieldState, fieldRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -69,7 +76,7 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
     <Provider
       values={[
         [GroupContext, {...groupProps, ref: groupRef}],
-        [DateInputContext, {state: fieldState, fieldProps: dateFieldProps, ref: fieldRef}],
+        [DateInputContext, {state: fieldState, fieldProps: dateFieldProps, ref: fieldRef, inputProps, inputRef}],
         [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [CalendarContext, calendarProps],
@@ -80,7 +87,8 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
             description: descriptionProps,
             errorMessage: errorMessageProps
           }
-        }]
+        }],
+        [FormErrorContext, validationProps]
       ]}>
       <div {...DOMProps} {...renderProps} ref={ref} slot={props.slot} />
     </Provider>
@@ -107,8 +115,13 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
     dialogProps,
     calendarProps,
     descriptionProps,
-    errorMessageProps
-  } = useDateRangePicker({...props, label}, state, groupRef);
+    errorMessageProps,
+    ...validationProps
+  } = useDateRangePicker({
+    ...props,
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, groupRef);
 
   let {locale} = useLocale();
   let startFieldState = useDateFieldState({
@@ -118,7 +131,8 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
   });
 
   let startFieldRef = useRef<HTMLDivElement>(null);
-  let {fieldProps: startDateFieldProps} = useDateField({...startFieldProps, label}, startFieldState, startFieldRef);
+  let startInputRef = useRef<HTMLInputElement>(null);
+  let {fieldProps: startDateFieldProps, inputProps: startInputProps} = useDateField({...startFieldProps, label, inputRef: startInputRef}, startFieldState, startFieldRef);
 
   let endFieldState = useDateFieldState({
     ...endFieldProps,
@@ -127,7 +141,8 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
   });
 
   let endFieldRef = useRef<HTMLDivElement>(null);
-  let {fieldProps: endDateFieldProps} = useDateField({...endFieldProps, label}, endFieldState, endFieldRef);
+  let endInputRef = useRef<HTMLInputElement>(null);
+  let {fieldProps: endDateFieldProps, inputProps: endInputProps} = useDateField({...endFieldProps, label, inputRef: endInputRef}, endFieldState, endFieldRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -152,12 +167,16 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
             start: {
               state: startFieldState,
               fieldProps: startDateFieldProps,
-              ref: startFieldRef
+              ref: startFieldRef,
+              inputRef: startInputRef,
+              inputProps: startInputProps
             },
             end: {
               state: endFieldState,
               fieldProps: endDateFieldProps,
-              ref: endFieldRef
+              ref: endFieldRef,
+              inputRef: endInputRef,
+              inputProps: endInputProps
             }
           }
         }],
@@ -166,7 +185,8 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
             description: descriptionProps,
             errorMessage: errorMessageProps
           }
-        }]
+        }],
+        [FormErrorContext, validationProps]
       ]}>
       <div {...DOMProps} {...renderProps} ref={ref} slot={props.slot} />
     </Provider>
diff --git a/packages/react-aria-components/src/FormError.tsx b/packages/react-aria-components/src/FormError.tsx
new file mode 100644
index 00000000000..1d25c28cef0
--- /dev/null
+++ b/packages/react-aria-components/src/FormError.tsx
@@ -0,0 +1,44 @@
+/*
+ * 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 {FormValidationResult} from '@react-aria/utils';
+import {forwardRefType, RenderProps, useRenderProps} from './utils';
+import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import {Text} from './Text';
+
+export interface FormErrorProps extends RenderProps<FormValidationResult> {}
+
+export const FormErrorContext = createContext<FormValidationResult | null>(null);
+
+function FormError(props: FormErrorProps, ref: ForwardedRef<HTMLElement>) {
+  let validation = useContext(FormErrorContext)!;
+  let renderProps = useRenderProps({
+    ...props,
+    defaultChildren: validation.errorMessage,
+    defaultClassName: 'react-aria-FormError',
+    values: validation
+  });
+
+  if (!renderProps.children) {
+    return null;
+  }
+
+  return (
+    <Text {...renderProps} ref={ref} slot="errorMessage" />
+  );
+}
+
+/**
+ * Displays a validation error message for an input within a form.
+ */
+const _FormError = /*#__PURE__*/ (forwardRef as forwardRefType)(FormError);
+export {_FormError as FormError};
diff --git a/packages/react-aria-components/src/NumberField.tsx b/packages/react-aria-components/src/NumberField.tsx
index fb347e85647..322400ff3bf 100644
--- a/packages/react-aria-components/src/NumberField.tsx
+++ b/packages/react-aria-components/src/NumberField.tsx
@@ -14,14 +14,16 @@ import {AriaNumberFieldProps, useLocale, useNumberField} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
+import {InputDOMProps} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {NumberFieldState, useNumberFieldState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 
-export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage'>, RenderProps<NumberFieldState>, SlotProps {}
+export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage'>, InputDOMProps, RenderProps<NumberFieldState>, SlotProps {}
 
 export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
 
@@ -38,8 +40,13 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
     incrementButtonProps,
     decrementButtonProps,
     descriptionProps,
-    errorMessageProps
-  } = useNumberField({...props, label}, state, inputRef);
+    errorMessageProps,
+    ...validationProps
+  } = useNumberField({
+    ...props,
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, inputRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -67,9 +74,11 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
             description: descriptionProps,
             errorMessage: errorMessageProps
           }
-        }]
+        }],
+        [FormErrorContext, validationProps]
       ]}>
       <div {...DOMProps} {...renderProps} ref={ref} slot={props.slot} />
+      {props.name && <input type="hidden" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
     </Provider>
   );
 }
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index 7403fc8fc2a..5ea791e6085 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -13,6 +13,7 @@
 import {AriaRadioGroupProps, AriaRadioProps, Orientation, useFocusRing, useHover, usePress, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
 import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState, ValidationState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useState} from 'react';
@@ -104,9 +105,10 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, RadioGroupContext);
   let state = useRadioGroupState(props);
   let [labelRef, label] = useSlot();
-  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps} = useRadioGroup({
+  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationProps} = useRadioGroup({
     ...props,
-    label
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
   }, state);
 
   let renderProps = useRenderProps({
@@ -132,7 +134,8 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
               description: descriptionProps,
               errorMessage: errorMessageProps
             }
-          }]
+          }],
+          [FormErrorContext, validationProps]
         ]}>
         {renderProps.children}
       </Provider>
diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx
index 0227fc44d03..b92ced52613 100644
--- a/packages/react-aria-components/src/SearchField.tsx
+++ b/packages/react-aria-components/src/SearchField.tsx
@@ -14,6 +14,7 @@ import {AriaSearchFieldProps, useSearchField} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
@@ -37,9 +38,10 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
   let inputRef = useRef<HTMLInputElement>(null);
   let [labelRef, label] = useSlot();
   let state = useSearchFieldState(props);
-  let {labelProps, inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
+  let {labelProps, inputProps, clearButtonProps, descriptionProps, errorMessageProps, ...validationProps} = useSearchField({
     ...props,
-    label
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
   }, state, inputRef);
 
   let renderProps = useRenderProps({
@@ -68,7 +70,8 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
               description: descriptionProps,
               errorMessage: errorMessageProps
             }
-          }]
+          }],
+          [FormErrorContext, validationProps]
         ]}>
         {renderProps.children}
       </Provider>
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index 70baa695aad..9f0c4989300 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -14,6 +14,7 @@ import {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
 import {ItemRenderProps, useCollection} from './Collection';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListBoxProps} from './ListBox';
@@ -65,6 +66,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
 
   // Get props for child elements from useSelect
   let buttonRef = useRef<HTMLButtonElement>(null);
+  let hiddenSelectRef = useRef<HTMLSelectElement>(null);
   let [labelRef, label] = useSlot();
   let {
     labelProps,
@@ -72,8 +74,14 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
     valueProps,
     menuProps,
     descriptionProps,
-    errorMessageProps
-  } = useSelect({...props, label}, state, buttonRef);
+    errorMessageProps,
+    ...validationProps
+  } = useSelect({
+    ...props,
+    label,
+    hiddenSelectRef,
+    validationBehavior: props.validationBehavior ?? 'native'
+  }, state, buttonRef);
 
   // Make menu width match input + button
   let [buttonWidth, setButtonWidth] = useState<string | null>(null);
@@ -116,7 +124,8 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
             description: descriptionProps,
             errorMessage: errorMessageProps
           }
-        }]
+        }],
+        [FormErrorContext, validationProps]
       ]}>
       <div
         {...DOMProps}
@@ -129,8 +138,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
       <HiddenSelect
         state={state}
         triggerRef={buttonRef}
-        label={label}
-        name={props.name} />
+        ref={hiddenSelectRef} />
     </Provider>
   );
 }
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
index fa5875754b2..86aa516ea18 100644
--- a/packages/react-aria-components/src/TextField.tsx
+++ b/packages/react-aria-components/src/TextField.tsx
@@ -13,6 +13,7 @@
 import {AriaTextFieldProps, useTextField} from 'react-aria';
 import {ContextValue, DOMProps, Provider, SlotProps, useContextProps, useSlot} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
+import {FormErrorContext} from './FormError';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
@@ -26,9 +27,10 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TextFieldContext);
   let inputRef = useRef<HTMLInputElement>(null);
   let [labelRef, label] = useSlot();
-  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
+  let {labelProps, inputProps, descriptionProps, errorMessageProps, ...validationProps} = useTextField({
     ...props,
-    label
+    label,
+    validationBehavior: props.validationBehavior ?? 'native'
   }, inputRef);
 
   return (
@@ -47,7 +49,8 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
               description: descriptionProps,
               errorMessage: errorMessageProps
             }
-          }]
+          }],
+          [FormErrorContext, validationProps]
         ]}>
         {props.children}
       </Provider>
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index 70994f47823..b22e1b20576 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -18,6 +18,7 @@ export {ComboBox, ComboBoxContext} from './ComboBox';
 export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext} from './DateField';
 export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext} from './DatePicker';
 export {DialogTrigger, Dialog, DialogContext} from './Dialog';
+export {FormError, FormErrorContext} from './FormError';
 export {GridList, GridListContext} from './GridList';
 export {Group, GroupContext} from './Group';
 export {Header} from './Header';
@@ -59,6 +60,7 @@ export type {ComboBoxProps, ComboBoxRenderProps} from './ComboBox';
 export type {DateFieldProps, DateInputProps, DateInputRenderProps, DateSegmentProps, DateSegmentRenderProps, TimeFieldProps} from './DateField';
 export type {DatePickerProps, DateRangePickerProps} from './DatePicker';
 export type {DialogProps, DialogTriggerProps} from './Dialog';
+export type {FormErrorProps} from './FormError';
 export type {GridListProps, GridListRenderProps} from './GridList';
 export type {GroupProps, GroupRenderProps} from './Group';
 export type {HeadingProps} from './Heading';
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index 3c32fbf67d8..e42bf8c6865 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -33,7 +33,7 @@ interface SlottedValue<T> {
 export type ContextValue<T extends SlotProps, E extends Element> = SlottedValue<WithRef<T, E>> | WithRef<T, E> | null | undefined;
 
 type ProviderValue<T> = [React.Context<T>, T];
-type ProviderValues<A, B, C, D, E, F, G, H> =
+type ProviderValues<A, B, C, D, E, F, G, H, I> =
   | [ProviderValue<A>]
   | [ProviderValue<A>, ProviderValue<B>]
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>]
@@ -41,14 +41,15 @@ type ProviderValues<A, B, C, D, E, F, G, H> =
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>]
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>]
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>]
-  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>];
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>];
 
-interface ProviderProps<A, B, C, D, E, F, G, H> {
-  values: ProviderValues<A, B, C, D, E, F, G, H>,
+interface ProviderProps<A, B, C, D, E, F, G, H, I> {
+  values: ProviderValues<A, B, C, D, E, F, G, H, I>,
   children: React.ReactNode
 }
 
-export function Provider<A, B, C, D, E, F, G, H>({values, children}: ProviderProps<A, B, C, D, E, F, G, H>): JSX.Element {
+export function Provider<A, B, C, D, E, F, G, H, I>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I>): JSX.Element {
   for (let [Context, value] of values) {
     // @ts-ignore
     children = <Context.Provider value={value}>{children}</Context.Provider>;
diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js
index a125674fca4..a712e703e28 100644
--- a/packages/react-aria-components/test/ComboBox.test.js
+++ b/packages/react-aria-components/test/ComboBox.test.js
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ComboBox, ComboBoxContext, Header, Input, Item, Label, ListBox, Popover, Section, Text} from '../';
+import {act, render, within} from '@react-spectrum/test-utils';
+import {Button, ComboBox, ComboBoxContext, FormError, Header, Input, Item, Label, ListBox, Popover, Section, Text} from '../';
 import React from 'react';
-import {render, within} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 let TestComboBox = (props) => (
@@ -24,9 +24,9 @@ let TestComboBox = (props) => (
     <Text slot="errorMessage">Error</Text>
     <Popover>
       <ListBox>
-        <Item>Cat</Item>
-        <Item>Dog</Item>
-        <Item>Kangaroo</Item>
+        <Item id="1">Cat</Item>
+        <Item id="2">Dog</Item>
+        <Item id="3">Kangaroo</Item>
       </ListBox>
     </Popover>
   </ComboBox>
@@ -147,4 +147,48 @@ describe('ComboBox', () => {
     userEvent.click(button);
     expect(button).toHaveTextContent('close');
   });
+
+  it('should support formValue', () => {
+    let {getByRole, rerender} = render(<TestComboBox name="test" selectedKey="2" />);
+    let input = getByRole('combobox');
+    expect(input).toHaveAttribute('name', 'test');
+    expect(input).toHaveValue('Dog');
+    expect(document.querySelector('input[type=hidden]')).toBeNull();
+
+    rerender(<TestComboBox name="test" formValue="key" selectedKey="2" />);
+    expect(input).not.toHaveAttribute('name');
+
+    let hiddenInput = document.querySelector('input[type=hidden]');
+    expect(hiddenInput).toHaveAttribute('name', 'test');
+    expect(hiddenInput).toHaveValue('2');
+  });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <ComboBox isRequired>
+          <Label>Favorite Animal</Label>
+          <Input />
+          <Button />
+          <FormError />
+          <Popover>
+            <ListBox>
+              <Item id="1">Cat</Item>
+              <Item id="2">Dog</Item>
+              <Item id="3">Kangaroo</Item>
+            </ListBox>
+          </Popover>
+        </ComboBox>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('combobox');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/DateField.test.js b/packages/react-aria-components/test/DateField.test.js
index 3a6f83709b0..2660003eb48 100644
--- a/packages/react-aria-components/test/DateField.test.js
+++ b/packages/react-aria-components/test/DateField.test.js
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {act, render, within} from '@react-spectrum/test-utils';
 import {CalendarDate} from '@internationalized/date';
-import {DateField, DateFieldContext, DateInput, DateSegment, Label, Text} from '../';
+import {DateField, DateFieldContext, DateInput, DateSegment, FormError, Label, Text} from '../';
 import React from 'react';
-import {render, within} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 describe('DateField', () => {
@@ -164,4 +164,40 @@ describe('DateField', () => {
     let group = getByRole('group');
     expect(group).toHaveAttribute('data-validation-state', 'invalid');
   });
+
+  it('should support form value', () => {
+    render(
+      <DateField name="birthday" value={new CalendarDate(2020, 2, 3)}>
+        <Label>Birth date</Label>
+        <DateInput>
+          {segment => <DateSegment segment={segment} />}
+        </DateInput>
+      </DateField>
+    );
+    let input = document.querySelector('input[name=birthday]');
+    expect(input).toHaveValue('2020-02-03');
+  });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <DateField isRequired>
+          <Label>Birth date</Label>
+          <DateInput>
+            {segment => <DateSegment segment={segment} />}
+          </DateInput>
+          <FormError />
+        </DateField>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('group');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/DatePicker.test.js b/packages/react-aria-components/test/DatePicker.test.js
index cfb604170a9..f61a60aaaf6 100644
--- a/packages/react-aria-components/test/DatePicker.test.js
+++ b/packages/react-aria-components/test/DatePicker.test.js
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DatePickerContext, DateSegment, Dialog, Group, Heading, Label, Popover, Text} from 'react-aria-components';
+import {act, render} from '@react-spectrum/test-utils';
+import {Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DatePickerContext, DateSegment, Dialog, FormError, Group, Heading, Label, Popover, Text} from 'react-aria-components';
 import {CalendarDate} from '@internationalized/date';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 let TestDatePicker = (props) => (
@@ -132,8 +132,54 @@ describe('DatePicker', () => {
         )}
       </DatePicker>
     );
-    
+
     let group = getByRole('group');
     expect(group).toHaveAttribute('data-validation-state', 'invalid');
   });
+
+  it('should support form value', () => {
+    render(<TestDatePicker name="birthday" value={new CalendarDate(2020, 2, 3)} />);
+    let input = document.querySelector('input[name=birthday]');
+    expect(input).toHaveValue('2020-02-03');
+  });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <DatePicker isRequired>
+          <Label>Birth date</Label>
+          <Group>
+            <DateInput>
+              {(segment) => <DateSegment segment={segment} />}
+            </DateInput>
+            <Button>▼</Button>
+          </Group>
+          <FormError />
+          <Popover>
+            <Dialog>
+              <Calendar>
+                <header>
+                  <Button slot="previous">◀</Button>
+                  <Heading />
+                  <Button slot="next">▶</Button>
+                </header>
+                <CalendarGrid>
+                  {(date) => <CalendarCell date={date} />}
+                </CalendarGrid>
+              </Calendar>
+            </Dialog>
+          </Popover>
+        </DatePicker>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('group');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/DateRangePicker.test.js b/packages/react-aria-components/test/DateRangePicker.test.js
index 6181a9c5a6f..b623cc98e42 100644
--- a/packages/react-aria-components/test/DateRangePicker.test.js
+++ b/packages/react-aria-components/test/DateRangePicker.test.js
@@ -10,21 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, CalendarCell, CalendarGrid, DateInput, DateRangePicker, DateRangePickerContext, DateSegment, Dialog, Group, Heading, Label, Popover, RangeCalendar, Text} from 'react-aria-components';
+import {act, render} from '@react-spectrum/test-utils';
+import {Button, CalendarCell, CalendarGrid, DateInput, DateRangePicker, DateRangePickerContext, DateSegment, Dialog, FormError, Group, Heading, Label, Popover, RangeCalendar, Text} from 'react-aria-components';
 import {CalendarDate} from '@internationalized/date';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 let TestDateRangePicker = (props) => (
   <DateRangePicker data-foo="bar" {...props}>
     <Label>Trip dates</Label>
     <Group>
-      <DateInput slot="start">
+      <DateInput slot="start" {...props.startInputProps}>
         {(segment) => <DateSegment segment={segment} />}
       </DateInput>
       <span aria-hidden="true">–</span>
-      <DateInput slot="end">
+      <DateInput slot="end" {...props.endInputProps}>
         {(segment) => <DateSegment segment={segment} />}
       </DateInput>
       <Button>▼</Button>
@@ -141,8 +141,60 @@ describe('DateRangePicker', () => {
         )}
       </DateRangePicker>
     );
-    
+
     let group = getByRole('group');
     expect(group).toHaveAttribute('data-validation-state', 'invalid');
   });
+
+  it('should support form value', () => {
+    render(<TestDateRangePicker startInputProps={{name: 'start'}} endInputProps={{name: 'end'}} value={{start: new CalendarDate(2023, 1, 10), end: new CalendarDate(2023, 1, 20)}} />);
+    let start = document.querySelector('input[name=start]');
+    expect(start).toHaveValue('2023-01-10');
+    let end = document.querySelector('input[name=end]');
+    expect(end).toHaveValue('2023-01-20');
+  });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <DateRangePicker isRequired>
+          <Label>Trip dates</Label>
+          <Group>
+            <DateInput slot="start">
+              {(segment) => <DateSegment segment={segment} />}
+            </DateInput>
+            <span aria-hidden="true">–</span>
+            <DateInput slot="end">
+              {(segment) => <DateSegment segment={segment} />}
+            </DateInput>
+            <Button>▼</Button>
+          </Group>
+          <FormError />
+          <Popover>
+            <Dialog>
+              <RangeCalendar>
+                <header>
+                  <Button slot="previous">◀</Button>
+                  <Heading />
+                  <Button slot="next">▶</Button>
+                </header>
+                <CalendarGrid>
+                  {(date) => <CalendarCell date={date} />}
+                </CalendarGrid>
+              </RangeCalendar>
+            </Dialog>
+          </Popover>
+        </DateRangePicker>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('group');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/NumberField.test.js b/packages/react-aria-components/test/NumberField.test.js
index c4bb4894bbc..a9e1a80a0a7 100644
--- a/packages/react-aria-components/test/NumberField.test.js
+++ b/packages/react-aria-components/test/NumberField.test.js
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Group, Input, Label, NumberField, NumberFieldContext, Text} from '../';
+import {act, render} from '@react-spectrum/test-utils';
+import {Button, FormError, Group, Input, Label, NumberField, NumberFieldContext, Text} from '../';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 let TestNumberField = (props) => (
@@ -120,4 +120,38 @@ describe('NumberField', () => {
     let label = document.getElementById(input.getAttribute('aria-labelledby'));
     expect(label).toHaveTextContent('Width (min: 300, max: 1400)');
   });
+
+  it('should support form value', () => {
+    let {rerender} = render(<TestNumberField name="test" value={25} formatOptions={{style: 'currency', currency: 'USD'}} />);
+    let input = document.querySelector('input[name=test]');
+    expect(input).toHaveValue('25');
+
+    rerender(<TestNumberField name="test" value={null} formatOptions={{style: 'currency', currency: 'USD'}} />);
+    expect(input).toHaveValue('');
+  });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <NumberField isRequired>
+          <Label>Width</Label>
+          <Group>
+            <Button slot="decrement">-</Button>
+            <Input />
+            <Button slot="increment">+</Button>
+          </Group>
+          <FormError />
+        </NumberField>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('textbox');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index 343118add86..2b2c055acf0 100644
--- a/packages/react-aria-components/test/RadioGroup.test.js
+++ b/packages/react-aria-components/test/RadioGroup.test.js
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {fireEvent, render} from '@react-spectrum/test-utils';
-import {Label, Radio, RadioGroup, RadioGroupContext, Text} from '../';
+import {act, fireEvent, render} from '@react-spectrum/test-utils';
+import {FormError, Label, Radio, RadioGroup, RadioGroupContext, Text} from '../';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
@@ -276,4 +276,25 @@ describe('RadioGroup', () => {
     expect(radio).toHaveAttribute('aria-describedby');
     expect(radio.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Error Description');
   });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <RadioGroup isRequired>
+          <Label>Test</Label>
+          <Radio value="a">A</Radio>
+          <FormError />
+        </RadioGroup>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let group = getByRole('radiogroup');
+    expect(group).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(group).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/SearchField.test.js b/packages/react-aria-components/test/SearchField.test.js
index cf9819a03e4..043ac016b1c 100644
--- a/packages/react-aria-components/test/SearchField.test.js
+++ b/packages/react-aria-components/test/SearchField.test.js
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Input, Label, SearchField, SearchFieldContext, Text} from '../';
+import {act, render} from '@react-spectrum/test-utils';
+import {Button, FormError, Input, Label, SearchField, SearchFieldContext, Text} from '../';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 
 let TestSearchField = (props) => (
   <SearchField defaultValue="test" data-foo="bar" {...props}>
@@ -40,7 +40,7 @@ describe('SearchField', () => {
 
     expect(input).toHaveAttribute('aria-describedby');
     expect(input.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Description Error');
-  
+
     let button = getByRole('button');
     expect(button).toHaveAttribute('aria-label', 'Clear search');
   });
@@ -75,4 +75,25 @@ describe('SearchField', () => {
     let description = document.getElementById(searchbox.getAttribute('aria-describedby'));
     expect(description).toHaveTextContent('You are looking for "test"');
   });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <SearchField isRequired>
+          <Label>Test</Label>
+          <Input />
+          <FormError />
+        </SearchField>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('searchbox');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/Select.test.js b/packages/react-aria-components/test/Select.test.js
index 2b0ba9e6e8d..63126c7e088 100644
--- a/packages/react-aria-components/test/Select.test.js
+++ b/packages/react-aria-components/test/Select.test.js
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Item, Label, ListBox, Popover, Select, SelectContext, SelectValue, Text} from '../';
+import {act, render, within} from '@react-spectrum/test-utils';
+import {Button, FormError, Item, Label, ListBox, Popover, Select, SelectContext, SelectValue, Text} from '../';
 import React from 'react';
-import {render, within} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 let TestSelect = (props) => (
@@ -177,4 +177,34 @@ describe('Select', () => {
     userEvent.click(button);
     expect(button).toHaveTextContent('close');
   });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <Select isRequired>
+          <Label>Favorite Animal</Label>
+          <Button>
+            <SelectValue />
+          </Button>
+          <FormError />
+          <Popover>
+            <ListBox>
+              <Item>Cat</Item>
+              <Item>Dog</Item>
+              <Item>Kangaroo</Item>
+            </ListBox>
+          </Popover>
+        </Select>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let button = getByRole('button');
+    expect(button).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(button).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(button.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/TextField.test.js b/packages/react-aria-components/test/TextField.test.js
index b416509fbeb..4d607665cfa 100644
--- a/packages/react-aria-components/test/TextField.test.js
+++ b/packages/react-aria-components/test/TextField.test.js
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Input, Label, Text, TextField, TextFieldContext} from '../';
+import {act, render} from '@react-spectrum/test-utils';
+import {FormError, Input, Label, Text, TextField, TextFieldContext} from '../';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
 
 let TestTextField = (props) => (
@@ -87,4 +87,25 @@ describe('TextField', () => {
     expect(input).not.toHaveAttribute('data-focus-visible');
     expect(input).not.toHaveClass('focus');
   });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <TextField isRequired>
+          <Label>Test</Label>
+          <Input />
+          <FormError />
+        </TextField>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('textbox');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });
diff --git a/packages/react-aria-components/test/TimeField.test.js b/packages/react-aria-components/test/TimeField.test.js
index d9479e58314..429aff31d38 100644
--- a/packages/react-aria-components/test/TimeField.test.js
+++ b/packages/react-aria-components/test/TimeField.test.js
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {DateInput, DateSegment, Label, Text, TimeField, TimeFieldContext} from '../';
+import {act, render} from '@react-spectrum/test-utils';
+import {DateInput, DateSegment, FormError, Label, Text, TimeField, TimeFieldContext} from '../';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import {Time} from '@internationalized/date';
 
 describe('TimeField', () => {
@@ -103,4 +103,40 @@ describe('TimeField', () => {
     let group = getByRole('group');
     expect(group).toHaveAttribute('data-validation-state', 'invalid');
   });
+
+  it('should support form value', () => {
+    render(
+      <TimeField name="time" value={new Time(8, 30)}>
+        <Label>Time</Label>
+        <DateInput>
+          {segment => <DateSegment segment={segment} />}
+        </DateInput>
+      </TimeField>
+    );
+    let input = document.querySelector('input[name=time]');
+    expect(input).toHaveValue('08:30:00');
+  });
+
+  it('should support FormError', () => {
+    let {getByRole} = render(
+      <form aria-label="Form">
+        <TimeField isRequired>
+          <Label>Birth date</Label>
+          <DateInput>
+            {segment => <DateSegment segment={segment} />}
+          </DateInput>
+          <FormError />
+        </TimeField>
+      </form>
+    );
+
+    let form = getByRole('form');
+    let input = getByRole('group');
+    expect(input).not.toHaveAttribute('aria-describedby');
+
+    act(() => {form.checkValidity();});
+
+    expect(input).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+  });
 });