From ec67e6cc0d32cc296e6872097201f0f255dc70f2 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 5 May 2026 12:18:01 +1000
Subject: [PATCH 1/6] feat: textfield prefix followup

---
 packages/@react-spectrum/s2/src/TextField.tsx | 22 +++++--------------
 .../s2/stories/TextField.stories.tsx          |  4 ++++
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 4c6e2d8ff24..a472a63f424 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -11,12 +11,11 @@
  */
 
 import {TextArea as AriaTextArea, TextAreaContext as AriaTextAreaContext} from 'react-aria-components/TextArea';
-import {TextContext as AriaTextContext} from 'react-aria-components/Text';
 import {TextField as AriaTextField, TextFieldProps as AriaTextFieldProps} from 'react-aria-components/TextField';
-import {centerBaseline} from './CenterBaseline';
+import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, fontRelative, style} from '../style' with {type: 'macro'};
 import {composeRenderProps} from 'react-aria-components/composeRenderProps';
-import {ContextValue, DEFAULT_SLOT, Provider, useSlottedContext} from 'react-aria-components/slots';
+import {ContextValue, Provider, useSlottedContext} from 'react-aria-components/slots';
 import {controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from './useDOMRef';
@@ -27,7 +26,7 @@ import {IconContext} from './Icon';
 import {InputContext, InputProps} from 'react-aria-components/Input';
 import {mergeRefs} from 'react-aria/mergeRefs';
 import {StyleString} from '../style/types';
-import {Text, TextContext} from './Content';
+import {TextContext} from './Content';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface TextFieldRef<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends FocusableRefValue<T, HTMLDivElement> {
@@ -148,7 +147,6 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
               <Provider 
                 values={[
                   [IconContext, {
-                    render: centerBaseline({}),
                     styles: style({
                       size: fontRelative(20),
                       '--iconPrimary': {
@@ -156,19 +154,11 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
                         value: 'currentColor'
                       }
                     })
-                  }],
-                  [AriaTextContext, {}],
-                  [TextContext, {
-                    slots: {
-                      [DEFAULT_SLOT]: {
-                        styles: style({minWidth: 20, display: 'flex', alignItems: 'center', justifyContent: 'center'})
-                      }
-                    }
                   }]
                 ]}>
-                <div className={style({color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
-                  {typeof props.prefix === 'string' ? <Text>{props.prefix}</Text> : props.prefix}
-                </div>
+                <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+                  {props.prefix}
+                </CenterBaseline>
               </Provider>
               ) : null
             }
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index f23e5a55382..80222b0de01 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {Avatar} from '../src/Avatar';
 import {Button} from '../src/Button';
+import {ColorSwatch} from '../src/ColorSwatch';
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Form} from '../src/Form';
@@ -181,6 +183,8 @@ export const TextFieldWithAddons: StoryTextField = {
       <TextField {...args} label="Phone Number" prefix="#" placeholder="(000) 000-0000" />
       <TextField {...args} label="URL" prefix="https://" placeholder="example.com" />
       <TextField {...args} label="Mention" prefix={<MentionIcon />} placeholder="username" />
+      <TextField {...args} label="User" prefix={<Avatar size={20} src="https://i.imgur.com/xIe7Wlb.png" />} placeholder="username" />
+      <TextField {...args} label="Color" prefix={<ColorSwatch size="XS" color="rgb(255, 0, 255)" />} placeholder="#FF00FF" />
       <Button type="submit" variant="primary">Submit</Button>
     </Form>
   ),

From 425bc7cceb102a575b3d8fa6706e8ff01463bacc Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 5 May 2026 13:39:39 +1000
Subject: [PATCH 2/6] more components

---
 .../@react-spectrum/s2/src/ColorField.tsx     | 21 +++++++++++++++----
 packages/@react-spectrum/s2/src/ComboBox.tsx  | 17 ++++++++++++---
 .../@react-spectrum/s2/src/NumberField.tsx    | 19 ++++++++++++++---
 .../s2/stories/ColorField.stories.tsx         | 17 ++++++++++++++-
 .../s2/stories/ComboBox.stories.tsx           | 17 +++++++++++++++
 .../s2/stories/NumberField.stories.tsx        | 10 +++++++++
 6 files changed, 90 insertions(+), 11 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index b087b60d4de..da94ec828e6 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -12,15 +12,17 @@
 
 import {ColorField as AriaColorField, ColorFieldProps as AriaColorFieldProps} from 'react-aria-components/ColorField';
 
-import {ContextValue} from 'react-aria-components/slots';
-import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
+import {CenterBaseline} from './CenterBaseline';
+import {ContextValue, Provider} from 'react-aria-components/slots';
+import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from './useDOMRef';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
+import {fontRelative, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {IconContext} from './Icon';
 import {InputProps} from 'react-aria-components/Input';
-import {style} from '../style' with {type: 'macro'};
 import {TextFieldRef} from './TextField';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -30,7 +32,11 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The prefix to display in the ColorField. A non-interactive element that appears before the input.
+   */
+  prefix?: ReactNode
 }
 
 export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
@@ -92,6 +98,13 @@ export const ColorField = forwardRef(function ColorField(props: ColorFieldProps,
           {label}
         </FieldLabel>
         <FieldGroup size={props.size}>
+          {props.prefix ? (
+            <Provider values={[[IconContext, {styles: style({size: fontRelative(20), '--iconPrimary': {type: 'fill', value: 'currentColor'}})}]]}>
+              <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+                {props.prefix}
+              </CenterBaseline>
+            </Provider>
+          ) : null}
           <Input ref={inputRef} />
           {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
         </FieldGroup>
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index b05771b8d73..2221de3c951 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -29,9 +29,9 @@ import {PopoverProps as AriaPopoverProps, Placement} from 'react-aria-components
 import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SingleSelection, SpectrumLabelableProps} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
 import {BaseCollection, CollectionNode} from 'react-aria/private/collections/BaseCollection';
-import {baseColor, centerPadding, focusRing, space, style} from '../style' with {type: 'macro'};
+import {baseColor, centerPadding, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
 import {Button, ButtonRenderProps} from 'react-aria-components/Button';
-import {centerBaseline} from './CenterBaseline';
+import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {
   checkmark,
   description,
@@ -76,7 +76,11 @@ export interface ComboboxStyleProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The prefix to display in the ComboBox. A non-interactive element that appears before the input.
+   */
+  prefix?: ReactNode
 }
 export interface ComboBoxProps<T extends object> extends
   Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | keyof GlobalDOMAttributes>,
@@ -607,6 +611,13 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
             // [9, 4], [12, 6], [15, 8], [18, 8]
             paddingEnd: 'calc(self(height, self(minHeight)) * 3 / 16 - self(borderEndWidth, 2px))'
           })({size})}>
+          {props.prefix ? (
+            <Provider values={[[IconContext, {styles: style({size: fontRelative(20), '--iconPrimary': {type: 'fill', value: 'currentColor'}})}]]}>
+              <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+                {props.prefix}
+              </CenterBaseline>
+            </Provider>
+          ) : null}
           <InputContext.Consumer>
             {ctx => (
               <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index f2478553fc4..224af6d5ff2 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -13,8 +13,9 @@
 import Add from '../ui-icons/Add';
 import {ButtonProps as AriaButtonProps, ButtonContext, ButtonRenderProps} from 'react-aria-components/Button';
 import {NumberField as AriaNumberField, NumberFieldProps as AriaNumberFieldProps} from 'react-aria-components/NumberField';
-import {baseColor, space, style} from '../style' with {type: 'macro'};
-import {ContextValue, useContextProps} from 'react-aria-components/slots';
+import {baseColor, fontRelative, space, style} from '../style' with {type: 'macro'};
+import {CenterBaseline} from './CenterBaseline';
+import {ContextValue, Provider, useContextProps} from 'react-aria-components/slots';
 import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';
 import {createFocusableRef} from './useDOMRef';
@@ -23,6 +24,7 @@ import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {FormContext, useFormProps} from './Form';
 import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {IconContext} from './Icon';
 import {InputContext, InputProps} from 'react-aria-components/Input';
 import {mergeProps} from 'react-aria/mergeProps';
 import {mergeRefs} from 'react-aria/mergeRefs';
@@ -50,7 +52,11 @@ export interface NumberFieldProps extends
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The prefix to display in the NumberField. A non-interactive element that appears before the input.
+   */
+  prefix?: ReactNode
 }
 
 export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
@@ -208,6 +214,13 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                       isStepperHidden: 'edge-to-text'
                     }
                   })({size, isStepperHidden: hideStepper})}>
