From c6a8694e926a895048900b219b58e77824388830 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Thu, 14 May 2026 15:50:52 +1000
Subject: [PATCH] chore: design feedback examples

---
 packages/dev/s2-docs/pages/s2/NumberField.mdx | 33 +++++++++++++++----
 packages/dev/s2-docs/pages/s2/TextField.mdx   |  1 -
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/NumberField.mdx b/packages/dev/s2-docs/pages/s2/NumberField.mdx
index ecd008d527e..64c1891fc2c 100644
--- a/packages/dev/s2-docs/pages/s2/NumberField.mdx
+++ b/packages/dev/s2-docs/pages/s2/NumberField.mdx
@@ -117,16 +117,35 @@ Use the `prefix` prop to display an additional element before the input in the n
 ```tsx render
 "use client";
 import {NumberField} from '@react-spectrum/s2/NumberField';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example() {
   return (
-    <NumberField
-      label="Price"
-      /*- begin highlight -*/
-      prefix="USD"
-      /*- end highlight -*/
-      formatOptions={{style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol'}}
-      placeholder="0.00" />
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
+      <div style={{font: 'title'}}>Dimensions</div>
+      <div className={style({display: 'flex', flexDirection: 'row', gap: 8})}>
+        <NumberField
+          aria-label="Width"
+          /*- begin highlight -*/
+          prefix="W"
+          /*- end highlight -*/
+          formatOptions={{style: 'unit', unit: 'inch'}}
+          defaultValue={10}
+          placeholder="0"
+          styles={style({width: 100})}
+          hideStepper />
+        <NumberField
+          aria-label="Height"
+          /*- begin highlight -*/
+          prefix="H"
+          /*- end highlight -*/
+          formatOptions={{style: 'unit', unit: 'inch'}}
+          defaultValue={10}
+          placeholder="0"
+          styles={style({width: 100})}
+          hideStepper />
+      </div>
+    </div>
   );
 }
 ```
diff --git a/packages/dev/s2-docs/pages/s2/TextField.mdx b/packages/dev/s2-docs/pages/s2/TextField.mdx
index bd8da618e7b..c355994b1d3 100644
--- a/packages/dev/s2-docs/pages/s2/TextField.mdx
+++ b/packages/dev/s2-docs/pages/s2/TextField.mdx
@@ -64,7 +64,6 @@ import {Avatar} from '@react-spectrum/s2/Avatar';
 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" />
       <TextField label="User Email" prefix={<Avatar size={20} src="https://i.imgur.com/xIe7Wlb.png" />} placeholder="contact@example.com" />