From 8ae7cab54d847d3670b900c9a8f5080fb602e421 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 7 Aug 2025 11:11:46 -0700
Subject: [PATCH 1/9] readd placeholder support to S2 components

---
 .storybook-s2/docs/Migrating.jsx              |  5 ----
 .../@react-spectrum/s2/src/ColorField.tsx     |  6 ++++-
 packages/@react-spectrum/s2/src/ComboBox.tsx  |  6 ++++-
 .../@react-spectrum/s2/src/NumberField.tsx    |  6 ++++-
 .../@react-spectrum/s2/src/SearchField.tsx    |  6 ++++-
 packages/@react-spectrum/s2/src/TextField.tsx | 11 +++++---
 packages/dev/codemods/src/s1-to-s2/UPGRADE.md |  5 ----
 .../__snapshots__/colorfield.test.ts.snap     |  6 -----
 .../__snapshots__/combobox.test.ts.snap       | 25 -------------------
 .../__snapshots__/searchfield.test.ts.snap    | 13 ----------
 .../__snapshots__/textarea.test.ts.snap       | 13 ----------
 .../__snapshots__/textfield.test.ts.snap      | 13 ----------
 .../src/s1-to-s2/__tests__/colorfield.test.ts |  6 -----
 .../src/s1-to-s2/__tests__/combobox.test.ts   | 24 ------------------
 .../s1-to-s2/__tests__/searchfield.test.ts    | 12 ---------
 .../src/s1-to-s2/__tests__/textarea.test.ts   | 12 ---------
 .../src/s1-to-s2/__tests__/textfield.test.ts  | 12 ---------
 .../components/ColorField/transform.ts        |  4 ---
 .../codemods/components/ComboBox/transform.ts |  4 ---
 .../components/SearchField/transform.ts       |  4 ---
 .../codemods/components/TextArea/transform.ts |  4 ---
 .../components/TextField/transform.ts         |  4 ---
 22 files changed, 28 insertions(+), 173 deletions(-)

diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx
index f819f96d16e..c6845f6d924 100644
--- a/.storybook-s2/docs/Migrating.jsx
+++ b/.storybook-s2/docs/Migrating.jsx
@@ -133,7 +133,6 @@ export function Migrating() {
         <H3>ColorField</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
-          <li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it has been removed due to accessibility issues)</li>
           <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
         </ul>
@@ -155,7 +154,6 @@ export function Migrating() {
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Change <Code>menuWidth</Code> value from a <Code>DimensionValue</Code> to a pixel value</li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
-          <li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
@@ -338,7 +336,6 @@ export function Migrating() {
 
         <H3>SearchField</H3>
         <ul className="sb-unstyled">
-          <li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it has been removed due to accessibility issues)</li>
           <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out icon (it has not been implemented yet)</li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
@@ -405,7 +402,6 @@ export function Migrating() {
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>icon</Code> (it has not been implemented yet)</li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
-          <li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code>  (it has been removed due to accessibility issues)</li>
           <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
         </ul>
@@ -414,7 +410,6 @@ export function Migrating() {
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>icon</Code> (it has not been implemented yet)</li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
-          <li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code>  (it has been removed due to accessibility issues)</li>
           <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
         </ul>
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index 9ac1b4fe4fc..928c9a808a8 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -31,7 +31,11 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * Temporary text that occupies the text input when it is empty.
+   */
+  placeholder?: string
 }
 
 export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index f2ebd0b2526..ce8c742d440 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -101,7 +101,11 @@ export interface ComboBoxProps<T extends object> extends
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
     menuWidth?: number,
     /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */
-    loadingState?: LoadingState
+    loadingState?: LoadingState,
+    /**
+     * Temporary text that occupies the text input when it is empty.
+     */
+    placeholder?: string
 }
 
 export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index c0c3cff832e..df53633c492 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -51,7 +51,11 @@ export interface NumberFieldProps extends
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * Temporary text that occupies the text input when it is empty.
+   */
+  placeholder?: string
 }
 
 export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 1aa890b45e2..5b15618a34a 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -37,7 +37,11 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * Temporary text that occupies the text input when it is empty.
+   */
+  placeholder?: string
 }
 
 export const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index ec8fe36dadc..6c0dfa3b822 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -38,7 +38,12 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  // TODO: put warning about needing to provide this for cases where the text field is not focused and doesn't have text
+  /**
+   * Temporary text that occupies the text input when it is empty.
+   */
+  placeholder?: string
 }
 
 export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