+                  {props.prefix ? (
+                    <Provider values={[[IconContext, {styles: style({size: fontRelative(20), '--iconPrimary': {type: 'fill', value: 'currentColor'}})}]]}>
+                      <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+                        {props.prefix}
+                      </CenterBaseline>
+                    </Provider>
+                  ) : null}
                   <InputContext.Consumer>
                     {ctx => (
                       <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
index b72ed550603..6a6a56e2208 100644
--- a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
@@ -10,12 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorField} from '../src/ColorField';
+import {Color} from 'react-aria-components/ColorField';
+import {ColorField, ColorFieldProps} from '../src/ColorField';
+import {ColorSwatch} from '../src/ColorSwatch';
 
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Link} from '../src/Link';
 import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
 
 const meta: Meta<typeof ColorField> = {
   component: ColorField,
@@ -72,3 +75,15 @@ export const ContextualHelpExample: Story = {
     label: 'Color'
   }
 };
+
+function ColorSwatchExample(props: ColorFieldProps) {
+  let [color, setColor] = useState<Color | null>(null);
+  return <ColorField {...props} value={color} onChange={setColor} prefix={<ColorSwatch size="XS" color={color ?? undefined} />} />;
+}
+
+export const WithPrefix: Story = {
+  render: (args) => <ColorSwatchExample {...args} />,
+  args: {
+    label: 'Color'
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
index 4498c2ddcc6..13ae3206cba 100644
--- a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -393,3 +393,20 @@ export const ComboboxInsideDialog: Story = {
   ),
   args: Example.args
 };
+
+
+export const WithPrefix: Story = {
+  render: (args: ComboBoxProps<any>) => (
+    <ComboBox {...args}>
+      <ComboBoxItem>Chocolate</ComboBoxItem>
+      <ComboBoxItem>Mint</ComboBoxItem>
+      <ComboBoxItem>Strawberry</ComboBoxItem>
+      <ComboBoxItem>Vanilla</ComboBoxItem>
+      <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
+    </ComboBox>
+  ),
+  args: {
+    prefix: <Avatar size={20} src="https://i.imgur.com/xIe7Wlb.png" />,
+    label: 'User ice cream flavor'
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
index ea2d2d56c37..da7ab4aea2e 100644
--- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
@@ -102,3 +102,13 @@ export const ContextualHelpExample: Story = {
     label: 'Quantity'
   }
 };
+
+export const WithPrefix: Story = {
+  render: (args) => (
+    <NumberField {...args} />
+  ),
+  args: {
+    label: 'Quantity',
+    prefix: 'USD'
+  }
+};

From 49a214dc4c4ecb6cbe5797ad3713b386e3b817d5 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 5 May 2026 13:43:56 +1000
Subject: [PATCH 3/6] better numberfield example

---
 packages/@react-spectrum/s2/stories/NumberField.stories.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
index da7ab4aea2e..4c6e54296a2 100644
--- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
@@ -105,10 +105,11 @@ export const ContextualHelpExample: Story = {
 
 export const WithPrefix: Story = {
   render: (args) => (
-    <NumberField {...args} />
+    <NumberField {...args} formatOptions={{style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol'}} />
   ),
   args: {
-    label: 'Quantity',
+    label: 'Value',
+    placeholder: '0.00',
     prefix: 'USD'
   }
 };

From c186c18432e20b669d15fee0f0eb5c678b31ac22 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 5 May 2026 13:45:25 +1000
Subject: [PATCH 4/6] fix prop description

---
 packages/@react-spectrum/s2/src/TextField.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index a472a63f424..96963141f6b 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -42,7 +42,8 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**
-   * The prefix to display in the text field. Either a string or workflow icon.
+   * The prefix to display in the text field. 
+   * A non-interactive element that appears before the input.
    */
   prefix?: ReactNode
 }

From f7324aade14214827a7460592612c03fbee26183 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 5 May 2026 14:43:29 +1000
Subject: [PATCH 5/6] Add label logic and tests

---
 .../@react-spectrum/s2/src/CenterBaseline.tsx |  6 ++++-
 .../@react-spectrum/s2/src/ColorField.tsx     | 19 +++++++++++---
 packages/@react-spectrum/s2/src/ComboBox.tsx  | 10 +++++--
 .../@react-spectrum/s2/src/NumberField.tsx    | 10 +++++--
 packages/@react-spectrum/s2/src/TextField.tsx | 13 +++++++---
 .../s2/test/ColorField.test.tsx               | 26 +++++++++++++++++++
 .../@react-spectrum/s2/test/Combobox.test.tsx | 14 ++++++++++
 .../s2/test/NumberField.test.tsx              | 26 +++++++++++++++++++
 .../s2/test/TextField.test.tsx                | 12 ++++++++-
 9 files changed, 124 insertions(+), 12 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/test/ColorField.test.tsx
 create mode 100644 packages/@react-spectrum/s2/test/NumberField.test.tsx

diff --git a/packages/@react-spectrum/s2/src/CenterBaseline.tsx b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
index 58e5fecc998..9ce12beca6a 100644
--- a/packages/@react-spectrum/s2/src/CenterBaseline.tsx
+++ b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
@@ -15,8 +15,10 @@ import {CSSProperties, ReactNode} from 'react';
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
+import { DOMAttributes } from '@react-types/shared';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 
-interface CenterBaselineProps {
+interface CenterBaselineProps extends DOMAttributes {
   style?: CSSProperties,
   styles?: StyleString,
   children: ReactNode,
@@ -29,8 +31,10 @@ const styles = style({
 });
 
 export function CenterBaseline(props: CenterBaselineProps): ReactNode {
+  let domProps = filterDOMProps(props);
   return (
     <div
+      {...domProps}
       slot={props.slot}
       style={props.style}
       className={mergeStyles(styles, props.styles) + ' ' + centerBaselineBefore}>
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index da94ec828e6..047d76c68ad 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -22,8 +22,10 @@ import {fontRelative, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';
-import {InputProps} from 'react-aria-components/Input';
+import {InputContext, InputProps} from 'react-aria-components/Input';
+import {mergeRefs} from 'react-aria/mergeRefs';
 import {TextFieldRef} from './TextField';
+import {useId} from 'react-aria/useId';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
@@ -76,6 +78,7 @@ export const ColorField = forwardRef(function ColorField(props: ColorFieldProps,
     }
   }));
 
+  let prefixId = useId();
   return (
     <AriaColorField
       {...fieldProps}
@@ -100,12 +103,22 @@ export const ColorField = forwardRef(function ColorField(props: ColorFieldProps,
         <FieldGroup size={props.size}>
           {props.prefix ? (
             <Provider values={[[IconContext, {styles: style({size: fontRelative(20), '--iconPrimary': {type: 'fill', value: 'currentColor'}})}]]}>
-              <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+              <CenterBaseline id={prefixId} styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
                 {props.prefix}
               </CenterBaseline>
             </Provider>
           ) : null}
-          <Input ref={inputRef} />
+          <InputContext.Consumer>
+            {ctx => (
+              <InputContext.Provider value={{
+                ...ctx, 
+                'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
+                ref: mergeRefs((ctx as any)?.ref, 
+                inputRef)}}>
+                <Input />
+              </InputContext.Provider>
+            )}
+          </InputContext.Consumer>
           {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
         </FieldGroup>
         <HelpText
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 2221de3c951..209a7e1b184 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -64,6 +64,7 @@ import {Popover} from './Popover';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {TextFieldRef} from './TextField';
+import {useId} from 'react-aria/useId';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useScale} from './utils';
 import {useSlotId} from 'react-aria/private/utils/useId';
@@ -585,6 +586,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
     );
   }
   let scale = useScale();
+  let prefixId = useId();
 
   return (
     <>
@@ -613,14 +615,18 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
           })({size})}>
           {props.prefix ? (
             <Provider values={[[IconContext, {styles: style({size: fontRelative(20), '--iconPrimary': {type: 'fill', value: 'currentColor'}})}]]}>
-              <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+              <CenterBaseline id={prefixId} styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
                 {props.prefix}
               </CenterBaseline>
             </Provider>
           ) : null}
           <InputContext.Consumer>
             {ctx => (
-              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
+              <InputContext.Provider value={{
+                ...ctx, 
+                'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
+                ref: mergeRefs((ctx as any)?.ref, 
+                inputRef)}}>
                 <Input aria-describedby={spinnerId} />
               </InputContext.Provider>
             )}
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index 224af6d5ff2..936084caed3 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -33,6 +33,7 @@ import {TextFieldRef} from './TextField';
 import {useButton} from 'react-aria/useButton';
 import {useFocusRing} from 'react-aria/useFocusRing';
 import {useHover} from 'react-aria/useHover';
+import {useId} from 'react-aria/useId';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
@@ -179,6 +180,7 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
     }
   }));
 
+  let prefixId = useId();
   return (
     <AriaNumberField
       ref={domRef}
@@ -216,14 +218,18 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                   })({size, isStepperHidden: hideStepper})}>
                   {props.prefix ? (
                     <Provider values={[[IconContext, {styles: style({size: fontRelative(20), '--iconPrimary': {type: 'fill', value: 'currentColor'}})}]]}>
-                      <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+                      <CenterBaseline id={prefixId} styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
                         {props.prefix}
                       </CenterBaseline>
                     </Provider>
                   ) : null}
                   <InputContext.Consumer>
                     {ctx => (
-                      <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
+                      <InputContext.Provider value={{
+                        ...ctx, 
+                        'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
+                        ref: mergeRefs((ctx as any)?.ref, 
+                        inputRef)}}>
                         <Input />
                       </InputContext.Provider>
                     )}
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 96963141f6b..81e37692202 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -28,6 +28,7 @@ import {mergeRefs} from 'react-aria/mergeRefs';
 import {StyleString} from '../style/types';
 import {TextContext} from './Content';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
