chore: S2 LabeledValue follow-up (#10061)

yihuiliao · web-flow · commit 6bcb47f573c0 · 2026-05-14T16:59:03.000Z
* chore: LabeledValue follow-ups * add labeled value to example apps * fix segmented control in vite example app * fix typecheck docs * Revert "add labeled value to example apps" This reverts commit 0f63bce. * Revert "Revert "add labeled value to example apps"" This reverts commit a00978c. * update docs * fix typecheck * doc updates
diff --git 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
@@ -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-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>
diff --git 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 />
diff --git 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,72 @@ 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', '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 {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Form/* PROPS */>
+  <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})}/>
+    {/*- begin highlight -*/}
+    <LabeledValue 
+      label="Actual hours"
+      value={0}
+      styles={style({width: 120})}/>
+    {/*- end highlight -*/}
+  </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">
+    Submit
+  </Button>
+</Form>
+```
+
 
 ## API
 