@@ -159,7 +164,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
 
 function TextAreaInput() {
   // Force re-render when value changes so we update the height.
-  useSlottedContext(AriaTextAreaContext) ?? {};
+  let {placeholder} = useSlottedContext(AriaTextAreaContext) ?? {};
   let onHeightChange = (input: HTMLTextAreaElement) => {
     // TODO: only do this if an explicit height is not given?
     if (input) {
@@ -186,7 +191,7 @@ function TextAreaInput() {
       ref={onHeightChange}
       // Workaround for baseline alignment bug in Safari.
       // https://bugs.webkit.org/show_bug.cgi?id=142968
-      placeholder=" "
+      placeholder={placeholder ?? ' '}
       className={style({
         paddingX: 0,
         paddingY: centerPadding(),
diff --git a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
index 362b916d7bf..56156f54447 100644
--- a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
+++ b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
@@ -49,7 +49,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
 
 ## ColorField
 - Remove `isQuiet` (it is no longer supported)
-- Remove `placeholder` (it has been removed for accessibility reasons)
 - Change `validationState=“invalid”` to `isInvalid`
 - Remove `validationState=“valid”` (it is no longer supported)
 
@@ -59,7 +58,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
 - Change `menuWidth` value from a `DimensionValue` to a pixel value
 - Remove `isQuiet` (it is no longer supported)
 - [PENDING] Comment out `loadingState` (it has not been implemented yet)
-- Remove `placeholder` (it is no longer supported)
 - Change `validationState=“invalid”` to `isInvalid`
 - Remove `validationState=“valid”` (it is no longer supported)
 - [PENDING] Comment out `onLoadMore` (it has not been implemented yet)
@@ -134,7 +132,6 @@ Note that `[PENDING]` indicates that future changes will occur before the final
 - Remove `showErrorIcon` (it has been removed for accessibility reasons)
 
 ## SearchField
-- Remove `placeholder` (it has been removed for accessibility reasons)
 - [PENDING] Comment out icon (it has not been implemented yet)
 - Remove `isQuiet` (it is no longer supported)
 - Change `validationState=“invalid”` to `isInvalid`
@@ -169,14 +166,12 @@ Note that `[PENDING]` indicates that future changes will occur before the final
 ## TextArea
 - [PENDING] Comment out `icon` (it has not been implemented yet)
 - Remove `isQuiet` (it is no longer supported)
-- Remove `placeholder`  (it has been removed for accessibility reasons)
 - Change `validationState=“invalid”` to `isInvalid`
 - Remove `validationState=“valid”` (it is no longer supported)
 
 ## TextField
 - [PENDING] Comment out `icon` (it has not been implemented yet)
 - Remove `isQuiet` (it is no longer supported)
-- Remove `placeholder`  (it has been removed for accessibility reasons)
 - Change `validationState=“invalid”` to `isInvalid`
 - Remove `validationState=“valid”` (it is no longer supported)
 
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap
index 80aa4da0c2f..aaac132d311 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/colorfield.test.ts.snap
@@ -6,12 +6,6 @@ exports[`Removes isQuiet 1`] = `
 <ColorField label="Primary Color" />"
 `;
 
-exports[`Removes placeholder 1`] = `
-"import { ColorField } from "@react-spectrum/s2";
-
-<ColorField label="Primary Color" />"
-`;
-
 exports[`changes validationState to isInvalid or nothing 1`] = `
 "import { ColorField } from "@react-spectrum/s2";
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
index e5643e6ec7a..4d74b2d5c4b 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap
@@ -89,31 +89,6 @@ let props = {isQuiet: true};
 </div>"
 `;
 
-exports[`Removes placeholder 1`] = `
-"import { ComboBoxItem, ComboBox } from "@react-spectrum/s2";
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <ComboBox>
-    <ComboBoxItem>Red Panda</ComboBoxItem>
-    <ComboBoxItem>Cat</ComboBoxItem>
-  </ComboBox>
-  <ComboBox>
-    <ComboBoxItem>Red Panda</ComboBoxItem>
-    <ComboBoxItem>Cat</ComboBoxItem>
-  </ComboBox>
-  <ComboBox>
-    <ComboBoxItem>Red Panda</ComboBoxItem>
-    <ComboBoxItem>Cat</ComboBoxItem>
-  </ComboBox>
-  <ComboBox // TODO(S2-upgrade): check this spread for style props
-  {...props}>
-    <ComboBoxItem>Red Panda</ComboBoxItem>
-    <ComboBoxItem>Cat</ComboBoxItem>
-  </ComboBox>
-</div>"
-`;
-
 exports[`Static - Converts menuWidth to px value 1`] = `
 "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2";
 let menuWidth = 'size-10';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/searchfield.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/searchfield.test.ts.snap
index 72788410f8b..72c6c88a278 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/searchfield.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/searchfield.test.ts.snap
@@ -15,19 +15,6 @@ let props = {isQuiet: true};
 </div>"
 `;
 
-exports[`Removes placeholder 1`] = `
-"import { SearchField } from "@react-spectrum/s2";
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <SearchField />
-  <SearchField />
-  <SearchField />
-  <SearchField // TODO(S2-upgrade): check this spread for style props
-  {...props} />
-</div>"
-`;
-
 exports[`changes validationState to isInvalid or nothing 1`] = `
 "import { SearchField } from "@react-spectrum/s2";
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textarea.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textarea.test.ts.snap
index bb68974716b..c06a6cb3e13 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textarea.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textarea.test.ts.snap
@@ -15,19 +15,6 @@ let props = {isQuiet: true};
 </div>"
 `;
 
-exports[`Removes placeholder 1`] = `
-"import { TextArea } from "@react-spectrum/s2";
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <TextArea />
-  <TextArea />
-  <TextArea />
-  <TextArea // TODO(S2-upgrade): check this spread for style props
-  {...props} />
-</div>"
-`;
-
 exports[`changes validationState to isInvalid or nothing 1`] = `
 "import { TextArea } from "@react-spectrum/s2";
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textfield.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textfield.test.ts.snap
index 29afde57ff1..3d581560410 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textfield.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/textfield.test.ts.snap
@@ -15,19 +15,6 @@ let props = {isQuiet: true};
 </div>"
 `;
 
-exports[`Removes placeholder 1`] = `
-"import { TextField } from "@react-spectrum/s2";
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <TextField />
-  <TextField />
-  <TextField />
-  <TextField // TODO(S2-upgrade): check this spread for style props
-  {...props} />
-</div>"
-`;
-
 exports[`changes validationState to isInvalid or nothing 1`] = `
 "import { TextField } from "@react-spectrum/s2";
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/colorfield.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/colorfield.test.ts
index 554baeafacc..682acd61562 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/colorfield.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/colorfield.test.ts
@@ -12,12 +12,6 @@ import {ColorField} from '@adobe/react-spectrum';
 <ColorField label="Primary Color" isQuiet />
 `);
 
-test('Removes placeholder', `
-import {ColorField} from '@adobe/react-spectrum';
-
-<ColorField label="Primary Color" placeholder="Color" />
-`);
-
 test('changes validationState to isInvalid or nothing', `
 import {ColorField} from '@adobe/react-spectrum';
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts
index 33a79aceac7..7ead77212fd 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts
@@ -166,30 +166,6 @@ let props = {isQuiet: true};
 </div>
 `);
 
-test('Removes placeholder', `
-import {ComboBox, Item} from '@adobe/react-spectrum';
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <ComboBox placeholder="is this actually removed?">
-    <Item>Red Panda</Item>
-    <Item>Cat</Item>
-  </ComboBox>
-  <ComboBox placeholder={"is this actually removed?"}>
-    <Item>Red Panda</Item>
-    <Item>Cat</Item>
-  </ComboBox>
-  <ComboBox placeholder={placeholder}>
-    <Item>Red Panda</Item>
-    <Item>Cat</Item>
-  </ComboBox>
-  <ComboBox {...props}>
-    <Item>Red Panda</Item>
-    <Item>Cat</Item>
-  </ComboBox>
-</div>
-`);
-
 test('changes validationState to isInvalid or nothing', `
 import {ComboBox, Item} from '@adobe/react-spectrum';
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/searchfield.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/searchfield.test.ts
index fb7a654b5de..953e441157a 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/searchfield.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/searchfield.test.ts
@@ -6,18 +6,6 @@ const test = (name: string, input: string) => {
   defineSnapshotTest(transform, {}, input, name);
 };
 
-test('Removes placeholder', `
-import {SearchField} from '@adobe/react-spectrum';
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <SearchField placeholder="is this actually removed?" />
-  <SearchField placeholder={"is this actually removed?"} />
-  <SearchField placeholder={placeholder} />
-  <SearchField {...props} />
-</div>
-`);
-
 test('Removes isQuiet', `
 import {SearchField} from '@adobe/react-spectrum';
 let isQuiet = true;
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/textarea.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/textarea.test.ts
index 4fc130cbe3b..0d6b96d014a 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/textarea.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/textarea.test.ts
@@ -20,18 +20,6 @@ let props = {isQuiet: true};
 </div>
 `);
 
-test('Removes placeholder', `
-import {TextArea} from '@adobe/react-spectrum';
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <TextArea placeholder="is this actually removed?" />
-  <TextArea placeholder={"is this actually removed?"} />
-  <TextArea placeholder={placeholder} />
-  <TextArea {...props} />
-</div>
-`);
-
 test('changes validationState to isInvalid or nothing', `
 import {TextArea} from '@adobe/react-spectrum';
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/textfield.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/textfield.test.ts
index fa09bfb60b8..0e32c463947 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/textfield.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/textfield.test.ts
@@ -20,18 +20,6 @@ let props = {isQuiet: true};
 </div>
 `);
 
-test('Removes placeholder', `
-import {TextField} from '@adobe/react-spectrum';
-let placeholder = 'is this actually removed?';
-let props = {placeholder: 'is this actually removed?'};
-<div>
-  <TextField placeholder="is this actually removed?" />
-  <TextField placeholder={"is this actually removed?"} />
-  <TextField placeholder={placeholder} />
-  <TextField {...props} />
-</div>
-`);
-
 test('changes validationState to isInvalid or nothing', `
 import {TextField} from '@adobe/react-spectrum';
 let validationState = 'invalid';
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts
index 62b48a40fd6..39df0d26497 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts
@@ -5,7 +5,6 @@ import * as t from '@babel/types';
 /**
  * Transforms ColorField:
  * - Remove isQuiet (it is no longer supported in Spectrum 2).
- * - Remove placeholder (it has been removed due to accessibility issues).
  * - Change validationState="invalid" to isInvalid.
  * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
  */
@@ -13,9 +12,6 @@ export default function transformColorField(path: NodePath<t.JSXElement>): void
   // Remove isQuiet
   removeProp(path, {propName: 'isQuiet'});
 
-  // Remove placeholder
-  removeProp(path, {propName: 'placeholder'});
-
   // Change validationState="invalid" to isInvalid
   updatePropNameAndValue(path, {
     oldPropName: 'validationState',
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts
index 740e931091d..8b31a30c598 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts
@@ -10,7 +10,6 @@ import * as t from '@babel/types';
  * Transforms ComboBox:
  * - Change menuWidth value from a DimensionValue to a pixel value.
  * - Remove isQuiet (it is no longer supported in Spectrum 2).
- * - Remove placeholder (it is no longer supported in Spectrum 2).
  * - Change validationState="invalid" to isInvalid.
  * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
  */
@@ -21,9 +20,6 @@ export default function transformComboBox(path: NodePath<t.JSXElement>): void {
   // Remove isQuiet
   removeProp(path, {propName: 'isQuiet'});
 
-  // Remove placeholder
-  removeProp(path, {propName: 'placeholder'});
-
   // Change validationState="invalid" to isInvalid
   updatePropNameAndValue(path, {
     oldPropName: 'validationState',
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts
index 23765933cf2..b1a5948f31e 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts
@@ -4,16 +4,12 @@ import * as t from '@babel/types';
 
 /**
  * Transforms SearchField:
- * - Remove placeholder (it has been removed due to accessibility issues).
  * - Comment out icon (it has not been implemented yet).
  * - Remove isQuiet (it is no longer supported in Spectrum 2).
  * - Change validationState="invalid" to isInvalid.
  * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
  */
 export default function transformSearchField(path: NodePath<t.JSXElement>): void {
-  // Remove placeholder
-  removeProp(path, {propName: 'placeholder'});
-
   // Comment out icon
   commentOutProp(path, {propName: 'icon'});
 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts
index 80b1b6b1e1e..195cf5631f0 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts
@@ -6,7 +6,6 @@ import * as t from '@babel/types';
  * Transforms TextArea:
  * - Comment out icon (it has not been implemented yet).
  * - Remove isQuiet (it is no longer supported in Spectrum 2).
- * - Remove placeholder (it has been removed due to accessibility issues).
  * - Change validationState="invalid" to isInvalid.
  * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
  */
@@ -17,9 +16,6 @@ export default function transformTextArea(path: NodePath<t.JSXElement>): void {
   // Remove isQuiet
   removeProp(path, {propName: 'isQuiet'});
 
-  // Remove placeholder
-  removeProp(path, {propName: 'placeholder'});
-
   // Change validationState="invalid" to isInvalid
   updatePropNameAndValue(path, {
     oldPropName: 'validationState',
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts
index ee4dd729625..cd7b443d46d 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts
@@ -6,7 +6,6 @@ import * as t from '@babel/types';
  * Transforms TextField:
  * - Comment out icon (it has not been implemented yet).
  * - Remove isQuiet (it is no longer supported in Spectrum 2).
- * - Remove placeholder (it has been removed due to accessibility issues).
  * - Change validationState="invalid" to isInvalid.
  * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
  */
@@ -17,9 +16,6 @@ export default function transformTextField(path: NodePath<t.JSXElement>): void {
   // Remove isQuiet
   removeProp(path, {propName: 'isQuiet'});
 
-  // Remove placeholder
-  removeProp(path, {propName: 'placeholder'});
-
   // Change validationState="invalid" to isInvalid
   updatePropNameAndValue(path, {
     oldPropName: 'validationState',

From 2dfdb41560311b6ff0adb98eec0c7122d54eb583 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 7 Aug 2025 17:26:05 -0700
Subject: [PATCH 2/9] progress

---
 eslint.config.mjs                             | 25 +---------------
 .../@react-spectrum/s2/src/ColorField.tsx     |  3 ++
 packages/@react-spectrum/s2/src/ComboBox.tsx  |  2 ++
 .../@react-spectrum/s2/src/NumberField.tsx    |  2 ++
 .../@react-spectrum/s2/src/SearchField.tsx    |  3 ++
 packages/@react-spectrum/s2/src/TextField.tsx |  9 ++++--
 .../s2/src/placeholder-utils.tsx              | 30 +++++++++++++++++++
 .../s2/stories/ColorField.stories.tsx         |  3 +-
 .../s2/stories/TextField.stories.tsx          |  3 +-
 9 files changed, 51 insertions(+), 29 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/src/placeholder-utils.tsx

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 8caaa872e68..92f49f59acc 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -445,29 +445,6 @@ export default [{
         "jsdoc/require-jsdoc": OFF,
         "jsdoc/require-description": OFF,
     },
-}, {
-    files: [
-        "packages/**/*.ts",
-        "packages/**/*.tsx"
-    ],
-
-    rules: {
-        "@typescript-eslint/explicit-module-boundary-types": ERROR,
-    },
-}, {
-    files: [
-        "**/dev/**",
-        "**/test/**",
-        "**/stories/**",
-        "**/docs/**",
-        "**/chromatic/**",
-        "**/chromatic-fc/**",
-        "**/__tests__/**"
-    ],
-
-    rules: {
-        "@typescript-eslint/explicit-module-boundary-types": OFF,
-    },
 }, {
     files: [
         "packages/@react-aria/focus/src/**/*.ts",
@@ -504,4 +481,4 @@ export default [{
     rules: {
         "react/react-in-jsx-scope": OFF,
     },
-}];
\ No newline at end of file
+}];
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index 928c9a808a8..adfcd693db6 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -23,6 +23,7 @@ import {FormContext, useFormProps} from './Form';
 import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {TextFieldRef} from '@react-types/textfield';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
@@ -75,6 +76,8 @@ export const ColorField = forwardRef(function ColorField(props: ColorFieldProps,
     }
   }));
 
+  usePlaceholderWarning(props.placeholder, 'ColorField', inputRef);
+
   return (
     <AriaColorField
       {...fieldProps}
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index ce8c742d440..736f76e1244 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -64,6 +64,7 @@ import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {TextFieldRef} from '@react-types/textfield';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useScale} from './utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -580,6 +581,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
     );
   }
   let scale = useScale();
+  usePlaceholderWarning(props.placeholder, 'ComboBox', inputRef);
 
   return (
     <>
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index df53633c492..22501e0e467 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -33,6 +33,7 @@ import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react
 import {pressScale} from './pressScale';
 import {TextFieldRef} from '@react-types/textfield';
 import {useButton, useFocusRing, useHover} from 'react-aria';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
@@ -177,6 +178,7 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
     }
   }));
 
+  usePlaceholderWarning(props.placeholder, 'NumberField', inputRef);
 
   return (
     <AriaNumberField
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 5b15618a34a..68a37cb6921 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -29,6 +29,7 @@ import {IconContext} from './Icon';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import {TextFieldRef} from '@react-types/textfield';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
@@ -81,6 +82,8 @@ export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props:
     }
   }));
 
+  usePlaceholderWarning(props.placeholder, 'SearchField', inputRef);
+
   return (
     <AriaSearchField
       {...searchFieldProps}
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 6c0dfa3b822..a09b5f99269 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -25,11 +25,12 @@ import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHand
 import {createFocusableRef} from '@react-spectrum/utils';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
-import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {mergeRefs} from '@react-aria/utils';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {TextFieldRef} from '@react-types/textfield';
+import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
@@ -39,7 +40,6 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
    * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
-  // TODO: put warning about needing to provide this for cases where the text field is not focused and doesn't have text
   /**
    * Temporary text that occupies the text input when it is empty.
    */
@@ -106,6 +106,8 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
     ...textFieldProps
   } = props;
 
+  usePlaceholderWarning(props.placeholder, 'TextField/Area', inputRef);
+
   // Expose imperative interface for ref
   useImperativeHandle(ref, () => ({
     ...createFocusableRef(domRef, inputRef),
@@ -185,10 +187,11 @@ function TextAreaInput() {
       input.style.alignSelf = prevAlignment;
     }
   };
+  let {ref} = useSlottedContext(InputContext) ?? {};
 
   return (
     <AriaTextArea
-      ref={onHeightChange}
+      ref={mergeRefs(onHeightChange, ref as RefObject<HTMLTextAreaElement | null>)}
       // Workaround for baseline alignment bug in Safari.
       // https://bugs.webkit.org/show_bug.cgi?id=142968
       placeholder={placeholder ?? ' '}
diff --git a/packages/@react-spectrum/s2/src/placeholder-utils.tsx b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
new file mode 100644
index 00000000000..7fd71f3baa5
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2025 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 {RefObject, useEffect} from 'react';
+import {useEffectEvent, useEvent} from '@react-aria/utils';
+
+export function usePlaceholderWarning(placeholder: string | undefined, componentType: string, inputRef: RefObject<HTMLInputElement | null>): void {
+  let checkPlaceholder = useEffectEvent((input: HTMLInputElement | null) => {
+    if (!placeholder && input) {
+      if (document.activeElement !== input && (!input.value || input.value === '') && process.env.NODE_ENV !== 'production') {
+        console.warn(`Your ${componentType} is empty and not focused but doesn't have a placeholder. Please add one.`);
+      }
+    }
+  });
+
+  useEffect(() => {
+    checkPlaceholder(inputRef.current);
+  }, [checkPlaceholder, inputRef]);
+
+  useEvent(inputRef, 'blur', (e) => checkPlaceholder(e.target as HTMLInputElement));
+}
diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
index a2bda88da85..eef101dedb0 100644
--- a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
@@ -43,7 +43,8 @@ type Story = StoryObj<typeof ColorField>;
 export const Example: Story = {
   render: (args) => <ColorField {...args} />,
   args: {
-    label: 'Color'
+    label: 'Color',
+    placeholder: '######'
   }
 };
 
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index eea59c28416..e82ba6a9856 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -28,7 +28,8 @@ const meta: Meta<typeof TextField> = {
     label: {control: {type: 'text'}},
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    placeholder: {control: {type: 'text', defaultValue: 'Enter a name'}}
   },
   title: 'TextField'
 };

From 4fc6630def661bd42a628db790c3331988eddcbf Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 8 Aug 2025 11:40:58 -0700
Subject: [PATCH 3/9] adding tests

---
 eslint.config.mjs                             | 25 +++++-
 .../s2/stories/ColorField.stories.tsx         |  9 ++-
 .../s2/stories/ComboBox.stories.tsx           | 10 ++-
 .../s2/stories/NumberField.stories.tsx        |  7 +-
 .../s2/stories/SearchField.stories.tsx        |  6 +-
 .../s2/stories/TextField.stories.tsx          |  5 +-
 .../s2/test/ColorField.test.tsx               | 50 ++++++++++++
 .../@react-spectrum/s2/test/Combobox.test.tsx | 29 +++++++
 .../s2/test/NumberField.test.tsx              | 50 ++++++++++++
 .../s2/test/SearchField.test.tsx              | 27 +++++++
 .../s2/test/TextField.test.tsx                | 77 +++++++++++++++++++
 11 files changed, 284 insertions(+), 11 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/test/ColorField.test.tsx
 create mode 100644 packages/@react-spectrum/s2/test/NumberField.test.tsx
 create mode 100644 packages/@react-spectrum/s2/test/TextField.test.tsx

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 92f49f59acc..8caaa872e68 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -445,6 +445,29 @@ export default [{
         "jsdoc/require-jsdoc": OFF,
         "jsdoc/require-description": OFF,
     },
+}, {
+    files: [
+        "packages/**/*.ts",
+        "packages/**/*.tsx"
+    ],
+
+    rules: {
+        "@typescript-eslint/explicit-module-boundary-types": ERROR,
+    },
+}, {
+    files: [
+        "**/dev/**",
+        "**/test/**",
+        "**/stories/**",
+        "**/docs/**",
+        "**/chromatic/**",
+        "**/chromatic-fc/**",
+        "**/__tests__/**"
+    ],
+
+    rules: {
+        "@typescript-eslint/explicit-module-boundary-types": OFF,
+    },
 }, {
     files: [
         "packages/@react-aria/focus/src/**/*.ts",
@@ -481,4 +504,4 @@ export default [{
     rules: {
         "react/react-in-jsx-scope": OFF,
     },
-}];
+}];
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
index eef101dedb0..5848c32a64b 100644
--- a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
@@ -32,7 +32,11 @@ const meta: Meta<typeof ColorField> = {
     label: {control: {type: 'text'}},
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    placeholder: {control: {type: 'text'}}
+  },
+  args: {
+    placeholder: '######'
   },
   title: 'ColorField'
 };
@@ -43,8 +47,7 @@ type Story = StoryObj<typeof ColorField>;
 export const Example: Story = {
   render: (args) => <ColorField {...args} />,
   args: {
-    label: 'Color',
-    placeholder: '######'
+    label: 'Color'
   }
 };
 
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
index 19af5c3f3d1..81139fe94de 100644
--- a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -32,7 +32,11 @@ const meta: Meta<typeof ComboBox<any>> = {
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
     children: {table: {disable: true}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    placeholder: {control: {type: 'text'}}
+  },
+  args: {
+    // placeholder: 'Select a value'
   },
   title: 'ComboBox'
 };
@@ -42,8 +46,8 @@ type Story = StoryObj<typeof ComboBox<any>>;
 
 export const Example: Story = {
   render: (args: ComboBoxProps<any>) => (
-    <ComboBox {...args}>
-      <ComboBoxItem>Chocolate</ComboBoxItem>
+    <ComboBox selectedKey="1">
+      <ComboBoxItem id="1">Chocolate</ComboBoxItem>
       <ComboBoxItem>Mint</ComboBoxItem>
       <ComboBoxItem>Strawberry</ComboBoxItem>
       <ComboBoxItem>Vanilla</ComboBoxItem>
diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
index 2682f1bc8be..94167cef0a2 100644
--- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
@@ -33,7 +33,11 @@ const meta: Meta<typeof NumberField> = {
     label: {control: {type: 'text'}},
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    placeholder: {control: {type: 'text'}}
+  },
+  args: {
+    placeholder: 'How many items?'
   },
   tags: ['autodocs'],
   title: 'NumberField'
@@ -102,4 +106,3 @@ export const ContextualHelpExample: Story = {
     label: 'Quantity'
   }
 };
-
diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
index 827a5cb8ed5..e162130e03a 100644
--- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
@@ -34,7 +34,11 @@ const meta: Meta<typeof SearchField> = {
     label: {control: {type: 'text'}},
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    placeholder: {control: {type: 'text'}}
+  },
+  args: {
+    placeholder: 'Enter your search here'
   },
   title: 'SearchField'
 };
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index e82ba6a9856..ba8e8169114 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -29,7 +29,10 @@ const meta: Meta<typeof TextField> = {
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
     contextualHelp: {table: {disable: true}},
-    placeholder: {control: {type: 'text', defaultValue: 'Enter a name'}}
+    placeholder: {control: {type: 'text'}}
+  },
+  args: {
+    placeholder: 'Enter your name'
   },
   title: 'TextField'
 };
diff --git a/packages/@react-spectrum/s2/test/ColorField.test.tsx b/packages/@react-spectrum/s2/test/ColorField.test.tsx
new file mode 100644
index 00000000000..b16c407ed05
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/ColorField.test.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 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 {ColorField} from '../src';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('ColorField', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  it('should warn if the ColorField renders/blurs without a placeholder', async () => {
+    let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    let {getByRole, rerender} = render(
+      <ColorField label="Color" />
+    );
+
+    expect(spy).toHaveBeenCalledWith('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    await user.tab();
+    await user.tab();
+    expect(spy).toHaveBeenCalledWith('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    let input = getByRole('textbox');
+    await user.click(input);
+    await user.keyboard('AAAAAA');
+    await user.tab();
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<ColorField label="Color" placeholder="test" />);
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<ColorField label="Color" autoFocus />);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/@react-spectrum/s2/test/Combobox.test.tsx b/packages/@react-spectrum/s2/test/Combobox.test.tsx
index 05cefeb35c8..de751b7bcc1 100644
--- a/packages/@react-spectrum/s2/test/Combobox.test.tsx
+++ b/packages/@react-spectrum/s2/test/Combobox.test.tsx
@@ -21,6 +21,7 @@ import userEvent from '@testing-library/user-event';
 describe('Combobox', () => {
   let user;
   let testUtilUser = new User();
+  let warnSpy;
   function DynamicCombobox(props) {
     let {items, loadingState, onLoadMore, ...otherProps} = props;
     return (
@@ -40,6 +41,7 @@ describe('Combobox', () => {
     jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 100);
     jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 100);
     jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     user = userEvent.setup({delay: null, pointerMap});
   });
 
@@ -209,4 +211,31 @@ describe('Combobox', () => {
     expect(tree.getAllByText('Contents')[1]).toBeVisible();
     warn.mockRestore();
   });
+
+  it('should warn if the Combobox renders/blurs without a placeholder', async () => {
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    let items = [{name: 'Chocolate'}, {name: 'Mint'}, {name: 'Chocolate Chip'}];
+    let {rerender} = render(
+      <DynamicCombobox items={items} />
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    warnSpy.mockClear();
+
+    await user.tab();
+    await user.tab();
+    expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    warnSpy.mockClear();
+
+    rerender(<DynamicCombobox items={items} placeholder="test" />);
+    expect(warnSpy).not.toHaveBeenCalled();
+
+    rerender(<DynamicCombobox items={items} autoFocus />);
+    expect(warnSpy).not.toHaveBeenCalled();
+
+    render(
+      <DynamicCombobox selectedKey="Chocolate" items={items} />
+    );
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/@react-spectrum/s2/test/NumberField.test.tsx b/packages/@react-spectrum/s2/test/NumberField.test.tsx
new file mode 100644
index 00000000000..b50179c63a0
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/NumberField.test.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 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 {NumberField} from '../src';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('NumberField', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  it('should warn if the NumberField renders/blurs without a placeholder', async () => {
+    let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    let {getByRole, rerender} = render(
+      <NumberField label="Quantity" />
+    );
+
+    expect(spy).toHaveBeenCalledWith('Your NumberField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    await user.tab();
+    await user.tab();
+    expect(spy).toHaveBeenCalledWith('Your NumberField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    let input = getByRole('textbox');
+    await user.click(input);
+    await user.keyboard('1');
+    await user.tab();
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<NumberField label="Quantity" placeholder="test" />);
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<NumberField label="Quantity" autoFocus />);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/@react-spectrum/s2/test/SearchField.test.tsx b/packages/@react-spectrum/s2/test/SearchField.test.tsx
index a8ccddc2ae3..20db3c7a2eb 100644
--- a/packages/@react-spectrum/s2/test/SearchField.test.tsx
+++ b/packages/@react-spectrum/s2/test/SearchField.test.tsx
@@ -41,4 +41,31 @@ describe('SearchField', () => {
     await user.keyboard('Foo');
     expect(group).not.toHaveAttribute('data-focus-visible');
   });
+
+  it('should warn if the SearchField renders/blurs without a placeholder', async () => {
+    let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    let {getByRole, rerender} = render(
+      <SearchField label="Search" />
+    );
+
+    expect(spy).toHaveBeenCalledWith('Your SearchField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    await user.tab();
+    await user.tab();
+    expect(spy).toHaveBeenCalledWith('Your SearchField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    let input = getByRole('searchbox');
+    await user.click(input);
+    await user.keyboard('Foo');
+    await user.tab();
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<SearchField label="Search" placeholder="test" />);
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<SearchField label="Search" autoFocus />);
+    expect(spy).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/@react-spectrum/s2/test/TextField.test.tsx b/packages/@react-spectrum/s2/test/TextField.test.tsx
new file mode 100644
index 00000000000..2a30e31b248
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/TextField.test.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2025 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 {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import {TextArea, TextField} from '../src';
+import userEvent from '@testing-library/user-event';
+
+describe('TextField', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  it('should warn if the TextField renders/blurs without a placeholder', async () => {
+    let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    let {getByRole, rerender} = render(
+      <TextField label="Name" />
+    );
+
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    await user.tab();
+    await user.tab();
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    let input = getByRole('textbox');
+    await user.click(input);
+    await user.keyboard('Foo');
+    await user.tab();
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<TextField label="Name" placeholder="test" />);
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<TextField label="Name" autoFocus />);
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('should warn if the TextArea renders/blurs without a placeholder', async () => {
+    let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    let {getByRole, rerender} = render(
+      <TextArea label="Name" />
+    );
+
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    await user.tab();
+    await user.tab();
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    spy.mockClear();
+
+    let input = getByRole('textbox');
+    await user.click(input);
+    await user.keyboard('Foo');
+    await user.tab();
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<TextArea label="Name" placeholder="test" />);
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<TextArea label="Name" autoFocus />);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

From beb224e6cc0710b3b4a1d14e99a1e0de61004379 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 8 Aug 2025 12:00:22 -0700
Subject: [PATCH 4/9] fix combobox placeholder warning

---
 .../@react-spectrum/s2/src/placeholder-utils.tsx    | 13 +++++++++++--
 .../@react-spectrum/s2/stories/ComboBox.stories.tsx |  4 ++--
 packages/@react-spectrum/s2/test/Combobox.test.tsx  |  3 +++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/placeholder-utils.tsx b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
index 7fd71f3baa5..b8a55438f51 100644
--- a/packages/@react-spectrum/s2/src/placeholder-utils.tsx
+++ b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
@@ -23,8 +23,17 @@ export function usePlaceholderWarning(placeholder: string | undefined, component
   });
 
   useEffect(() => {
-    checkPlaceholder(inputRef.current);
-  }, [checkPlaceholder, inputRef]);
+    let timer;
+    if (componentType === 'ComboBox') {
+      timer = setTimeout(() => {
+        checkPlaceholder(inputRef.current);
+      }, 50);
+    } else {
+      checkPlaceholder(inputRef.current);
+    }
+
+    return () => clearTimeout(timer);
+  }, [checkPlaceholder, inputRef, componentType]);
 
   useEvent(inputRef, 'blur', (e) => checkPlaceholder(e.target as HTMLInputElement));
 }
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
index 81139fe94de..b1e46675189 100644
--- a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -36,7 +36,7 @@ const meta: Meta<typeof ComboBox<any>> = {
     placeholder: {control: {type: 'text'}}
   },
   args: {
-    // placeholder: 'Select a value'
+    placeholder: 'Select a value'
   },
   title: 'ComboBox'
 };
@@ -46,7 +46,7 @@ type Story = StoryObj<typeof ComboBox<any>>;
 
 export const Example: Story = {
   render: (args: ComboBoxProps<any>) => (
-    <ComboBox selectedKey="1">
+    <ComboBox {...args}>
       <ComboBoxItem id="1">Chocolate</ComboBoxItem>
       <ComboBoxItem>Mint</ComboBoxItem>
       <ComboBoxItem>Strawberry</ComboBoxItem>
diff --git a/packages/@react-spectrum/s2/test/Combobox.test.tsx b/packages/@react-spectrum/s2/test/Combobox.test.tsx
index de751b7bcc1..c4092291456 100644
--- a/packages/@react-spectrum/s2/test/Combobox.test.tsx
+++ b/packages/@react-spectrum/s2/test/Combobox.test.tsx
@@ -218,6 +218,9 @@ describe('Combobox', () => {
     let {rerender} = render(
       <DynamicCombobox items={items} />
     );
+    // Since Combobox takes multiple renders to populate its input value if a selected key is provided
+    // we have a delay for the placeholder warning
+    act(() => {jest.runAllTimers();});
 
     expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
     warnSpy.mockClear();

From 986457d3adb46eb5a1b2c173c5369c4a9788df69 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 11 Aug 2025 10:33:18 -0700
Subject: [PATCH 5/9] apply specific color to placeholders

---
 packages/@react-spectrum/s2/src/Field.tsx     | 5 ++++-
 packages/@react-spectrum/s2/src/TextField.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index 3c915ad0b3f..22c73463a86 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -231,7 +231,10 @@ export const Input = forwardRef(function Input(props: InputProps, ref: Forwarded
       className={UNSAFE_className + mergeStyles(style({
         padding: 0,
         backgroundColor: 'transparent',
-        color: 'inherit',
+        color: {
+          default: 'inherit',
+          '::placeholder': 'gray-600'
+        },
         fontFamily: 'inherit',
         fontSize: 'inherit',
         fontWeight: 'inherit',
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index a09b5f99269..859e427b992 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -201,7 +201,10 @@ function TextAreaInput() {
         minHeight: controlSize(),
         boxSizing: 'border-box',
         backgroundColor: 'transparent',
-        color: 'inherit',
+        color: {
+          default: 'inherit',
+          '::placeholder': 'gray-600'
+        },
         fontFamily: 'inherit',
         fontSize: 'inherit',
         fontWeight: 'inherit',

From 0c286428b915fe43164287e1226b7e5750ccaf7d Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 11 Aug 2025 17:11:20 -0700
Subject: [PATCH 6/9] getting rid of unneeded warnings and adding missing
 placeholders

---
 .../s2/chromatic/Accordion.stories.tsx        |  6 ++---
 .../s2/chromatic/ColorField.stories.tsx       |  2 +-
 .../s2/chromatic/Forms.stories.tsx            | 22 +++++++++----------
 .../s2/chromatic/TextField.stories.tsx        | 16 +++++++++-----
 packages/@react-spectrum/s2/src/ComboBox.tsx  |  2 --
 .../@react-spectrum/s2/src/NumberField.tsx    |  3 ---
 .../@react-spectrum/s2/src/SearchField.tsx    |  3 ---
 .../s2/src/placeholder-utils.tsx              | 22 +++++++++----------
 .../s2/stories/Accordion.stories.tsx          | 11 +++++-----
 .../s2/stories/CustomDialog.stories.tsx       |  2 +-
 .../s2/stories/Form.stories.tsx               | 22 +++++++++----------
 .../s2/stories/Popover.stories.tsx            |  4 ++--
 12 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
index 2a16fb20c7f..3ac77693a82 100644
--- a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
@@ -45,7 +45,7 @@ export const Example: Story = {
               People
             </DisclosureTitle>
             <DisclosurePanel>
-              <TextField label="Name" styles={style({maxWidth: 176})} />
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
             </DisclosurePanel>
           </Disclosure>
         </Accordion>
@@ -107,7 +107,7 @@ export const WithDisabledDisclosure: Story = {
               People
             </DisclosureTitle>
             <DisclosurePanel>
-              <TextField label="Name" />
+              <TextField label="Name" placeholder="Enter your name" />
             </DisclosurePanel>
           </Disclosure>
         </Accordion>
@@ -152,7 +152,7 @@ export const WithActionButton: Story = {
               <ActionButton><NewIcon aria-label="new icon" /></ActionButton>
             </DisclosureHeader>
             <DisclosurePanel>
-              <TextField label="Name" styles={style({maxWidth: 176})} />
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
             </DisclosurePanel>
           </Disclosure>
         </Accordion>
diff --git a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
index 553903d7904..03f9dec2837 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
@@ -45,7 +45,7 @@ const Template = ({combos, ...args}: ColorFieldProps & {combos: any[]}): ReactEl
           key = 'default';
         }
         return (
-          <ColorField data-testid={fullComboName} defaultValue="#e21" label={key} description="test description" errorMessage="test error" {...c} {...args}  />
+          <ColorField data-testid={fullComboName} defaultValue="#e21" label={key} description="test description" errorMessage="test error" placeholder="######" {...c} {...args}  />
         );
       })}
     </div>
diff --git a/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx b/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx
index b3811ada6e6..5da7087d322 100644
--- a/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Forms.stories.tsx
@@ -62,9 +62,9 @@ type Story = StoryObj<typeof Form>;
 export const Example: Story = {
   render: (args) => (
     <Form {...args}>
-      <TextField label="First Name" name="firstName" />
-      <TextField label="Last Name" name="firstName" />
-      <TextField label="Email" name="email" type="email" description="Enter an email" />
+      <TextField label="First Name" name="firstName" placeholder="John" />
+      <TextField label="Last Name" name="lastName" placeholder="Doe" />
+      <TextField label="Email" name="email" type="email" description="Enter an email" placeholder="abc@123.com" />
       <CheckboxGroup label="Favorite sports">
         <Checkbox value="soccer">Soccer</Checkbox>
         <Checkbox value="baseball">Baseball</Checkbox>
@@ -75,10 +75,10 @@ export const Example: Story = {
         <Radio value="dog">Dog</Radio>
         <Radio value="plant" isDisabled>Plant</Radio>
       </RadioGroup>
-      <TextField label="City" name="city" description="A long description to test help text wrapping." />
-      <TextField label="A long label to test wrapping behavior" name="long" />
+      <TextField label="City" name="city" description="A long description to test help text wrapping." placeholder="Some city" />
+      <TextField label="A long label to test wrapping behavior" name="long" placeholder="looooooooooong" />
       <SearchField label="Search" name="search" />
-      <TextArea label="Comment" name="comment" />
+      <TextArea label="Comment" name="comment" placeholder="Enter your comment here" />
       <Switch>Wi-Fi</Switch>
       <Checkbox>I agree to the terms</Checkbox>
       <Slider label="Cookies"  defaultValue={30} />
@@ -91,9 +91,9 @@ export const Example: Story = {
 export const MixedForm: Story = {
   render: (args) => (
     <Form {...args}>
-      <TextField label="First Name" name="firstName" />
-      <TextField label="Last Name" name="firstName" />
-      <TextField label="Email" name="email" type="email" description="Enter an email" />
+      <TextField label="First Name" name="firstName" placeholder="John" />
+      <TextField label="Last Name" name="lastName" placeholder="Doe" />
+      <TextField label="Email" name="email" type="email" description="Enter an email" placeholder="abc@123.com" />
       <CheckboxGroup aria-label="Favorite sports">
         <Checkbox value="soccer">Soccer</Checkbox>
         <Checkbox value="baseball">Baseball</Checkbox>
@@ -143,7 +143,7 @@ const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
         <ToggleButton>
           Enable color
         </ToggleButton>
-        <ColorField aria-label="Fill color" styles={style({width: 144})} />
+        <ColorField aria-label="Fill color" styles={style({width: 144})} placeholder="######" />
         <ColorSlider channel="alpha" defaultValue="#000" />
       </div>
       <Divider size="S" />
@@ -152,7 +152,7 @@ const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
         <ToggleButton>
           Enable search
         </ToggleButton>
-        <TextField aria-label="Query" styles={style({width: 144})} />
+        <TextField aria-label="Query" styles={style({width: 144})} placeholder="Search here" />
         <ComboBox aria-label="Search terms" styles={style({width: 144})}>
           <ComboBoxItem>search term 1</ComboBoxItem>
           <ComboBoxItem>search term 2</ComboBoxItem>
diff --git a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
index 551a9dc3e56..a355c43ddc9 100644
--- a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
@@ -34,7 +34,8 @@ type Story = StoryObj<typeof TextField>;
 export const Example: Story = {
   render: (args) => <TextField {...args} />,
   args: {
-    label: 'Name'
+    label: 'Name',
+    placeholder: 'Enter your name'
   }
 };
 
@@ -57,6 +58,7 @@ export const ContextualHelpExample: Story = {
   ),
   args: {
     label: 'Segment',
+    placeholder: 'Enter your name',
     contextualHelp: (
       <ContextualHelp>
         <Heading>What is a segment?</Heading>
@@ -80,14 +82,16 @@ export const ContextualHelpExample: Story = {
 export const TextAreaExample: StoryObj<typeof TextArea> = {
   render: (args) => <TextArea {...args} />,
   args: {
-    label: 'Comment'
+    label: 'Comment',
+    placeholder: 'Enter your name'
   }
 };
 
 export const CustomWidth: Story = {
   render: (args) => <TextField {...args} styles={style({width: 384})} />,
   args: {
-    label: 'Name'
+    label: 'Name',
+    placeholder: 'Enter your name'
   },
   parameters: {
     docs: {
@@ -99,7 +103,8 @@ export const CustomWidth: Story = {
 export const SmallWidth: Story = {
   render: (args) => <TextField {...args} styles={style({width: 48})} />,
   args: {
-    label: 'Name'
+    label: 'Name',
+    placeholder: 'Enter your name'
   },
   parameters: {
     docs: {
@@ -111,7 +116,8 @@ export const SmallWidth: Story = {
 export const UNSAFEWidth: Story = {
   render: (args) => <TextField {...args} UNSAFE_style={{width: 384}} />,
   args: {
-    label: 'Name'
+    label: 'Name',
+    placeholder: 'Enter your name'
   },
   parameters: {
     docs: {
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 736f76e1244..ce8c742d440 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -64,7 +64,6 @@ import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {TextFieldRef} from '@react-types/textfield';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {usePlaceholderWarning} from './placeholder-utils';
 import {useScale} from './utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -581,7 +580,6 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
     );
   }
   let scale = useScale();
-  usePlaceholderWarning(props.placeholder, 'ComboBox', inputRef);
 
   return (
     <>
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index 22501e0e467..f836a70f70e 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -33,7 +33,6 @@ import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react
 import {pressScale} from './pressScale';
 import {TextFieldRef} from '@react-types/textfield';
 import {useButton, useFocusRing, useHover} from 'react-aria';
-import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
@@ -178,8 +177,6 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
     }
   }));
 
-  usePlaceholderWarning(props.placeholder, 'NumberField', inputRef);
-
   return (
     <AriaNumberField
       ref={domRef}
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 68a37cb6921..5b15618a34a 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -29,7 +29,6 @@ import {IconContext} from './Icon';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import {TextFieldRef} from '@react-types/textfield';
-import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
@@ -82,8 +81,6 @@ export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props:
     }
   }));
 
-  usePlaceholderWarning(props.placeholder, 'SearchField', inputRef);
-
   return (
     <AriaSearchField
       {...searchFieldProps}
diff --git a/packages/@react-spectrum/s2/src/placeholder-utils.tsx b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
index b8a55438f51..cc3a39c6760 100644
--- a/packages/@react-spectrum/s2/src/placeholder-utils.tsx
+++ b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
@@ -10,30 +10,28 @@
  * governing permissions and limitations under the License.
  */
 
-import {RefObject, useEffect} from 'react';
-import {useEffectEvent, useEvent} from '@react-aria/utils';
+import {getActiveElement, getOwnerDocument, useEffectEvent, useEvent} from '@react-aria/utils';
+import {RefObject, useEffect, useRef} from 'react';
 
 export function usePlaceholderWarning(placeholder: string | undefined, componentType: string, inputRef: RefObject<HTMLInputElement | null>): void {
   let checkPlaceholder = useEffectEvent((input: HTMLInputElement | null) => {
     if (!placeholder && input) {
-      if (document.activeElement !== input && (!input.value || input.value === '') && process.env.NODE_ENV !== 'production') {
+      if (getActiveElement(getOwnerDocument(input)) !== input && (!input.value || input.value === '')) {
         console.warn(`Your ${componentType} is empty and not focused but doesn't have a placeholder. Please add one.`);
       }
     }
   });
 
+  let hasWarned = useRef(false);
   useEffect(() => {
-    let timer;
-    if (componentType === 'ComboBox') {
-      timer = setTimeout(() => {
-        checkPlaceholder(inputRef.current);
-      }, 50);
-    } else {
+    if (!hasWarned.current && process.env.NODE_ENV !== 'production') {
       checkPlaceholder(inputRef.current);
     }
-
-    return () => clearTimeout(timer);
   }, [checkPlaceholder, inputRef, componentType]);
 
-  useEvent(inputRef, 'blur', (e) => checkPlaceholder(e.target as HTMLInputElement));
+  useEvent(inputRef, 'blur', (e) => {
+    if (!hasWarned.current && process.env.NODE_ENV !== 'production') {
+      checkPlaceholder(e.target as HTMLInputElement);
+    }
+  });
 }
diff --git a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
index 867e7cc5492..a655b90d5a6 100644
--- a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
@@ -51,7 +51,7 @@ export const Example: Story = {
               People
             </DisclosureTitle>
             <DisclosurePanel>
-              <TextField label="Name" styles={style({maxWidth: 176})} />
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
             </DisclosurePanel>
           </Disclosure>
         </Accordion>
@@ -113,7 +113,7 @@ export const WithDisabledDisclosure: Story = {
               People
             </DisclosureTitle>
             <DisclosurePanel>
-              <TextField label="Name" />
+              <TextField label="Name" placeholder="Enter your name" />
             </DisclosurePanel>
           </Disclosure>
         </Accordion>
@@ -155,7 +155,7 @@ function ControlledAccordion(props) {
             People
           </DisclosureTitle>
           <DisclosurePanel>
-            <TextField label="Name" />
+            <TextField label="Name" placeholder="Enter your name" />
           </DisclosurePanel>
         </Disclosure>
       </Accordion>
@@ -193,7 +193,7 @@ export const ControlledOpen: Story = {
             People
           </DisclosureTitle>
           <DisclosurePanel>
-            <TextField label="Name" />
+            <TextField label="Name" placeholder="Enter your name" />
           </DisclosurePanel>
         </Disclosure>
       </Accordion>
@@ -231,7 +231,7 @@ export const WithActionButton: Story = {
               <ActionButton><NewIcon aria-label="new icon" /></ActionButton>
             </DisclosureHeader>
             <DisclosurePanel>
-              <TextField label="Name" styles={style({maxWidth: 176})} />
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
             </DisclosurePanel>
           </Disclosure>
         </Accordion>
@@ -239,4 +239,3 @@ export const WithActionButton: Story = {
     );
   }
 };
-
diff --git a/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx b/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
index 251fa09178b..04b44ff5bff 100644
--- a/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
@@ -101,7 +101,7 @@ export const SideImage: Story = {
           <div className={style({padding: {default: 24, sm: 32}, flexGrow: 1, display: 'flex', flexDirection: 'column', rowGap: 32})}>
             <div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, flexGrow: 1})}>
               <Heading slot="title" styles={style({font: 'heading', marginY: 0})}>Add new</Heading>
-              <TextField label="Name" isRequired />
+              <TextField label="Name" isRequired placeholder="Enter your name" />
               <DropZone>
                 <IllustratedMessage orientation="horizontal" size="S">
                   <DropToUpload />
diff --git a/packages/@react-spectrum/s2/stories/Form.stories.tsx b/packages/@react-spectrum/s2/stories/Form.stories.tsx
index 4c1aaf7d3e5..050378ca0c2 100644
--- a/packages/@react-spectrum/s2/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Form.stories.tsx
@@ -67,9 +67,9 @@ type Story = StoryObj<typeof Form>;
 export const Example: Story = {
   render: (args) => (
     <Form {...args}>
-      <TextField label="First Name" name="firstName" />
-      <TextField label="Last Name" name="firstName" />
-      <TextField label="Email" name="email" type="email" description="Enter an email" />
+      <TextField label="First Name" name="firstName" placeholder="John" />
+      <TextField label="Last Name" name="lastName" placeholder="Doe" />
+      <TextField label="Email" name="email" type="email" description="Enter an email" placeholder="123@abc.com" />
       <Picker label="Country" name="country">
         <PickerItem id="canada">Canada</PickerItem>
         <PickerItem id="united-states">United States</PickerItem>
@@ -86,10 +86,10 @@ export const Example: Story = {
         <Radio value="dog">Dog</Radio>
         <Radio value="plant" isDisabled>Plant</Radio>
       </RadioGroup>
-      <TextField label="City" name="city" description="A long description to test help text wrapping." />
-      <TextField label="A long label to test wrapping behavior" name="long" />
+      <TextField label="City" name="city" description="A long description to test help text wrapping." placeholder="Some city" />
+      <TextField label="A long label to test wrapping behavior" name="long" placeholder="loooooooooooooooooooooog" />
       <SearchField label="Search" name="search" />
-      <TextArea label="Comment" name="comment" />
+      <TextArea label="Comment" name="comment" placeholder="Enter your comment here" />
       <Switch>Wi-Fi</Switch>
       <Checkbox>I agree to the terms</Checkbox>
       <Slider label="Cookies"  defaultValue={30} />
@@ -102,9 +102,9 @@ export const Example: Story = {
 export const MixedForm: Story = {
   render: (args) => (
     <Form {...args}>
-      <TextField label="First Name" name="firstName" />
-      <TextField label="Last Name" name="firstName" />
-      <TextField label="Email" name="email" type="email" description="Enter an email" />
+      <TextField label="First Name" name="firstName" placeholder="John" />
+      <TextField label="Last Name" name="lastName" placeholder="Doe" />
+      <TextField label="Email" name="email" type="email" description="Enter an email" placeholder="123@abc.com" />
       <CheckboxGroup aria-label="Favorite sports">
         <Checkbox value="soccer">Soccer</Checkbox>
         <Checkbox value="baseball">Baseball</Checkbox>
@@ -155,7 +155,7 @@ const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
         <ToggleButton>
           Enable color
         </ToggleButton>
-        <ColorField aria-label="Fill color" styles={style({width: 144})} />
+        <ColorField aria-label="Fill color" styles={style({width: 144})} placeholder="######" />
         <ColorSlider channel="alpha" defaultValue="#000" />
       </div>
       <Divider size="S" />
@@ -164,7 +164,7 @@ const CustomLabelsExampleRender = (args: FormProps): ReactElement => {
         <ToggleButton>
           Enable search
         </ToggleButton>
-        <TextField aria-label="Query" styles={style({width: 144})} />
+        <TextField aria-label="Query" styles={style({width: 144})} placeholder="Enter your name" />
         <ComboBox aria-label="Search terms" styles={style({width: 144})}>
           <ComboBoxItem>search term 1</ComboBoxItem>
           <ComboBoxItem>search term 2</ComboBoxItem>
diff --git a/packages/@react-spectrum/s2/stories/Popover.stories.tsx b/packages/@react-spectrum/s2/stories/Popover.stories.tsx
index 42ca7489c0e..0ecf51d15b0 100644
--- a/packages/@react-spectrum/s2/stories/Popover.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Popover.stories.tsx
@@ -104,8 +104,8 @@ export const HelpCenter: Story = {
           <TabPanel id="feedback" styles={style({margin: 12})}>
             <p className={style({font: 'body', marginTop: 0})}>How are we doing? Share your feedback here.</p>
             <Form>
-              <TextField label="Subject" />
-              <TextField label="Description" isRequired />
+              <TextField label="Subject" placeholder="Subject" />
+              <TextField label="Description" isRequired placeholder="Enter your description here" />
               <Switch>Adobe can contact me for further questions concerning this feedback</Switch>
               <Button styles={style({marginStart: 'auto'})}>Submit</Button>
             </Form>

From a26dc9b63f6e23a16b4816024605a355e61d486d Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 11 Aug 2025 17:36:05 -0700
Subject: [PATCH 7/9] fix tests

---
 packages/@react-spectrum/s2/test/Combobox.test.tsx    | 11 +++--------
 packages/@react-spectrum/s2/test/NumberField.test.tsx |  8 +++-----
 packages/@react-spectrum/s2/test/SearchField.test.tsx |  9 +++------
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/@react-spectrum/s2/test/Combobox.test.tsx b/packages/@react-spectrum/s2/test/Combobox.test.tsx
index c4092291456..c85b7bbe932 100644
--- a/packages/@react-spectrum/s2/test/Combobox.test.tsx
+++ b/packages/@react-spectrum/s2/test/Combobox.test.tsx
@@ -212,23 +212,18 @@ describe('Combobox', () => {
     warn.mockRestore();
   });
 
-  it('should warn if the Combobox renders/blurs without a placeholder', async () => {
+  it('should not warn if the Combobox renders/blurs without a placeholder', async () => {
     warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     let items = [{name: 'Chocolate'}, {name: 'Mint'}, {name: 'Chocolate Chip'}];
     let {rerender} = render(
       <DynamicCombobox items={items} />
     );
-    // Since Combobox takes multiple renders to populate its input value if a selected key is provided
-    // we have a delay for the placeholder warning
-    act(() => {jest.runAllTimers();});
 
-    expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
-    warnSpy.mockClear();
+    expect(warnSpy).not.toBeCalled();
 
     await user.tab();
     await user.tab();
-    expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
-    warnSpy.mockClear();
+    expect(warnSpy).not.toBeCalled();
 
     rerender(<DynamicCombobox items={items} placeholder="test" />);
     expect(warnSpy).not.toHaveBeenCalled();
diff --git a/packages/@react-spectrum/s2/test/NumberField.test.tsx b/packages/@react-spectrum/s2/test/NumberField.test.tsx
index b50179c63a0..75876f2c6f0 100644
--- a/packages/@react-spectrum/s2/test/NumberField.test.tsx
+++ b/packages/@react-spectrum/s2/test/NumberField.test.tsx
@@ -21,19 +21,17 @@ describe('NumberField', () => {
     user = userEvent.setup({delay: null, pointerMap});
   });
 
-  it('should warn if the NumberField renders/blurs without a placeholder', async () => {
+  it('should not warn if the NumberField renders/blurs without a placeholder', async () => {
     let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     let {getByRole, rerender} = render(
       <NumberField label="Quantity" />
     );
 
-    expect(spy).toHaveBeenCalledWith('Your NumberField is empty and not focused but doesn\'t have a placeholder. Please add one.');
-    spy.mockClear();
+    expect(spy).not.toBeCalled();
 
     await user.tab();
     await user.tab();
-    expect(spy).toHaveBeenCalledWith('Your NumberField is empty and not focused but doesn\'t have a placeholder. Please add one.');
-    spy.mockClear();
+    expect(spy).not.toBeCalled();
 
     let input = getByRole('textbox');
     await user.click(input);
diff --git a/packages/@react-spectrum/s2/test/SearchField.test.tsx b/packages/@react-spectrum/s2/test/SearchField.test.tsx
index 20db3c7a2eb..9d6d87feccb 100644
--- a/packages/@react-spectrum/s2/test/SearchField.test.tsx
+++ b/packages/@react-spectrum/s2/test/SearchField.test.tsx
@@ -42,19 +42,16 @@ describe('SearchField', () => {
     expect(group).not.toHaveAttribute('data-focus-visible');
   });
 
-  it('should warn if the SearchField renders/blurs without a placeholder', async () => {
+  it('should not warn if the SearchField renders/blurs without a placeholder', async () => {
     let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     let {getByRole, rerender} = render(
       <SearchField label="Search" />
     );
 
-    expect(spy).toHaveBeenCalledWith('Your SearchField is empty and not focused but doesn\'t have a placeholder. Please add one.');
-    spy.mockClear();
-
+    expect(spy).not.toBeCalled();
     await user.tab();
     await user.tab();
-    expect(spy).toHaveBeenCalledWith('Your SearchField is empty and not focused but doesn\'t have a placeholder. Please add one.');
-    spy.mockClear();
+    expect(spy).not.toBeCalled();
 
     let input = getByRole('searchbox');
     await user.click(input);

From 4d2eaa4f12da9383231cb3dee0bca471eafeb8c6 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 12 Aug 2025 10:22:36 -0700
Subject: [PATCH 8/9] review comments

---
 packages/@react-spectrum/s2/src/ColorField.tsx        | 11 ++++-------
 packages/@react-spectrum/s2/src/ComboBox.tsx          | 10 ++++------
 packages/@react-spectrum/s2/src/NumberField.tsx       | 10 ++++------
 packages/@react-spectrum/s2/src/SearchField.tsx       |  9 +++------
 packages/@react-spectrum/s2/src/TextField.tsx         |  9 +++------
 packages/@react-spectrum/s2/src/placeholder-utils.tsx |  2 +-
 packages/react-aria-components/src/Input.tsx          |  8 +++++++-
 7 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index adfcd693db6..536ca650dfb 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -13,7 +13,8 @@
 import {
   ColorField as AriaColorField,
   ColorFieldProps as AriaColorFieldProps,
-  ContextValue
+  ContextValue,
+  InputProps
 } from 'react-aria-components';
 import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
@@ -26,17 +27,13 @@ import {TextFieldRef} from '@react-types/textfield';
 import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the color field.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
-  /**
-   * Temporary text that occupies the text input when it is empty.
-   */
-  placeholder?: string
+  size?: 'S' | 'M' | 'L' | 'XL'
 }
 
 export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index ce8c742d440..f3700de2067 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -21,6 +21,7 @@ import {
   ComboBoxStateContext,
   ContextValue,
   InputContext,
+  InputProps,
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
@@ -83,7 +84,8 @@ export interface ComboBoxProps<T extends object> extends
   HelpTextProps,
   Pick<ListBoxProps<T>, 'items' | 'dependencies'>,
   Pick<AriaPopoverProps, 'shouldFlip'>,
-  Pick<AsyncLoadable, 'onLoadMore'>  {
+  Pick<AsyncLoadable, 'onLoadMore'>,
+  Pick<InputProps, 'placeholder'>  {
     /** The contents of the collection. */
     children: ReactNode | ((item: T) => ReactNode),
     /**
@@ -101,11 +103,7 @@ export interface ComboBoxProps<T extends object> extends
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
     menuWidth?: number,
     /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */
-    loadingState?: LoadingState,
-    /**
-     * Temporary text that occupies the text input when it is empty.
-     */
-    placeholder?: string
+    loadingState?: LoadingState
 }
 
 export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index f836a70f70e..ef196684b2a 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -19,6 +19,7 @@ import {
   ButtonRenderProps,
   ContextValue,
   InputContext,
+  InputProps,
   useContextProps
 } from 'react-aria-components';
 import {baseColor, space, style} from '../style' with {type: 'macro'};
@@ -40,7 +41,8 @@ export interface NumberFieldProps extends
   Omit<AriaNumberFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   StyleProps,
   SpectrumLabelableProps,
-  HelpTextProps {
+  HelpTextProps,
+  Pick<InputProps, 'placeholder'> {
   /**
    * Whether to hide the increment and decrement buttons.
    * @default false
@@ -51,11 +53,7 @@ export interface NumberFieldProps extends
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
-  /**
-   * Temporary text that occupies the text input when it is empty.
-   */
-  placeholder?: string
+  size?: 'S' | 'M' | 'L' | 'XL'
 }
 
 export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 5b15618a34a..0d6965299db 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -14,6 +14,7 @@ import {
   SearchField as AriaSearchField,
   SearchFieldProps as AriaSearchFieldProps,
   ContextValue,
+  InputProps,
   Provider
 } from 'react-aria-components';
 import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
@@ -31,17 +32,13 @@ import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the SearchField.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
-  /**
-   * Temporary text that occupies the text input when it is empty.
-   */
-  placeholder?: string
+  size?: 'S' | 'M' | 'L' | 'XL'
 }
 
 export const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 859e427b992..56b7118a713 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -18,6 +18,7 @@ import {
   composeRenderProps,
   ContextValue,
   InputContext,
+  InputProps,
   useSlottedContext
 } from 'react-aria-components';
 import {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -33,17 +34,13 @@ import {TextFieldRef} from '@react-types/textfield';
 import {usePlaceholderWarning} from './placeholder-utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the text field.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
-  /**
-   * Temporary text that occupies the text input when it is empty.
-   */
-  placeholder?: string
+  size?: 'S' | 'M' | 'L' | 'XL'
 }
 
 export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
diff --git a/packages/@react-spectrum/s2/src/placeholder-utils.tsx b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
index cc3a39c6760..40d88675698 100644
--- a/packages/@react-spectrum/s2/src/placeholder-utils.tsx
+++ b/packages/@react-spectrum/s2/src/placeholder-utils.tsx
@@ -17,7 +17,7 @@ export function usePlaceholderWarning(placeholder: string | undefined, component
   let checkPlaceholder = useEffectEvent((input: HTMLInputElement | null) => {
     if (!placeholder && input) {
       if (getActiveElement(getOwnerDocument(input)) !== input && (!input.value || input.value === '')) {
-        console.warn(`Your ${componentType} is empty and not focused but doesn't have a placeholder. Please add one.`);
+        console.warn(`Your ${componentType} is empty and not focused but doesn't have a placeholder. Please add one to the element with the following id: ${input.id}.`);
       }
     }
   });
diff --git a/packages/react-aria-components/src/Input.tsx b/packages/react-aria-components/src/Input.tsx
index 9cd46c17feb..8c843cd5a13 100644
--- a/packages/react-aria-components/src/Input.tsx
+++ b/packages/react-aria-components/src/Input.tsx
@@ -43,7 +43,13 @@ export interface InputRenderProps {
   isInvalid: boolean
 }
 
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {}
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {
+  /**
+   * Temporary text that occupies the text input when it is empty.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
+   */
+  placeholder?: string | undefined
+}
 
 export const InputContext = createContext<ContextValue<InputProps, HTMLInputElement>>({});
 

From 425d68fee7de253e76389d69bc197bc906262138 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 12 Aug 2025 10:28:16 -0700
Subject: [PATCH 9/9] fix tests

---
 packages/@react-spectrum/s2/test/ColorField.test.tsx |  4 ++--
 packages/@react-spectrum/s2/test/TextField.test.tsx  | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/s2/test/ColorField.test.tsx b/packages/@react-spectrum/s2/test/ColorField.test.tsx
index b16c407ed05..5d38c458f6b 100644
--- a/packages/@react-spectrum/s2/test/ColorField.test.tsx
+++ b/packages/@react-spectrum/s2/test/ColorField.test.tsx
@@ -27,12 +27,12 @@ describe('ColorField', () => {
       <ColorField label="Color" />
     );
 
-    expect(spy).toHaveBeenCalledWith('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    expect(spy).toHaveBeenCalledWith(expect.stringContaining('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: '));
     spy.mockClear();
 
     await user.tab();
     await user.tab();
-    expect(spy).toHaveBeenCalledWith('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    expect(spy).toHaveBeenCalledWith(expect.stringContaining('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: '));
     spy.mockClear();
 
     let input = getByRole('textbox');
diff --git a/packages/@react-spectrum/s2/test/TextField.test.tsx b/packages/@react-spectrum/s2/test/TextField.test.tsx
index 2a30e31b248..9b433598f9a 100644
--- a/packages/@react-spectrum/s2/test/TextField.test.tsx
+++ b/packages/@react-spectrum/s2/test/TextField.test.tsx
@@ -24,15 +24,15 @@ describe('TextField', () => {
   it('should warn if the TextField renders/blurs without a placeholder', async () => {
     let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     let {getByRole, rerender} = render(
-      <TextField label="Name" />
+      <TextField id="1" label="Name" />
     );
 
-    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
     spy.mockClear();
 
     await user.tab();
     await user.tab();
-    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
     spy.mockClear();
 
     let input = getByRole('textbox');
@@ -51,15 +51,15 @@ describe('TextField', () => {
   it('should warn if the TextArea renders/blurs without a placeholder', async () => {
     let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     let {getByRole, rerender} = render(
-      <TextArea label="Name" />
+      <TextArea id="1" label="Name" />
     );
 
-    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
     spy.mockClear();
 
     await user.tab();
     await user.tab();
-    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one.');
+    expect(spy).toHaveBeenCalledWith('Your TextField/Area is empty and not focused but doesn\'t have a placeholder. Please add one to the element with the following id: 1.');
     spy.mockClear();
 
     let input = getByRole('textbox');