+import { useId } from 'react-aria/useId';
 
 export interface TextFieldRef<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends FocusableRefValue<T, HTMLDivElement> {
   select(): void,
@@ -57,8 +58,10 @@ export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProp
  */
 export const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);
+  let prefixId = useId();
   return (
     <TextFieldBase
+      prefixId={prefixId}
       {...props}
       ref={ref}>
       <Input />
@@ -90,7 +93,7 @@ export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref:
   );
 });
 
-export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
+export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString, prefixId?: string}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useRef<HTMLDivElement>(null);
   let formContext = useContext(FormContext);
@@ -157,7 +160,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
                     })
                   }]
                 ]}>
-                <CenterBaseline styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
+                <CenterBaseline id={props.prefixId} styles={style({minWidth: 20, color: 'gray-600', flexShrink: 0, marginEnd: 'text-to-visual'})}>
                   {props.prefix}
                 </CenterBaseline>
               </Provider>
@@ -165,7 +168,11 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
             }
             <InputContext.Consumer>
               {ctx => (
-                <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
+                <InputContext.Provider value={{
+                  ...ctx, 
+                  'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${props.prefixId}` : props.prefixId,
+                  ref: mergeRefs((ctx as any)?.ref, 
+                  inputRef)}}>
                   {children}
                 </InputContext.Provider>
               )}
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..27e41890b41
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/ColorField.test.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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 {render} from '@react-spectrum/test-utils-internal';
+import {ColorField} from '../src/ColorField';
+
+describe('ColorField', () => {
+  it('should label the input with the prefix', () => {
+    let {getByRole} = render(
+      <ColorField label="Description" prefix="Prefix" />
+    );
+
+    let input = getByRole('textbox');
+    let labels = input.getAttribute('aria-labelledby')?.split(' ');
+    expect(document.getElementById(labels![1])).toHaveTextContent('Prefix');
+  });
+});
diff --git a/packages/@react-spectrum/s2/test/Combobox.test.tsx b/packages/@react-spectrum/s2/test/Combobox.test.tsx
index f925a5a137d..a4777e09c73 100644
--- a/packages/@react-spectrum/s2/test/Combobox.test.tsx
+++ b/packages/@react-spectrum/s2/test/Combobox.test.tsx
@@ -259,4 +259,18 @@ describe('Combobox', () => {
     await user.click(backdrop!);
     expect(dialogTester.dialog).toBeNull();
   });
