diff --git a/packages/react-aria-components/test/Select.test.js b/packages/react-aria-components/test/Select.test.js
index df4906037d2..a14bfb2cbce 100644
--- a/packages/react-aria-components/test/Select.test.js
+++ b/packages/react-aria-components/test/Select.test.js
@@ -95,6 +95,112 @@ describe('Select', () => {
     expect(trigger).toHaveTextContent('Dog');
   });
 
+  it('should bubble a change event from the hidden select when a ListBox option is selected', async () => {
+    let onChange = jest.fn();
+    let {getByTestId} = render(
+      <form onChange={e => onChange(e.target)}>
+        <TestSelect name="animal" />
+      </form>
+    );
+    let wrapper = getByTestId('select');
+    let selectTester = testUtilUser.createTester('Select', {root: wrapper});
+    let hiddenSelect = document.querySelector('select[name="animal"]');
+
+    await selectTester.toggleOptionSelection({option: 'Dog'});
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(hiddenSelect);
+    expect(hiddenSelect).toHaveValue('dog');
+  });
+
+  it('should bubble a native change event from the hidden select only once', async () => {
+    let onChange = jest.fn();
+    render(
+      <form onChange={e => onChange(e.target)}>
+        <TestSelect name="animal" />
+      </form>
+    );
+    let hiddenSelect = document.querySelector('select[name="animal"]');
+
+    await user.selectOptions(hiddenSelect, 'dog');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(hiddenSelect);
+    expect(hiddenSelect).toHaveValue('dog');
+  });
+
+  it('should bubble a change event for a controlled select', async () => {
+    let onChange = jest.fn();
+    let values = [];
+
+    function ControlledSelect() {
+      let [value, setValue] = useState('cat');
+      return (
+        <TestSelect
+          name="animal"
+          value={value}
+          onChange={value => {
+            onChange(value);
+            setValue(value);
+          }}
+        />
+      );
+    }
+
+    let {getByTestId} = render(
+      <form onChange={e => values.push(e.target.value)}>
+        <ControlledSelect />
+      </form>
+    );
+    let wrapper = getByTestId('select');
+    let selectTester = testUtilUser.createTester('Select', {root: wrapper});
+    let hiddenSelect = document.querySelector('select[name="animal"]');
+
+    await selectTester.toggleOptionSelection({option: 'Dog'});
+
+    expect(onChange).toHaveBeenCalledWith('dog');
+    expect(values).toEqual(['dog']);
+    expect(hiddenSelect).toHaveValue('dog');
+  });
+
+  it('should not bubble a change event when the form is reset', async () => {
+    let onChange = jest.fn();
+    let formRef = React.createRef();
+    let {getByTestId} = render(
+      <form ref={formRef} onChange={onChange}>
+        <TestSelect name="animal" defaultValue="cat" />
+      </form>
+    );
+    let wrapper = getByTestId('select');
+    let selectTester = testUtilUser.createTester('Select', {root: wrapper});
+    let hiddenSelect = document.querySelector('select[name="animal"]');
+
+    await selectTester.toggleOptionSelection({option: 'Dog'});
+    expect(onChange).toHaveBeenCalledTimes(1);
+    onChange.mockClear();
+
+    act(() => formRef.current.reset());
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(hiddenSelect).toHaveValue('cat');
+  });
+
+  it('should bubble change events with the selected options for multiple selection', async () => {
+    let values = [];
+    let {getByTestId} = render(
+      <form onChange={e => values.push([...e.target.selectedOptions].map(option => option.value))}>
+        <TestSelect name="animal" selectionMode="multiple" />
+      </form>
+    );
+    let wrapper = getByTestId('select');
+    let selectTester = testUtilUser.createTester('Select', {root: wrapper});
+
+    await selectTester.toggleOptionSelection({option: 'Cat'});
+    await selectTester.toggleOptionSelection({option: 'Dog'});
+
+    expect(values).toEqual([['cat'], ['cat', 'dog']]);
+  });
+
   it('should support slot', () => {
     let {getByTestId} = render(
       <SelectContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
@@ -748,12 +854,16 @@ describe('Select', () => {
 
   it('should support multiple selection form integration with many items', async () => {
     let items = [];
+    let values = [];
     for (let i = 0; i < 320; i++) {
       items.push({id: i, name: 'item' + i});
     }
 
     let {getByTestId} = render(
-      <Form data-testid="form" onSubmit={e => e.preventDefault()}>
+      <Form
+        data-testid="form"
+        onChange={e => values.push([...e.target.selectedOptions].map(option => option.value))}
+        onSubmit={e => e.preventDefault()}>
         <Select data-testid="select" name="select" selectionMode="multiple" isRequired>
           <Label>Select</Label>
           <Button>
@@ -788,6 +898,7 @@ describe('Select', () => {
     await user.click(options[1]);
     await selectTester.close();
     expect(trigger).toHaveTextContent('item0 and item1');
+    expect(values).toEqual([['0'], ['0', '1']]);
 
     let formData = new FormData(getByTestId('form'));
     expect(formData.getAll('select')).toEqual(['0', '1']);
diff --git a/packages/react-aria/src/select/HiddenSelect.tsx b/packages/react-aria/src/select/HiddenSelect.tsx
index fee8d126111..3b63be0cd83 100644
--- a/packages/react-aria/src/select/HiddenSelect.tsx
+++ b/packages/react-aria/src/select/HiddenSelect.tsx
@@ -12,7 +12,7 @@
 
 import {FocusableElement, Key, RefObject} from '@react-types/shared';
 import {getEventTarget} from '../utils/shadowdom/DOMFunctions';
-import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';
+import React, {JSX, ReactNode, useCallback, useEffect, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectionMode, SelectState} from 'react-stately/useSelectState';
 import {useFormReset} from '../utils/useFormReset';
@@ -103,18 +103,70 @@ export function useHiddenSelect<T, M extends SelectionMode = 'single'>(
   );
 
   let setValue = state.setValue;
+  let subscribeToValueChange = state.subscribeToValueChange;
+  let isDispatchingChange = useRef(false);
   let onChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
+      if (isDispatchingChange.current) {
+        return;
+      }
+
       let eventTarget = getEventTarget(e);
+      let value: string | string[];
       if (eventTarget.multiple) {
-        setValue(Array.from(eventTarget.selectedOptions, option => option.value) as any);
+        value = Array.from(eventTarget.selectedOptions, option => option.value);
       } else {
-        setValue(e.currentTarget.value as any);
+        value = e.currentTarget.value;
       }
+
+      setValue(value as any);
     },
     [setValue]
   );
 
+  useEffect(() => {
+    return subscribeToValueChange(value => {
+      let select = props.selectRef?.current;
+      if (!(select instanceof HTMLSelectElement)) {
+        return;
+      }
+
+      let values = (Array.isArray(value) ? value : [value]).map(value => String(value ?? ''));
+      let temporaryOptions: HTMLOptionElement[] = [];
+      for (let value of values) {
+        if (![...select.options].some(option => option.value === value)) {
+          let option = select.ownerDocument.createElement('option');
+          option.value = value;
+          select.add(option);
+          temporaryOptions.push(option);
+        }
+      }
+
+      if (select.multiple) {
+        let selectedValues = new Set(values);
+        for (let option of select.options) {
+          option.selected = selectedValues.has(option.value);
+        }
+      } else {
+        let valueSetter = Object.getOwnPropertyDescriptor(
+          Object.getPrototypeOf(select),
+          'value'
+        )?.set;
+        valueSetter?.call(select, values[0] ?? '');
+      }
+
+      isDispatchingChange.current = true;
+      try {
+        select.dispatchEvent(new Event('change', {bubbles: true}));
+      } finally {
+        for (let option of temporaryOptions) {
+          option.remove();
+        }
+        isDispatchingChange.current = false;
+      }
+    });
+  }, [props.selectRef, subscribeToValueChange]);
+
   // 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.
@@ -155,91 +207,41 @@ export function useHiddenSelect<T, M extends SelectionMode = 'single'>(
 export function HiddenSelect<T, M extends SelectionMode = 'single'>(
   props: HiddenSelectProps<T, M>
 ): JSX.Element | null {
-  let {state, triggerRef, label, name, form, isDisabled} = props;
+  let {state, triggerRef, label, name} = props;
   let selectRef = useRef(null);
-  let inputRef = useRef(null);
-  let {containerProps, selectProps} = useHiddenSelect(
-    {...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef},
-    state,
-    triggerRef
-  );
+  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);
 
   let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
 
-  // 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
-  // autofill will work. Otherwise, use an <input type="hidden">.
-  if (state.collection.size <= 300) {
-    return (
-      <div {...containerProps} data-testid="hidden-select-container">
-        <label>
-          {label}
-          <select {...selectProps} ref={selectRef}>
-            <option value="" label={'\u00A0'}>
-              {'\u00A0'}
-            </option>
-            {[...state.collection.getKeys()].map(key => {
-              let item = state.collection.getItem(key);
-              if (item && item.type === 'item') {
-                return (
-                  <option key={item.key} value={item.key}>
-                    {item.textValue}
-                  </option>
-                );
-              }
-            })}
-            {/* The collection may be empty during the initial render. */}
-            {/* Rendering options for the current values ensures the select has a value immediately, */}
-            {/* making FormData reads consistent. */}
-            {state.collection.size === 0 &&
-              name &&
-              values.map((value, i) => <option key={i} value={value ?? ''} />)}
-          </select>
-        </label>
-      </div>
-    );
-  } else if (name) {
-    let data = selectData.get(state) || {};
-    let {validationBehavior} = data;
-
-    // Always render at least one hidden input to ensure required form submission.
-    if (values.length === 0) {
-      values = [null];
-    }
-
-    let res = values.map((value, i) => {
-      let inputProps: InputHTMLAttributes<HTMLInputElement> = {
-        type: 'hidden',
-        autoComplete: selectProps.autoComplete,
-        name,
-        form,
-        disabled: isDisabled,
-        value: value ?? ''
-      };
-
-      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.
-        return (
-          <input
-            key={i}
-            {...inputProps}
-            ref={i === 0 ? inputRef : null}
-            style={{display: 'none'}}
-            type="text"
-            required={i === 0 ? selectProps.required : false}
-            onChange={() => {
-              /** Ignore react warning. */
-            }}
-          />
-        );
-      }
-
-      return <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />;
-    });
-
-    return <>{res}</>;
-  }
-
-  return null;
+  return (
+    <div {...containerProps} data-testid="hidden-select-container">
+      <label>
+        {label}
+        <select {...selectProps} ref={selectRef}>
+          <option value="" label={'\u00A0'}>
+            {'\u00A0'}
+          </option>
+          {/* Avoid rendering a large native select while preserving form and change event semantics. */}
+          {state.collection.size <= 300
+            ? [...state.collection.getKeys()].map(key => {
+                let item = state.collection.getItem(key);
+                if (item && item.type === 'item') {
+                  return (
+                    <option key={item.key} value={item.key}>
+                      {item.textValue}
+                    </option>
+                  );
+                }
+              })
+            : values.map((value, i) => (value != null ? <option key={i} value={value} /> : null))}
+          {/* The collection may be empty during the initial render. */}
+          {/* Rendering options for the current values ensures the select has a value immediately, */}
+          {/* making FormData reads consistent. */}
+          {state.collection.size === 0 &&
+            name &&
+            values.map((value, i) => <option key={i} value={value ?? ''} />)}
+        </select>
+      </label>
+    </div>
+  );
 }
diff --git a/packages/react-aria/test/select/HiddenSelect.test.tsx b/packages/react-aria/test/select/HiddenSelect.test.tsx
index 72738c25bcb..fb22237fd78 100644
--- a/packages/react-aria/test/select/HiddenSelect.test.tsx
+++ b/packages/react-aria/test/select/HiddenSelect.test.tsx
@@ -57,6 +57,23 @@ describe('<HiddenSelect />', () => {
     );
   });
 
+  it('should only render selected options for collection.size > 300', () => {
+    render(
+      <HiddenSelectExample
+        label="select"
+        value={5}
+        hiddenProps={{
+          name: 'select'
+        }}
+        items={makeItems(400)}
+      />
+    );
+
+    let select = screen.getByLabelText('select') as HTMLSelectElement;
+    expect(select).toHaveValue('5');
+    expect(select.options).toHaveLength(2);
+  });
+
   it('should have form value after initial render', async () => {
     let formRef = React.createRef<HTMLFormElement>();
     render(
diff --git a/packages/react-stately/src/select/useSelectState.ts b/packages/react-stately/src/select/useSelectState.ts
index 417189dfb91..1966d072d19 100644
--- a/packages/react-stately/src/select/useSelectState.ts
+++ b/packages/react-stately/src/select/useSelectState.ts
@@ -28,8 +28,8 @@ import {
 import {FormValidationState, useFormValidationState} from '../form/useFormValidationState';
 import {ListState, useListState} from '../list/useListState';
 import {OverlayTriggerState, useOverlayTriggerState} from '../overlays/useOverlayTriggerState';
+import {useCallback, useMemo, useRef, useState} from 'react';
 import {useControlledState} from '../utils/useControlledState';
-import {useMemo, useState} from 'react';
 
 export type SelectionMode = 'single' | 'multiple';
 export type ValueType<M extends SelectionMode> = M extends 'single' ? Key | null : readonly Key[];
@@ -120,6 +120,9 @@ export interface SelectState<T, M extends SelectionMode = 'single'>
   /** Sets the select value. */
   setValue(value: Key | readonly Key[] | null): void;
 
+  /** Registers a listener that is called when the user changes the select value. */
+  subscribeToValueChange(listener: (value: ChangeValueType<M>) => void): () => void;
+
   /**
    * The value of the first selected item.
    *
@@ -177,6 +180,16 @@ export function useSelectState<T, M extends SelectionMode = 'single'>(
     selectionMode === 'single' && Array.isArray(controlledValue)
       ? controlledValue[0]
       : controlledValue;
+  let valueChangeListeners = useRef(new Set<(value: ChangeValueType<M>) => void>());
+  let subscribeToValueChange = useCallback((listener: (value: ChangeValueType<M>) => void) => {
+    valueChangeListeners.current.add(listener);
+    return () => valueChangeListeners.current.delete(listener);
+  }, []);
+  let emitValueChange = useCallback((value: ChangeValueType<M>) => {
+    for (let listener of valueChangeListeners.current) {
+      listener(value);
+    }
+  }, []);
   let setValue = (value: Key | Key[] | null) => {
     if (selectionMode === 'single') {
       let key = Array.isArray(value) ? (value[0] ?? null) : value;
@@ -212,8 +225,11 @@ export function useSelectState<T, M extends SelectionMode = 'single'>(
       if (selectionMode === 'single') {
         let key = keys.values().next().value ?? null;
         setValue(key);
+        emitValueChange(key as ChangeValueType<M>);
       } else {
-        setValue([...keys]);
+        let value = [...keys];
+        setValue(value);
+        emitValueChange(value as ChangeValueType<M>);
       }
       if (shouldCloseOnSelect) {
         triggerState.close();
@@ -245,6 +261,7 @@ export function useSelectState<T, M extends SelectionMode = 'single'>(
     value: displayValue as ValueType<M>,
     defaultValue: defaultValue ?? (initialValue as ValueType<M>),
     setValue,
+    subscribeToValueChange,
     selectedKey,
     setSelectedKey: setValue,
     selectedItem: selectedItems[0] ?? null,