diff --git a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
index 6b36960b013..f74206e0e74 100644
--- a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx
@@ -16,6 +16,7 @@ import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Form} from '../src/Form';
 import {Link} from '../src/Link';
+import Magnifier from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {TextArea, TextField} from '../src/TextField';
@@ -42,6 +43,21 @@ export const Example: Story = {
   }
 };
 
+export const ExampleWithPrefixText: Story = {
+  render: (args) => <TextField {...args} prefix="#" />,
+  args: {
+    label: 'Name',
+    placeholder: 'Enter your name'
+  }
+};
+
+export const ExampleWithPrefixIcon: Story = {
+  render: (args) => <TextField {...args} prefix={<Magnifier />} />,
+  args: {
+    label: 'Name',
+    placeholder: 'Enter your name'
+  }
+};
 export const Validation: Story = {
   render: (args) => (
     <Form>
@@ -90,6 +106,22 @@ export const TextAreaExample: StoryObj<typeof TextArea> = {
   }
 };
 
+export const TextAreaExampleWithPrefixText: StoryObj<typeof TextArea> = {
+  render: (args) => <TextArea {...args} prefix="#" />,
+  args: {
+    label: 'Comment',
+    placeholder: 'Enter your name'
+  }
+};
+
+export const TextAreaExampleWithPrefixIcon: StoryObj<typeof TextArea> = {
+  render: (args) => <TextArea {...args} prefix={<Magnifier />} />,
+  args: {
+    label: 'Comment',
+    placeholder: 'Enter your name'
+  }
+};
+
 export const CustomWidth: Story = {
   render: (args) => <TextField {...args} styles={style({width: 384})} />,
   args: {
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index d58621974b1..01c4aa5ca02 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -29,7 +29,7 @@ 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 {
@@ -43,7 +43,7 @@ import {
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
 import {Collection} from 'react-aria/Collection';
-import {ContextValue, Provider} from 'react-aria-components/slots';
+import {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';
 import {control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createFocusableRef} from './useDOMRef';
@@ -63,6 +63,7 @@ import {Node} from '@react-types/shared';
 import {Popover} from './Popover';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
+import {TextContext as AriaTextContext} from 'react-aria-components/Text';
 import {TextFieldRef} from './TextField';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
@@ -77,7 +78,11 @@ export interface ComboboxStyleProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The prefix to display in the combobox. Either a string or workflow icon.
+   */
+  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>,
@@ -626,6 +631,34 @@ 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, {
+                  render: centerBaseline({}),
+                  styles: style({
+                    size: fontRelative(20),
+                    '--iconPrimary': {
+                      type: 'fill',
+                      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>
+            </Provider>
+            ) : null
+          }
           <InputContext.Consumer>
             {ctx => (
               <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 08587e52826..4c6e2d8ff24 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -11,19 +11,23 @@
  */
 
 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 {centerPadding, style} from '../style' with {type: 'macro'};
+import {centerBaseline} from './CenterBaseline';
+import {centerPadding, fontRelative, style} from '../style' with {type: 'macro'};
 import {composeRenderProps} from 'react-aria-components/composeRenderProps';
-import {ContextValue, useSlottedContext} from 'react-aria-components/slots';
+import {ContextValue, DEFAULT_SLOT, 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';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FocusableRefValue, GlobalDOMAttributes, HelpTextProps, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
+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 {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface TextFieldRef<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends FocusableRefValue<T, HTMLDivElement> {
@@ -37,7 +41,11 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The prefix to display in the text field. Either a string or workflow icon.
+   */
+  prefix?: ReactNode
 }
 
 export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
@@ -135,14 +143,44 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
           {label}
         </FieldLabel>
         <FieldGroup size={props.size} styles={fieldGroupCss}>
-          <InputContext.Consumer>
-            {ctx => (
-              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
-                {children}
-              </InputContext.Provider>
-            )}
-          </InputContext.Consumer>
-          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
+          <Provider values={[[TextContext, {}]]}>
+            {props.prefix ? (
+              <Provider 
+                values={[
+                  [IconContext, {
+                    render: centerBaseline({}),
+                    styles: style({
+                      size: fontRelative(20),
+                      '--iconPrimary': {
+                        type: 'fill',
+                        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>
+              </Provider>
+              ) : null
+            }
+            <InputContext.Consumer>
+              {ctx => (
+                <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
+                  {children}
+                </InputContext.Provider>
+              )}
+            </InputContext.Consumer>
+            {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
+          </Provider>
         </FieldGroup>
         <HelpText
           size={props.size}
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index 475241e8560..f23e5a55382 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -11,11 +11,11 @@
  */
 
 import {Button} from '../src/Button';
-
 import {Content, Footer, Heading, Text} from '../src/Content';
 import {ContextualHelp} from '../src/ContextualHelp';
 import {Form} from '../src/Form';
 import {Link} from '../src/Link';
+import MentionIcon from '../s2wf-icons/S2_Icon_Mention_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 import {TextArea, TextField} from '../src/TextField';
@@ -174,3 +174,32 @@ export const FormCustomWidth: StoryTextField = {
     }
   }
 };
+
+export const TextFieldWithAddons: StoryTextField = {
+  render: (args) => (
+    <Form>
+      <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" />
+      <Button type="submit" variant="primary">Submit</Button>
+    </Form>
+  ),
+  args: {
+    ...Example.args,
+    isRequired: true
+  }
+};
+
+export const TextAreaWithAddons: StoryTextArea = {
+  render: (args) => (
+    <Form>
+      <TextArea {...args} label="Phone Number" prefix="#" placeholder="(000) 000-0000" />
+      <TextArea {...args} label="Mention" prefix={<MentionIcon />} placeholder="username" />
+      <Button type="submit" variant="primary">Submit</Button>
+    </Form>
+  ),
+  args: {
+    ...TextAreaExample.args,
+    isRequired: true
+  }
+};
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
index 3cbae5954a0..301f1558fae 100644
--- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -118,6 +118,24 @@ const users = Array.from({length: 5}, (_, i) => ({
   <Content>Interactive elements (e.g. buttons) within ComboBox items are not allowed. This will break keyboard and screen reader navigation. Only add textual or decorative graphics (e.g. icons) as children.</Content>
 </InlineAlert>
 
+### Prefix
+
+Use the `prefix` prop to display a prefix in the combobox.
+
+```tsx render
+"use client";
+import {ComboBox, ComboBoxItem} from '@react-spectrum/s2/ComboBox';
+
+<ComboBox label="Phone number" placeholder="(000) 000-0000" prefix="#">
+  <ComboBoxItem>(123) 456-7890</ComboBoxItem>
+  <ComboBoxItem>(123) 456-7891</ComboBoxItem>
+  <ComboBoxItem>(123) 456-7892</ComboBoxItem>
+  <ComboBoxItem>(123) 456-7893</ComboBoxItem>
+  <ComboBoxItem>(123) 456-7894</ComboBoxItem>
+  <ComboBoxItem>(123) 456-7895</ComboBoxItem>
+</ComboBox>
+```
+
 ### Sections
 
 Use the `<ComboBoxSection>` component to group options. A `<Header>` element, with a `<Heading>` and optional `description` slot can be included to label a section. Sections without a header must have an `aria-label`.
diff --git a/packages/dev/s2-docs/pages/s2/TextArea.mdx b/packages/dev/s2-docs/pages/s2/TextArea.mdx
index ee732267e4c..cd514c816b0 100644
--- a/packages/dev/s2-docs/pages/s2/TextArea.mdx
+++ b/packages/dev/s2-docs/pages/s2/TextArea.mdx
@@ -50,6 +50,26 @@ function Example() {
 }
 ```
 
+## Prefix
+
+Use the `prefix` prop to display a prefix in the text area. Either a string or workflow icon.
+
+```tsx render
+"use client";
+import {TextArea} from '@react-spectrum/s2/TextArea';
+import MentionIcon from '@react-spectrum/s2/icons/Mention';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+function Example() {
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
+      <TextArea label="Irrational number" prefix="#" placeholder="3.1415926535897932384626433832795028841971" />
+      <TextArea label="Mention" prefix={<MentionIcon />} placeholder="username" />
+    </div>
+  );
+}
+```
+
 ## Forms
 
 Use the `name` prop to submit the text value to the server. Set the `isRequired`, `minLength`, or `maxLength` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.
diff --git a/packages/dev/s2-docs/pages/s2/TextField.mdx b/packages/dev/s2-docs/pages/s2/TextField.mdx
index 1facb16d6d4..c7adbdd5c6f 100644
--- a/packages/dev/s2-docs/pages/s2/TextField.mdx
+++ b/packages/dev/s2-docs/pages/s2/TextField.mdx
@@ -50,6 +50,26 @@ function Example() {
 }
 ```
 
+## Prefix
+
+Use the `prefix` prop to display a prefix in the text field. Either a string or workflow icon.
+
+```tsx render
+"use client";
+import {TextField} from '@react-spectrum/s2/TextField';
+import MentionIcon from '@react-spectrum/s2/icons/Mention';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+function Example() {
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
+      <TextField label="Phone Number" prefix="#" placeholder="(000) 000-0000" type="tel" />
+      <TextField label="URL" prefix="https://" placeholder="example.com" />
+      <TextField label="Mention" prefix={<MentionIcon />} placeholder="username" />
+    </div>
+  );
+}
+```
 ## Forms
 
 Use the `name` prop to submit the text value to the server. Set the `isRequired`, `minLength`, `maxLength`, `pattern`, or `type` props to validate the value, or implement custom client or server-side validation. See the [Forms](forms) guide to learn more.