+
+  it('should label the input with the prefix', () => {
+    let {getByRole} = render(
+      <ComboBox label="Description" prefix="Prefix">
+        <ComboBoxItem>Item 1</ComboBoxItem>
+        <ComboBoxItem>Item 2</ComboBoxItem>
+        <ComboBoxItem>Item 3</ComboBoxItem>
+      </ComboBox>
+    );
+
+    let input = getByRole('combobox');
+    let labels = input.getAttribute('aria-labelledby')?.split(' ');
+    expect(document.getElementById(labels![1])).toHaveTextContent('Prefix');
+  });
 });
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..a2da96dbe9b
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/NumberField.test.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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 {render} from '@react-spectrum/test-utils-internal';
+import {NumberField} from '../src/NumberField';
+
+describe('NumberField', () => {
+  it('should label the input with the prefix', () => {
+    let {getByRole} = render(
+      <NumberField label="Description" prefix="Prefix" />
+    );
+
+    let input = getByRole('textbox');
+    let labels = input.getAttribute('aria-labelledby')?.split(' ');
+    expect(document.getElementById(labels![1])).toHaveTextContent('Prefix');
+  });
+});
diff --git a/packages/@react-spectrum/s2/test/TextField.test.tsx b/packages/@react-spectrum/s2/test/TextField.test.tsx
index 10e27add725..aa7552590f8 100644
--- a/packages/@react-spectrum/s2/test/TextField.test.tsx
+++ b/packages/@react-spectrum/s2/test/TextField.test.tsx
@@ -11,7 +11,7 @@
  */
 
 import {fireEvent, render} from '@react-spectrum/test-utils-internal';
