From 3f0208c10a966cdc465cbe2bc3bdf02bf3d251fb Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 12 May 2026 17:02:52 -0700
Subject: [PATCH 1/9] chore: LabeledValue follow-ups

---
 .../dev/s2-docs/pages/s2/LabeledValue.mdx     | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
index 65c7d164a5b..df0b53398c1 100644
--- a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
+++ b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
@@ -17,7 +17,7 @@ export const description = 'Displays a non-editable value with a label';
   component={LabeledValue}
   docs={types.exports.LabeledValueProps}
   links={types.links}
-  props={['label', 'size', 'labelPosition', 'labelAlign', 'contextualHelp']}
+  props={['label', 'size', 'labelPosition', 'contextualHelp']}
   initialProps={{
     label: 'File name',
     value: 'Budget.pdf'
@@ -133,6 +133,34 @@ import {Link} from '@react-spectrum/s2/Link';
 <LabeledValue label="Website" value={<Link href="https://www.adobe.com/">Adobe.com</Link>} />
 ```
 
+## Form
+
+Use `LabeledValue` within a `Form` to display non-editable information alongside editable fields.
+
+```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled', 'isEmphasized']} type="s2"
+"use client";
+import {Button} from '@react-spectrum/s2/Button';
+import {Form} from '@react-spectrum/s2/Form';
+import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
+import {NumberField} from '@react-spectrum/s2/NumberField';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Form/* PROPS */>
+  <NumberField
+    label="Planned hours"
+    placeholder="–"
+    defaultValue={1} />
+  <LabeledValue 
+    label="Actual hours"
+    value={0} />
+  <Button
+    type="submit"
+    variant="primary">
+    Submit
+  </Button>
+</Form>
+```
+
 
 ## API
 

From 0f63bce0320ecd437bbd95bdf27359cb1e702382 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 12 May 2026 17:08:06 -0700
Subject: [PATCH 2/9] add labeled value to example apps

---
 examples/s2-next-macros/src/app/Lazy.js   | 2 ++
 examples/s2-parcel-example/src/Lazy.js    | 2 ++
 examples/s2-webpack-5-example/src/Lazy.js | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/examples/s2-next-macros/src/app/Lazy.js b/examples/s2-next-macros/src/app/Lazy.js
index 03a6588e437..23087283f74 100644
--- a/examples/s2-next-macros/src/app/Lazy.js
+++ b/examples/s2-next-macros/src/app/Lazy.js
@@ -60,6 +60,7 @@ import {
   Image,
   InlineAlert,
   Keyboard,
+  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -162,6 +163,7 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
+          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />
diff --git a/examples/s2-parcel-example/src/Lazy.js b/examples/s2-parcel-example/src/Lazy.js
index 9a48bea9d3f..524c6d44e9e 100644
--- a/examples/s2-parcel-example/src/Lazy.js
+++ b/examples/s2-parcel-example/src/Lazy.js
@@ -46,6 +46,7 @@ import {
   Image,
   InlineAlert,
   Keyboard,
+  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -148,6 +149,7 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
+          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />
diff --git a/examples/s2-webpack-5-example/src/Lazy.js b/examples/s2-webpack-5-example/src/Lazy.js
index 9a48bea9d3f..524c6d44e9e 100644
--- a/examples/s2-webpack-5-example/src/Lazy.js
+++ b/examples/s2-webpack-5-example/src/Lazy.js
@@ -46,6 +46,7 @@ import {
   Image,
   InlineAlert,
   Keyboard,
+  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -148,6 +149,7 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
+          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />

From 7ab8ef768b10d526caed8d3d2923a3313d0eeb6e Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 12 May 2026 17:08:17 -0700
Subject: [PATCH 3/9] fix segmented control in vite example app

---
 examples/s2-vite-project/src/Lazy.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/s2-vite-project/src/Lazy.tsx b/examples/s2-vite-project/src/Lazy.tsx
index c89fb630588..dcb912f92f7 100644
--- a/examples/s2-vite-project/src/Lazy.tsx
+++ b/examples/s2-vite-project/src/Lazy.tsx
@@ -46,6 +46,7 @@ import {
   Image,
   InlineAlert,
   Keyboard,
+  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -148,6 +149,7 @@ export default function Lazy() {
           <TextArea label="Description" />
           <TextField label="Email" />
           <TextField label="Password" />
+          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />
@@ -202,7 +204,7 @@ export default function Lazy() {
           The missing link.
         </Link>
         <Link href="/foo">Foo</Link>
-        <SegmentedControl aria-label="Time granularity" styles={style({width: 384})}>
+        <SegmentedControl aria-label="Time granularity" styles={style({width: 384})} isJustified>
           <SegmentedControlItem id="day">Day</SegmentedControlItem>
           <SegmentedControlItem id="week">Week</SegmentedControlItem>
           <SegmentedControlItem id="month">Month</SegmentedControlItem>

From 12bb7680872069bc1f6edfc020ba34a1dc4ed3b7 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 12 May 2026 17:21:50 -0700
Subject: [PATCH 4/9] fix typecheck docs

---
 packages/dev/s2-docs/pages/s2/LabeledValue.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
index df0b53398c1..9985a333285 100644
--- a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
+++ b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
@@ -143,7 +143,6 @@ import {Button} from '@react-spectrum/s2/Button';
 import {Form} from '@react-spectrum/s2/Form';
 import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
 import {NumberField} from '@react-spectrum/s2/NumberField';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <Form/* PROPS */>
   <NumberField

From a00978cc153a429468620bdbc98cebf95d2a5662 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 12 May 2026 17:21:59 -0700
Subject: [PATCH 5/9] Revert "add labeled value to example apps"

This reverts commit 0f63bce0320ecd437bbd95bdf27359cb1e702382.
---
 examples/s2-next-macros/src/app/Lazy.js   | 2 --
 examples/s2-parcel-example/src/Lazy.js    | 2 --
 examples/s2-webpack-5-example/src/Lazy.js | 2 --
 3 files changed, 6 deletions(-)

diff --git a/examples/s2-next-macros/src/app/Lazy.js b/examples/s2-next-macros/src/app/Lazy.js
index 23087283f74..03a6588e437 100644
--- a/examples/s2-next-macros/src/app/Lazy.js
+++ b/examples/s2-next-macros/src/app/Lazy.js
@@ -60,7 +60,6 @@ import {
   Image,
   InlineAlert,
   Keyboard,
-  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -163,7 +162,6 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
-          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />
diff --git a/examples/s2-parcel-example/src/Lazy.js b/examples/s2-parcel-example/src/Lazy.js
index 524c6d44e9e..9a48bea9d3f 100644
--- a/examples/s2-parcel-example/src/Lazy.js
+++ b/examples/s2-parcel-example/src/Lazy.js
@@ -46,7 +46,6 @@ import {
   Image,
   InlineAlert,
   Keyboard,
-  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -149,7 +148,6 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
-          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />
diff --git a/examples/s2-webpack-5-example/src/Lazy.js b/examples/s2-webpack-5-example/src/Lazy.js
index 524c6d44e9e..9a48bea9d3f 100644
--- a/examples/s2-webpack-5-example/src/Lazy.js
+++ b/examples/s2-webpack-5-example/src/Lazy.js
@@ -46,7 +46,6 @@ import {
   Image,
   InlineAlert,
   Keyboard,
-  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -149,7 +148,6 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
-          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />

From 15e9361f2c8b7a0d46f93373f81af0cc85d4177d Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 13 May 2026 09:27:19 -0700
Subject: [PATCH 6/9] Revert "Revert "add labeled value to example apps""

This reverts commit a00978cc153a429468620bdbc98cebf95d2a5662.
---
 examples/s2-next-macros/src/app/Lazy.js   | 2 ++
 examples/s2-parcel-example/src/Lazy.js    | 2 ++
 examples/s2-webpack-5-example/src/Lazy.js | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/examples/s2-next-macros/src/app/Lazy.js b/examples/s2-next-macros/src/app/Lazy.js
index 03a6588e437..23087283f74 100644
--- a/examples/s2-next-macros/src/app/Lazy.js
+++ b/examples/s2-next-macros/src/app/Lazy.js
@@ -60,6 +60,7 @@ import {
   Image,
   InlineAlert,
   Keyboard,
+  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -162,6 +163,7 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
+          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />
diff --git a/examples/s2-parcel-example/src/Lazy.js b/examples/s2-parcel-example/src/Lazy.js
index 9a48bea9d3f..524c6d44e9e 100644
--- a/examples/s2-parcel-example/src/Lazy.js
+++ b/examples/s2-parcel-example/src/Lazy.js
@@ -46,6 +46,7 @@ import {
   Image,
   InlineAlert,
   Keyboard,
+  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -148,6 +149,7 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
+          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />
diff --git a/examples/s2-webpack-5-example/src/Lazy.js b/examples/s2-webpack-5-example/src/Lazy.js
index 9a48bea9d3f..524c6d44e9e 100644
--- a/examples/s2-webpack-5-example/src/Lazy.js
+++ b/examples/s2-webpack-5-example/src/Lazy.js
@@ -46,6 +46,7 @@ import {
   Image,
   InlineAlert,
   Keyboard,
+  LabeledValue,
   Link,
   Meter,
   NumberField,
@@ -148,6 +149,7 @@ export default function Lazy() {
           <TextArea placeholder="Enter a description" label="Description" />
           <TextField placeholder="Enter a email" label="Email" />
           <TextField placeholder="Enter a password" label="Password" />
+          <LabeledValue label="Actual hours" value={0} />
           <SelectBoxGroup aria-label="Choose a cloud">
             <SelectBox id="aws" textValue="Amazon Web Services">
               <Server />

From 23b209adbc59ad7df7af312f0b0464bf61399549 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 13 May 2026 13:27:33 -0700
Subject: [PATCH 7/9] update docs

---
 .../dev/s2-docs/pages/s2/LabeledValue.mdx     | 54 ++++++++++++++++---
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
index 9985a333285..bc0d91938e7 100644
--- a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
+++ b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
@@ -137,21 +137,59 @@ import {Link} from '@react-spectrum/s2/Link';
 
 Use `LabeledValue` within a `Form` to display non-editable information alongside editable fields.
 
-```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled', 'isEmphasized']} type="s2"
+```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled']} type="s2"
 "use client";
 import {Button} from '@react-spectrum/s2/Button';
+import {ComboBox, ComboBoxItem} from '@react-spectrum/s2/ComboBox';
 import {Form} from '@react-spectrum/s2/Form';
 import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
 import {NumberField} from '@react-spectrum/s2/NumberField';
+import {Picker, PickerItem} from '@react-spectrum/s2/Picker';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <Form/* PROPS */>
-  <NumberField
-    label="Planned hours"
-    placeholder="–"
-    defaultValue={1} />
-  <LabeledValue 
-    label="Actual hours"
-    value={0} />
+  <div
+    role="group"
+    className={style({display: 'flex', alignItems: 'center', gap: 48})}>
+    <ComboBox label="Duration type" styles={style({width: 120})}>
+      <ComboBoxItem>Simple</ComboBoxItem>
+      <ComboBoxItem>Calculated assignment</ComboBoxItem>
+      <ComboBoxItem>Calculated work</ComboBoxItem>
+      <ComboBoxItem>Effort driven</ComboBoxItem>
+    </ComboBox>
+    <NumberField
+    label="Duration days"
+    placeholder="# of days"
+    defaultValue={1} 
+    styles={style({width: 120})}/>
+  </div>
+  <div
+    role="group"
+    aria-labelledby="working hours"
+    className={style({display: 'flex', alignItems: 'center', gap: 48, font: 'ui'})}>
+    <NumberField
+      label="Planned hours"
+      placeholder="–"
+      defaultValue={1} 
+      styles={style({width: 120})}/>
+    <LabeledValue 
+      label="Actual hours"
+      value={0}
+      styles={style({width: 120})}/>
+  </div>
+  <div
+    role="group"
+    aria-labelledby="working hours"
+    className={style({display: 'flex', alignItems: 'center', gap: 48, font: 'ui'})}>
+    <LabeledValue 
+      label="Project duration"
+      value={1}
+      styles={style({width: 120})}/>
+    <LabeledValue 
+      label="Actual duration"
+      value={0}
+      styles={style({width: 120})}/>
+  </div>
   <Button
     type="submit"
     variant="primary">

From 0618957f9830dfdc22a407986fcac9d83cd7da34 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 13 May 2026 13:32:29 -0700
Subject: [PATCH 8/9] fix typecheck

---
 packages/dev/s2-docs/pages/s2/LabeledValue.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
index bc0d91938e7..ba9bbfcc236 100644
--- a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
+++ b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
@@ -144,7 +144,6 @@ import {ComboBox, ComboBoxItem} from '@react-spectrum/s2/ComboBox';
 import {Form} from '@react-spectrum/s2/Form';
 import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
 import {NumberField} from '@react-spectrum/s2/NumberField';
-import {Picker, PickerItem} from '@react-spectrum/s2/Picker';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <Form/* PROPS */>

From 53affe074a19452366555e026ebb86d74e3faeca Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 13 May 2026 14:30:43 -0700
Subject: [PATCH 9/9] doc updates

---
 packages/dev/s2-docs/pages/s2/LabeledValue.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
index ba9bbfcc236..4a108e5bc9c 100644
--- a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
+++ b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
@@ -137,7 +137,7 @@ import {Link} from '@react-spectrum/s2/Link';
 
 Use `LabeledValue` within a `Form` to display non-editable information alongside editable fields.
 
-```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled']} type="s2"
+```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled']} type="s2"
 "use client";
 import {Button} from '@react-spectrum/s2/Button';
 import {ComboBox, ComboBoxItem} from '@react-spectrum/s2/ComboBox';
@@ -171,10 +171,12 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
       placeholder="–"
       defaultValue={1} 
       styles={style({width: 120})}/>
+    {/*- begin highlight -*/}
     <LabeledValue 
       label="Actual hours"
       value={0}
       styles={style({width: 120})}/>
+    {/*- end highlight -*/}
   </div>
   <div
     role="group"