-import {TextArea} from '../src/TextField';
+import {TextArea, TextField} from '../src/TextField';
 
 describe('TextField', () => {
   it('should focus textarea when tapping invalid icon', async () => {
@@ -29,4 +29,14 @@ describe('TextField', () => {
 
     expect(document.activeElement).toBe(textarea);
   });
+
+  it('should label the input with the prefix', () => {
+    let {getByRole} = render(
+      <TextField label="Description" prefix="Prefix" />
+    );
+
+    let input = getByRole('textbox');
+    let labels = input.getAttribute('aria-labelledby')?.split(' ');
+    expect(document.getElementById(labels![1])).toHaveTextContent('Prefix');
+  });
 });

From 78c0f0a1819efc5cf7215c9ae69ac0fa85fb02f7 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 5 May 2026 14:53:45 +1000
Subject: [PATCH 6/6] fix lint and tests

---
 packages/@react-spectrum/s2/src/CenterBaseline.tsx    |  4 ++--
 packages/@react-spectrum/s2/src/ColorField.tsx        |  9 +++++----
 packages/@react-spectrum/s2/src/ComboBox.tsx          |  9 +++++----
 packages/@react-spectrum/s2/src/NumberField.tsx       |  9 +++++----
 packages/@react-spectrum/s2/src/TextField.tsx         | 11 ++++++-----
 packages/@react-spectrum/s2/test/ColorField.test.tsx  |  2 +-
 packages/@react-spectrum/s2/test/NumberField.test.tsx |  2 +-
 7 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/CenterBaseline.tsx b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
index 9ce12beca6a..6112410fed8 100644
--- a/packages/@react-spectrum/s2/src/CenterBaseline.tsx
+++ b/packages/@react-spectrum/s2/src/CenterBaseline.tsx
@@ -12,11 +12,11 @@
 
 import {css} from '../style/style-macro' with {type: 'macro'};
 import {CSSProperties, ReactNode} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
-import { DOMAttributes } from '@react-types/shared';
-import { filterDOMProps } from 'react-aria/filterDOMProps';
 
 interface CenterBaselineProps extends DOMAttributes {
   style?: CSSProperties,
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index 047d76c68ad..431a60684ba 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -110,10 +110,11 @@ export const ColorField = forwardRef(function ColorField(props: ColorFieldProps,
           ) : null}
           <InputContext.Consumer>
             {ctx => (
-              <InputContext.Provider value={{
-                ...ctx, 
-                'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
-                ref: mergeRefs((ctx as any)?.ref, 
+              <InputContext.Provider
+                value={{
+                  ...ctx, 
+                  'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
+                  ref: mergeRefs((ctx as any)?.ref, 
                 inputRef)}}>
                 <Input />
               </InputContext.Provider>
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 209a7e1b184..86b4313f5b4 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -622,10 +622,11 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
           ) : null}
           <InputContext.Consumer>
             {ctx => (
-              <InputContext.Provider value={{
-                ...ctx, 
-                'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
-                ref: mergeRefs((ctx as any)?.ref, 
+              <InputContext.Provider
+                value={{
+                  ...ctx, 
+                  'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
+                  ref: mergeRefs((ctx as any)?.ref, 
                 inputRef)}}>
                 <Input aria-describedby={spinnerId} />
               </InputContext.Provider>
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index 936084caed3..936c4ed258c 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -225,10 +225,11 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                   ) : null}
                   <InputContext.Consumer>
                     {ctx => (
-                      <InputContext.Provider value={{
-                        ...ctx, 
-                        'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
-                        ref: mergeRefs((ctx as any)?.ref, 
+                      <InputContext.Provider
+                        value={{
+                          ...ctx, 
+                          'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${prefixId}` : prefixId,
+                          ref: mergeRefs((ctx as any)?.ref, 
                         inputRef)}}>
                         <Input />
                       </InputContext.Provider>
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 81e37692202..817071fbe63 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -27,8 +27,8 @@ import {InputContext, InputProps} from 'react-aria-components/Input';
 import {mergeRefs} from 'react-aria/mergeRefs';
 import {StyleString} from '../style/types';
 import {TextContext} from './Content';
+import {useId} from 'react-aria/useId';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
-import { useId } from 'react-aria/useId';
 
 export interface TextFieldRef<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends FocusableRefValue<T, HTMLDivElement> {
   select(): void,
@@ -168,10 +168,11 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
             }
             <InputContext.Consumer>
               {ctx => (
-                <InputContext.Provider value={{
-                  ...ctx, 
-                  'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${props.prefixId}` : props.prefixId,
-                  ref: mergeRefs((ctx as any)?.ref, 
+                <InputContext.Provider
+                  value={{
+                    ...ctx, 
+                    'aria-labelledby': ctx?.['aria-labelledby'] ? `${ctx?.['aria-labelledby']} ${props.prefixId}` : props.prefixId,
+                    ref: mergeRefs((ctx as any)?.ref, 
                   inputRef)}}>
                   {children}
                 </InputContext.Provider>
diff --git a/packages/@react-spectrum/s2/test/ColorField.test.tsx b/packages/@react-spectrum/s2/test/ColorField.test.tsx
index 27e41890b41..d1e72b7f8e2 100644
--- a/packages/@react-spectrum/s2/test/ColorField.test.tsx
+++ b/packages/@react-spectrum/s2/test/ColorField.test.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {render} from '@react-spectrum/test-utils-internal';
 import {ColorField} from '../src/ColorField';
+import {render} from '@react-spectrum/test-utils-internal';
 
 describe('ColorField', () => {
   it('should label the input with the prefix', () => {
diff --git a/packages/@react-spectrum/s2/test/NumberField.test.tsx b/packages/@react-spectrum/s2/test/NumberField.test.tsx
index a2da96dbe9b..cb536c9be47 100644
--- a/packages/@react-spectrum/s2/test/NumberField.test.tsx
+++ b/packages/@react-spectrum/s2/test/NumberField.test.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {render} from '@react-spectrum/test-utils-internal';
 import {NumberField} from '../src/NumberField';
+import {render} from '@react-spectrum/test-utils-internal';
 
 describe('NumberField', () => {
   it('should label the input with the prefix', () => {