diff --git a/packages/@react-spectrum/s2/chromatic/LabeledValue.stories.tsx b/packages/@react-spectrum/s2/chromatic/LabeledValue.stories.tsx
new file mode 100644
index 00000000000..d911b59fa99
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/LabeledValue.stories.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2026 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 {LabeledValue} from '../src/LabeledValue';
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof LabeledValue> = {
+  component: LabeledValue,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/LabeledValue'
+};
+
+export default meta;
+
+export {
+  Default,
+  LongText,
+  StringArray,
+  CalendarDateType,
+  CalendarDateTimeType,
+  CalendarDateTimeTypeFormatOptions,
+  ZonedDateTimeType,
+  DateType,
+  TimeType,
+  CalendarDateRange,
+  CalendarDateTimeRange,
+  ZonedDateTimeRange,
+  DateRange,
+  TimeRange,
+  Number,
+  NumberRange,
+  CustomComponents,
+  WithContextualHelp,
+  FormCustomLayoutExample,
+  FormLayout
+} from '../stories/LabeledValue.stories';
diff --git a/packages/@react-spectrum/s2/exports/LabeledValue.ts b/packages/@react-spectrum/s2/exports/LabeledValue.ts
new file mode 100644
index 00000000000..514f51f4e21
--- /dev/null
+++ b/packages/@react-spectrum/s2/exports/LabeledValue.ts
@@ -0,0 +1,2 @@
+export {LabeledValue, LabeledValueContext} from '../src/LabeledValue';
+export type {LabeledValueProps} from '../src/LabeledValue';
diff --git a/packages/@react-spectrum/s2/exports/index.ts b/packages/@react-spectrum/s2/exports/index.ts
index 92cfa26bf27..8b21f10ddbc 100644
--- a/packages/@react-spectrum/s2/exports/index.ts
+++ b/packages/@react-spectrum/s2/exports/index.ts
@@ -55,6 +55,7 @@ export {IllustratedMessage, IllustratedMessageContext} from '../src/IllustratedM
 export {Image, ImageContext} from '../src/Image';
 export {ImageCoordinator} from '../src/ImageCoordinator';
 export {InlineAlert, InlineAlertContext} from '../src/InlineAlert';
+export {LabeledValue, LabeledValueContext} from '../src/LabeledValue';
 export {Link, LinkContext} from '../src/Link';
 export {ListView, ListViewContext, ListViewItem} from '../src/ListView';
 export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, UnavailableMenuItemTrigger, MenuContext} from '../src/Menu';
@@ -143,6 +144,7 @@ export type {IconProps, IconContextValue, IllustrationProps, IllustrationContext
 export type {InlineAlertProps} from '../src/InlineAlert';
 export type {ImageProps} from '../src/Image';
 export type {ImageCoordinatorProps} from '../src/ImageCoordinator';
+export type {LabeledValueProps} from '../src/LabeledValue';
 export type {LinkProps} from '../src/Link';
 export type {ListViewProps, ListViewItemProps} from '../src/ListView';
 export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps} from '../src/Menu';
diff --git a/packages/@react-spectrum/s2/src/LabeledValue.tsx b/packages/@react-spectrum/s2/src/LabeledValue.tsx
new file mode 100644
index 00000000000..a413b720709
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/LabeledValue.tsx
@@ -0,0 +1,235 @@
+/*
+ * Copyright 2024 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 {CalendarDate, CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, ZonedDateTime} from '@internationalized/date';
+import {ContextValue} from 'react-aria-components/slots';
+import {controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, isValidElement, ReactElement, ReactNode} from 'react';
+import {DOMProps, DOMRef, DOMRefValue, RangeValue, SpectrumLabelableProps} from '@react-types/shared';
+import {FieldLabel} from './Field';
+import {filterDOMProps} from 'react-aria/filterDOMProps';
+import {FormContext, useFormProps} from './Form';
+import {style} from '../style' with {type: 'macro'};
+import {useContext, useEffect} from 'react';
+import {useDateFormatter} from 'react-aria/useDateFormatter';
+import {useDOMRef} from './useDOMRef';
+import {useListFormatter} from 'react-aria/useListFormatter';
+import {useNumberFormatter} from 'react-aria/useNumberFormatter';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+type NumberValue = number | RangeValue<number>;
+interface NumberProps<T extends NumberValue> {
+  /** The value to display. */
+  value: T,
+  /** Formatting options for the value. */
+  formatOptions?: Intl.NumberFormatOptions
+}
+
+export type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;
+type RangeDateTime = RangeValue<DateTime>;
+type DateTimeValue = DateTime | RangeDateTime;
+interface DateProps<T extends DateTimeValue> {
+  /** The value to display. */
+  value: T,
+  /** Formatting options for the value. */
+  formatOptions?: Intl.DateTimeFormatOptions
+}
+
+interface StringProps<T extends string> {
+  /** The value to display. */
+  value: T,
+  /** Formatting options for the value. */
+  formatOptions?: never
+}
+
+interface StringListProps<T extends string[]> {
+  /** The value to display. */
+  value: T,
+  /** Formatting options for the value. */
+  formatOptions?: Intl.ListFormatOptions
+}
+
+interface ReactElementProps<T extends ReactElement> {
+  /** The value to display. */
+  value: T,
+  /** Formatting options for the value. */
+  formatOptions?: never
+}
+
+export interface LabeledValueStyleProps {
+  /**
+   * The size of the component.
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL'
+}
+export interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'> {
+  /** The content to display as the label. */
+  label: ReactNode
+}
+type LabeledValueTypeProps<T> =
+  T extends NumberValue ? NumberProps<T> :
+  T extends DateTimeValue ? DateProps<T> :
+  T extends string[] ? StringListProps<T> :
+  T extends string ? StringProps<T> :
+  T extends ReactElement ? ReactElementProps<T> :
+  never;
+
+type LabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactElement;
+export type LabeledValueProps<T> = LabeledValueTypeProps<T> & LabeledValueBaseProps & LabeledValueStyleProps;
+
+export const LabeledValueContext = createContext<ContextValue<Partial<LabeledValueProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+
+const fieldStyles = style({
+  ...field()
+}, getAllowedOverrides());
+
+const valueStyles = style({
+  ...fieldInput(),
+  minHeight: {
+    isInForm: controlSize()
+  },
+  display: 'flex',
+  alignItems: 'center',
+  font: controlFont()
+});
+
+/**
+ * A LabeledValue displays a non-editable value with a label. It formats numbers,
+ * dates, times, and lists according to the user's locale.
+ */
+export const LabeledValue = /*#__PURE__*/ forwardRef(function LabeledValue<T extends LabeledValueTypes>(props: LabeledValueProps<T>, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props as any, ref, LabeledValueContext) as any;
+  props = useFormProps(props);
+  let {
+    label,
+    value,
+    formatOptions,
+    size = 'M',
+    labelPosition = 'top',
+    labelAlign = 'start',
+    contextualHelp,
+    UNSAFE_className = '',
+    UNSAFE_style,
+    styles,
+    ...otherProps
+  } = props;
+  let formContext = useContext(FormContext);
+
+  let domRef = useDOMRef(ref);
+  useEffect(() => {
+    if (
+      domRef?.current &&
+      domRef.current.querySelectorAll('input, [contenteditable], textarea')
+        .length > 0
+    ) {
+      throw new Error('LabeledValue cannot contain an editable value.');
+    }
+  }, [domRef]);
+
+  let children: ReactNode;
+
+  if (Array.isArray(value)) {
+    children = <FormattedStringList value={value as string[]} formatOptions={formatOptions as Intl.ListFormatOptions} />;
+  } else if (typeof value === 'number') {
+    children = <FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />;
+  } else if (typeof value === 'object' && value !== null && 'start' in value && typeof (value as RangeValue<number>).start === 'number') {
+    children = <FormattedNumber value={value as RangeValue<number>} formatOptions={formatOptions as Intl.NumberFormatOptions} />;
+  } else if (typeof value === 'object' && value !== null && 'start' in value) {
+    children = <FormattedDate value={value as RangeDateTime} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;
+  } else if (value instanceof Date || (typeof value === 'object' && value !== null && ('calendar' in value || 'hour' in value))) {
+    children = <FormattedDate value={value as DateTime} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />;
+  } else if (typeof value === 'string') {
+    children = value;
+  } else if (isValidElement(value)) {
+    children = value;
+  }
+
+  return (
+    <div
+      {...filterDOMProps(otherProps)}
+      ref={domRef}
+      style={UNSAFE_style}
+      className={UNSAFE_className + fieldStyles({
+        isInForm: !!formContext,
+        labelPosition,
+        size
+      }, styles)} >
+      <FieldLabel
+        elementType="span"
+        size={size}
+        labelPosition={labelPosition}
+        labelAlign={labelAlign}
+        contextualHelp={contextualHelp}>
+        {label}
+      </FieldLabel>
+      <span className={valueStyles({isInForm: !!formContext, size, labelPosition})}>
+        {children}
+      </span>
+    </div>
+  );
+});
+
+function FormattedStringList({value, formatOptions}: {value: string[], formatOptions?: Intl.ListFormatOptions}) {
+  let formatter = useListFormatter(formatOptions ?? {});
+  return <>{formatter.format(value)}</>;
+}
+
+function FormattedNumber({value, formatOptions}: {value: NumberValue, formatOptions?: Intl.NumberFormatOptions}) {
+  let formatter = useNumberFormatter(formatOptions);
+  if (typeof value === 'object') {
+    return <>{formatter.formatRange(value.start, value.end)}</>;
+  }
+  return <>{formatter.format(value)}</>;
+}
+
+function FormattedDate<T extends DateTimeValue>({value, formatOptions}: {value: T, formatOptions?: Intl.DateTimeFormatOptions}) {
+  if (!formatOptions) {
+    formatOptions = getDefaultFormatOptions('start' in value ? (value as RangeDateTime).start : value as DateTime);
+  }
+
+  let dateFormatter = useDateFormatter(formatOptions);
+  let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();
+
+  if ('start' in value && 'end' in value) {
+    let start = convertDateTime((value as RangeDateTime).start, timeZone);
+    let end = convertDateTime((value as RangeDateTime).end, timeZone);
+    return <>{dateFormatter.formatRange(start, end)}</>;
+  }
+
+  return <>{dateFormatter.format(convertDateTime(value as DateTime, timeZone))}</>;
+}
+
+function convertDateTime(value: DateTime, timeZone: string): Date {
+  if ('timeZone' in value) {
+    return (value as ZonedDateTime).toDate();
+  } else if ('calendar' in value) {
+    return (value as CalendarDate | CalendarDateTime).toDate(timeZone);
+  } else if (!(value instanceof Date)) {
+    return toCalendarDateTime(today(getLocalTimeZone()), value as Time).toDate(timeZone);
+  }
+  return value;
+}
+
+function getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {
+  if (value instanceof Date) {
+    return {dateStyle: 'long', timeStyle: 'short'};
+  } else if ('timeZone' in value) {
+    return {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: (value as ZonedDateTime).timeZone, timeZoneName: 'short'};
+  } else if ('hour' in value && 'year' in value) {
+    return {dateStyle: 'long', timeStyle: 'short'};
+  } else if ('hour' in value) {
+    return {timeStyle: 'short'};
+  } else {
+    return {dateStyle: 'long'};
+  }
+}
diff --git a/packages/@react-spectrum/s2/stories/LabeledValue.stories.tsx b/packages/@react-spectrum/s2/stories/LabeledValue.stories.tsx
new file mode 100644
index 00000000000..f61fcda9d87
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/LabeledValue.stories.tsx
@@ -0,0 +1,221 @@
+/*
+ * Copyright 2024 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 {Badge} from '../src/Badge';
+import {Button} from '../src/Button';
+import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date';
+import {ComboBox, ComboBoxItem} from '../src/ComboBox';
+import {Content, Heading} from '../src/Content';
+import {ContextualHelp} from '../src/ContextualHelp';
+import {Form} from '../src/Form';
+import {LabeledValue} from '../src/LabeledValue';
+import {Link} from '../src/Link';
+import type {Meta, StoryObj} from '@storybook/react';
+import {NumberField} from '../src/NumberField';
+import {ReactElement} from 'react';
+import {StatusLight} from '../src/StatusLight';
+import {style} from '../style' with {type: 'macro'};
+import {TextField} from '../src/TextField';
+
+const meta: Meta<typeof LabeledValue> = {
+  component: LabeledValue,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {control: {type: 'text'}},
+    contextualHelp: {table: {disable: true}},
+    value: {table: {disable: true}},
+    labelPosition: {
+      control: {type: 'radio'},
+      options: ['top', 'side']
+    },
+    labelAlign: {
+      control: {type: 'radio'},
+      options: ['start', 'end']
+    },
+    size: {
+      control: {type: 'radio'},
+      options: ['S', 'M', 'L', 'XL']
+    }
+  },
+  args: {
+    label: 'Name'
+  },
+  title: 'LabeledValue'
+};
+
+export default meta;
+type Story = StoryObj<typeof LabeledValue>;
+
+
+export const Default: Story = {
+  args: {label: 'Name', value: 'Jane Smith'},
+  name: 'String'
+};
+
+export const LongText: Story = {
+  args: {label: 'Test', value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
+  name: 'Long text'
+};
+
+export const StringArray: Story = {
+  args: {label: 'Pets', value: ['Dogs', 'Cats', 'Fish']},
+  name: 'String array'
+};
+
+export const CalendarDateType: Story = {
+  args: {label: 'Birthday', value: new CalendarDate(2019, 6, 5)},
+  name: 'CalendarDate'
+};
+
+export const CalendarDateTimeType: Story = {
+  args: {label: 'Meeting Time', value: new CalendarDateTime(2020, 2, 3, 12, 30, 24, 120)},
+  name: 'CalendarDateTime'
+};
+
+export const CalendarDateTimeTypeFormatOptions: Story = {
+  args: {label: 'Meeting Time', value: new CalendarDateTime(2020, 2, 3, 12, 30, 24, 120), formatOptions: {dateStyle: 'short', timeStyle: 'short'}},
+  name: 'CalendarDateTime with formatOptions'
+};
+
+export const ZonedDateTimeType: Story = {
+  args: {label: 'Meeting Time', value: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000)},
+  name: 'ZonedDateTime'
+};
+
+export const DateType: Story = {
+  args: {label: 'Birthday', value: new Date(2000, 5, 5)},
+  name: 'Date'
+};
+
+export const TimeType: Story = {
+  args: {label: 'Start time', value: new Time(9, 45)},
+  name: 'Time'
+};
+
+export const CalendarDateRange: Story = {
+  args: {label: 'Vacation', value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 7, 5)}},
+  name: 'RangeValue<CalendarDate>'
+};
+
+export const CalendarDateTimeRange: Story = {
+  args: {label: 'Sabbatical', value: {start: new CalendarDateTime(2020, 2, 3, 12, 30, 24, 120), end: new CalendarDateTime(2020, 3, 3, 12, 30, 24, 120)}},
+  name: 'RangeValue<CalendarDateTime>'
+};
+
+export const ZonedDateTimeRange: Story = {
+  args: {label: 'Event Time', value: {start: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000), end: new ZonedDateTime(2020, 3, 3, 'America/Los_Angeles', -28800000)}},
+  name: 'RangeValue<ZonedDateTime>'
+};
+
+export const DateRange: Story = {
+  args: {label: 'Test', value: {start: new Date(2019, 6, 5), end: new Date(2019, 6, 10)}},
+  name: 'RangeValue<Date>'
+};
+
+export const TimeRange: Story = {
+  args: {label: 'Office Hours', value: {start: new Time(9, 45), end: new Time(10, 50)}},
+  name: 'RangeValue<Time>'
+};
+
+export const Number: Story = {
+  args: {label: 'Quantity', value: 10},
+  name: 'Number'
+};
+
+export const NumberRange: Story = {
+  args: {label: 'Normal Range', value: {start: 10, end: 20}},
+  name: 'RangeValue<Number>'
+};
+
+export const CustomComponents: Story = {
+  render: (args) => {
+    return (
+      <div style={{display: 'flex', gap: 36, padding: 8, justifyContent: 'center', flexDirection: 'column'}}>
+        <LabeledValue {...args as any} value={<Badge variant="positive">Licensed</Badge>} />
+        <LabeledValue {...args as any} value={<Link href="https://www.adobe.com">Adobe</Link>} />
+        <LabeledValue {...args as any} value={<StatusLight variant="positive">Ready</StatusLight>} />
+      </div>
+    );
+  },
+  args: {
+    label: 'Test'
+  },
+  name: 'Custom components'
+};
+
+export const WithContextualHelp: Story = {
+  args: {
+    label: 'Test',
+    value: 25,
+    contextualHelp: (
+      <ContextualHelp>
+        <Heading>What is a segment?</Heading>
+        <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
+      </ContextualHelp>
+    )
+  },
+  name: 'Contextual help'
+};
+
+const FormCustomLayout = (args): ReactElement => {
+  return (
+    <Form {...args}>
+      <div role="group" aria-labelledby="searchLabel" className={style({display: 'flex', alignItems: 'center', gap: 8, font: 'ui'})}>
+        <TextField label="Query" styles={style({width: 144})} placeholder="Enter your name" />
+        <ComboBox label="Search terms" styles={style({width: 144})}>
+          <ComboBoxItem>search term 1</ComboBoxItem>
+          <ComboBoxItem>search term 2</ComboBoxItem>
+        </ComboBox>
+        <NumberField label="Number of results" placeholder="–" defaultValue={50} styles={style({width: 120})} />
+        <LabeledValue label="Name" value="Jane Smith" styles={style({width: 96})} />
+      </div>
+      <Button type="submit" variant="primary" styles={style({gridColumnStart: 'field', width: 'fit'})}>Submit</Button>
+    </Form>
+  );
+};
+
+export const FormCustomLayoutExample: StoryObj<typeof FormCustomLayout> = {
+  render: (args) => <FormCustomLayout {...args} />,
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
+const FormLayoutExample = (args): ReactElement => {
+  return (
+    <Form {...args}>
+      <TextField label="Query" styles={style({width: 144})} placeholder="Enter your name" />
+      <ComboBox label="Search terms" styles={style({width: 144})}>
+        <ComboBoxItem>search term 1</ComboBoxItem>
+        <ComboBoxItem>search term 2</ComboBoxItem>
+      </ComboBox>
+      <NumberField label="Number of results" placeholder="–" defaultValue={50} styles={style({width: 120})} />
+      <LabeledValue label="Name" value="Jane Smith" styles={style({width: 96})} />
+      <Button type="submit" variant="primary" styles={style({gridColumnStart: 'field', width: 'fit'})}>Submit</Button>
+    </Form>
+  );
+};
+
+export const FormLayout: StoryObj<typeof FormLayoutExample> = {
+  render: (args) => <FormLayoutExample {...args} />,
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
diff --git a/packages/@react-spectrum/s2/test/LabeledValue.test.tsx b/packages/@react-spectrum/s2/test/LabeledValue.test.tsx
new file mode 100644
index 00000000000..dc57673a412
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/LabeledValue.test.tsx
@@ -0,0 +1,353 @@
+/*
+ * Copyright 2026 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 {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date';
+import {DOMRefValue} from '@react-types/shared';
+import {LabeledValue} from '../src/LabeledValue';
+import React from 'react';
+import {render, within} from '@react-spectrum/test-utils-internal';
+
+describe('LabeledValue', function () {
+  it('renders a label', function () {
+    let {getByText} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value="test" />
+    );
+
+    let labelText = getByText('Field label');
+    expect(labelText).toBeTruthy();
+  });
+
+  it('renders correctly with string value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value="test" />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('test');
+  });
+
+  it('renders correctly with string array value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={['wow', 'cool', 'awesome']} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('wow, cool, and awesome');
+  });
+
+  it('renders correctly with CalendarDate value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new CalendarDate(2019, 6, 5)} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('June 5, 2019');
+  });
+
+  it('renders correctly with CalendarDate value with user provided format options', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new CalendarDate(2019, 6, 5)}
+        formatOptions={{dateStyle: 'long'}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('June 5, 2019');
+  });
+
+
+  it('renders correctly with CalendarDateTime value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120)} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('February 3, 2020 at 12:23 PM');
+  });
+
+  it('renders correctly with CalendarDateTime value with user provided format options', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120)}
+        formatOptions={{dateStyle: 'medium', timeStyle: 'medium'}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('Feb 3, 2020, 12:23:24 PM');
+
+  });
+
+  it('renders correctly with ZonedDateTime value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000)} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('February 3, 2020 at 12:00 AM PST');
+
+  });
+
+  it('renders correctly with ZonedDateTime value with user provided format options', function () {
+    let {getByTestId, getByText} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new ZonedDateTime(2020, 3, 3, 'America/Los_Angeles', -28800000)}
+        formatOptions={{dateStyle: 'full', timeStyle: 'short'}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+
+    let text = getByText('Tuesday', {exact: false});
+    expect(text.textContent).toMatch(/Tuesday, March 3, 2020 at \d{1,2}:\d{2} [AP]M/);
+  });
+
+  it('renders correctly with Date value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new Date(2000, 5, 5)} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('June 5, 2000 at 12:00 AM');
+  });
+
+  it('renders correctly with Date value with user provided format options', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new Date(2000, 5, 5)}
+        formatOptions={{dateStyle: 'full'}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('Monday, June 5, 2000');
+  });
+
+  it('renders correctly with Time value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={new Time(9, 45)}
+        formatOptions={{timeStyle: 'short'}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('9:45 AM');
+  });
+
+  it('renders correctly with RangeValue<Date>', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={{start: new Date(2019, 6, 5), end: new Date(2019, 6, 10)}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('July 5, 2019 at 12:00 AM – July 10, 2019 at 12:00 AM');
+  });
+
+  it('renders correctly with RangeValue<Time>', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={{start: new Time(9, 45), end: new Time(10, 45)}}
+        formatOptions={{timeStyle: 'short'}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('9:45 – 10:45 AM');
+  });
+
+  it('renders correctly with RangeValue<ZonedDateTime>', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={{start: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000), end: new ZonedDateTime(2020, 3, 3, 'America/Los_Angeles', -28800000)}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('February 3, 2020 at 12:00 AM PST – March 3, 2020 at 12:00 AM PST');
+  });
+
+  it('renders correctly with RangeValue<CalendarDateTime>', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={{start: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120), end: new CalendarDateTime(2020, 3, 3, 12, 23, 24, 120)}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('February 3, 2020 at 12:23 PM – March 3, 2020 at 12:23 PM');
+  });
+
+  it('renders correctly with RangeValue<CalendarDate>', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={{start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 7, 5)}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('June 5 – July 5, 2019');
+  });
+
+  it('renders correctly with number value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={10} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('10');
+
+  });
+
+  it('renders correctly with RangeValue<NumberValue>', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={{start: 10, end: 20}} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('Field label10–20');
+  });
+
+  it('renders correctly with ReactElement value', function () {
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        value={<a href="https://test.com">test</a>} />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(staticField).toBeInTheDocument();
+    expect(staticField).toHaveTextContent('test');
+    expect(
+      within(staticField).getByRole('link', {name: 'test'})
+    ).toBeInTheDocument();
+  });
+
+  it('throws when an editable value is provided', async function () {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    let errorMessage;
+    try {
+      render(
+        <LabeledValue
+          label="Field label"
+          value={<input />} />
+      );
+    } catch (e) {
+      errorMessage = (e as Error).message;
+    }
+    expect(errorMessage).toEqual('LabeledValue cannot contain an editable value.');
+  });
+
+  it('attaches a user provided ref to the outer div', function () {
+    let ref = React.createRef<DOMRefValue<HTMLDivElement>>();
+    let {getByTestId} = render(
+      <LabeledValue
+        label="Test"
+        data-testid="test-id"
+        ref={ref}
+        value="test" />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(ref.current?.UNSAFE_getDOMNode()).toBe(staticField);
+  });
+
+  it('attaches a user provided ref to the outer div with a label', function () {
+    let ref = React.createRef<DOMRefValue<HTMLDivElement>>();
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        ref={ref}
+        value="test" />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(ref.current?.UNSAFE_getDOMNode()).toBe(staticField);
+    expect(within(staticField).getByText('Field label')).toBeInTheDocument();
+  });
+
+  it('labelPosition: side supports a ref', function () {
+    let ref = React.createRef<DOMRefValue<HTMLDivElement>>();
+    let {getByTestId} = render(
+      <LabeledValue
+        data-testid="test-id"
+        label="Field label"
+        labelPosition="side"
+        ref={ref}
+        value="test" />
+    );
+
+    let staticField = getByTestId('test-id');
+    expect(ref.current?.UNSAFE_getDOMNode()).toBe(staticField);
+    expect(within(staticField).getByText('Field label')).toBeInTheDocument();
+  });
+});
diff --git a/packages/dev/s2-docs/pages/s2/LabeledValue.mdx b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
new file mode 100644
index 00000000000..8b3874bf301
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/LabeledValue.mdx
@@ -0,0 +1,136 @@
+import {Layout} from '../../src/Layout';
+export default Layout;
+
+import {LabeledValue} from '@react-spectrum/s2';
+import docs from 'docs:@react-spectrum/s2';
+import types from 'docs:../../src/LabeledValueTypes.ts'
+import {CalendarDateTime} from '@internationalized/date';
+
+export const tags = ['form'];
+export const description = 'Displays a non-editable value with a label';
+
+# LabeledValue
+
+<PageDescription>{docs.exports.LabeledValue.description}</PageDescription>
+
+<VisualExample
+  component={LabeledValue}
+  docs={types.exports.LabeledValueProps}
+  links={types.links}
+  props={['label', 'size', 'labelPosition', 'labelAlign', 'contextualHelp']}
+  initialProps={{
+    label: 'File name',
+    value: 'Budget.pdf'
+  }}
+  importSource="@react-spectrum/s2/LabeledValue"
+  type="s2" />
+
+
+## Value
+
+In addition to a string as shown above, a `LabeledValue` accepts numbers, dates, times, and lists of strings in the `value` prop.
+
+### Numbers
+
+When the `value` prop is set to a number, `LabeledValue` formats it according to the user's locale. Custom `formatOptions` can also be provided to format the value as a percentage, unit, currency, etc. This prop is compatible
+with the option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).
+
+<VisualExample
+  name="LabeledValue"
+  component={LabeledValue}
+  docs={types.exports.LabeledValueNumberProps}
+  links={types.links}
+  props={['formatOptions']}
+  initialProps={{
+    label: 'Value',
+    value: 5,
+    formatOptions: {style: 'decimal'}
+  }}
+  controlOptions={{
+    formatOptions: {showDetails: true}
+  }}
+  type="s2" />
+
+An object with `start` and `end` properties may also be provided to format a numeric range.
+
+```tsx render
+"use client"
+import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
+
+<LabeledValue label="Price range" value={{start: 150, end: 400}} formatOptions={{style: 'currency', currency: 'USD', minimumFractionDigits: 0}} />
+```
+
+### Dates and times
+
+The `value` prop may be set to a JavaScript [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object, or one of the types from [@internationalized/date](react-aria:internationalized/date/) to display a date or time, which is formatted according to the user's locale. Custom `formatOptions` can also be provided control the exact date format. This prop is compatible
+with the option parameter of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).
+
+<VisualExample
+  name="LabeledValue"
+  component={LabeledValue}
+  docs={types.exports.LabeledValueDateTimeProps}
+  links={types.links}
+  props={['formatOptions']}
+  initialProps={{
+    label: 'Birthday',
+    value: new Date(2022, 6, 5),
+    formatOptions: {dateStyle: 'short'}
+  }}
+  type="s2" />
+
+By default, the formatting depends on the type of value provided. Above, a [CalendarDate](react-aria:internationalized/date/CalendarDate) is provided, so only the date is displayed. To display a time, pass a [Time](react-aria:internationalized/date/Time) object. You can also provide a [CalendarDateTime](react-aria:internationalized/date/CalendarDateTime) or [ZonedDateTime](react-aria:internationalized/date/ZonedDateTime) to display a date with a time.
+
+```tsx render
+"use client"
+import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
+import {CalendarDateTime} from '@internationalized/date';
+
+<LabeledValue label="Page load time" value={new CalendarDateTime(2022, 7, 5, 14, 30)} />
+```
+
+An object with `start` and `end` properties may also be provided to format a date or time range.
+
+```tsx render
+"use client"
+import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
+import {Time} from '@internationalized/date';
+
+<LabeledValue label="Business hours" value={{start: new Time(8, 30), end: new Time(18)}} />
+```
+
+### Lists
+
+When the `value` prop is set to an array of strings, they are rendered as a comma-separated list according to the user's locale. 
+
+By default, the list is displayed as a conjunction (an "and"-based grouping of items). This may be changed to a disjunction (an "or"-based grouping), or a pure comma-separated list using the `formatOptions` prop. This is compatible with the option parameter of [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat).
+
+<VisualExample
+  name="LabeledValue"
+  component={LabeledValue}
+  docs={types.exports.LabeledValueListProps}
+  links={types.links}
+  props={['formatOptions']}
+  initialProps={{
+    label: 'Value',
+    value: ['Pepperoni', 'Pineapple','Mushroom', 'Garlic'],
+    formatOptions: {type: 'conjunction'}
+  }}
+  type="s2" />
+
+
+### Components
+
+The value can be a component and will be rendered as provided. Components cannot be editable.
+
+```tsx render
+"use client"
+import {LabeledValue} from '@react-spectrum/s2/LabeledValue';
+import {Link} from '@react-spectrum/s2/Link';
+
+<LabeledValue label="Website" value={<Link href="https://www.adobe.com/">Adobe.com</Link>} />
+```
+
+
+## API
+
+<PropTable component={{props: types.exports.LabeledValueProps}} links={types.links} />
diff --git a/packages/dev/s2-docs/src/LabeledValueTypes.ts b/packages/dev/s2-docs/src/LabeledValueTypes.ts
new file mode 100644
index 00000000000..46253aa4d9b
--- /dev/null
+++ b/packages/dev/s2-docs/src/LabeledValueTypes.ts
@@ -0,0 +1,30 @@
+import {DateTime, LabeledValueBaseProps, LabeledValueStyleProps} from '../../../@react-spectrum/s2/src/LabeledValue';
+import {RangeValue} from '@react-types/shared';
+import {ReactElement} from 'react';
+
+// The doc generator cannot handle the generic conditional types, so this is a flattened version.
+export interface LabeledValueProps extends LabeledValueBaseProps, LabeledValueStyleProps {
+  /** The value to display. */
+  value: string | string[] | number | RangeValue<number> | DateTime | RangeValue<DateTime> | ReactElement,
+  /** Formatting options for the value. The available options depend on the type passed to the `value` prop. */
+  formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | Intl.ListFormatOptions
+}
+
+export interface LabeledValueNumberProps extends LabeledValueBaseProps, LabeledValueStyleProps {
+  /** The value to display. */
+  value: number | RangeValue<number>,
+  /** Formatting options for the value. The available options depend on the type passed to the `value` prop. */
+  formatOptions?: Intl.NumberFormatOptions
+}
+export interface LabeledValueDateTimeProps extends LabeledValueBaseProps, LabeledValueStyleProps {
+  /** The value to display. */
+  value: DateTime | RangeValue<DateTime>,
+  /** Formatting options for the value. The available options depend on the type passed to the `value` prop. */
+  formatOptions?: Intl.DateTimeFormatOptions
+}
+export interface LabeledValueListProps extends LabeledValueBaseProps, LabeledValueStyleProps {
+  /** The value to display. */
+  value: string[],
+  /** Formatting options for the value. The available options depend on the type passed to the `value` prop. */
+  formatOptions?: Intl.ListFormatOptions
+}
diff --git a/packages/dev/s2-docs/src/VisualExample.tsx b/packages/dev/s2-docs/src/VisualExample.tsx
index 1f7039afc99..bb8e570825d 100644
--- a/packages/dev/s2-docs/src/VisualExample.tsx
+++ b/packages/dev/s2-docs/src/VisualExample.tsx
@@ -83,6 +83,8 @@ const controlsStyle = style({
 });
 
 export interface VisualExampleProps {
+  /** The name of the component. */
+  name?: string,
   /** The component to render. */
   component: any,
   /** The TS docs for this component. */
@@ -120,7 +122,7 @@ export interface PropControl extends Omit<TProperty, 'description'> {
 /**
  * Displays a component example with controls for changing the props.
  */
-export function VisualExample({component, docs, links, importSource, props, initialProps, controlOptions, files, downloadFiles, code, wide, slots, align, acceptOrientation, type, propsObject, showCoachMark, hideShadcn}: VisualExampleProps) {
+export function VisualExample({name, component, docs, links, importSource, props, initialProps, controlOptions, files, downloadFiles, code, wide, slots, align, acceptOrientation, type, propsObject, showCoachMark, hideShadcn}: VisualExampleProps) {
   let componentProps = docs.type === 'interface' ? docs : docs.props;
   if (componentProps?.type !== 'interface') {
     return null;
@@ -187,7 +189,7 @@ export function VisualExample({component, docs, links, importSource, props, init
 
   // Render the corresponding client component to make the controls interactive.
   return (
-    <VisualExampleClient component={component} name={docs.name} importSource={importSource} controls={controls} initialProps={initialProps} propsObject={propsObject}>
+    <VisualExampleClient component={component} name={name ?? docs.name} importSource={importSource} controls={controls} initialProps={initialProps} propsObject={propsObject}>
       <FileProvider value={downloadFiles}>
         <ShadcnProvider value={!type || type === 's2' || docs.type !== 'component' || hideShadcn ? null : {type, component: docs.name}}>
           <div role="group" aria-label="Example" className={exampleStyle({layout: files || wide ? 'wide' : 'narrow'})}>
diff --git a/packages/dev/s2-docs/src/VisualExampleClient.tsx b/packages/dev/s2-docs/src/VisualExampleClient.tsx
index 14f17669c8c..c2948498adb 100644
--- a/packages/dev/s2-docs/src/VisualExampleClient.tsx
+++ b/packages/dev/s2-docs/src/VisualExampleClient.tsx
@@ -384,6 +384,10 @@ function renderValue(value: any, indent = '') {
         return <><span className={style({color: 'magenta-1000'})}>new</span> <span className={style({color: 'red-1000'})}>Size</span>(<span className={style({color: 'pink-1000'})}>{value.width}</span>, <span className={style({color: 'pink-1000'})}>{value.height}</span>)</>;
       }
 
+      if (value instanceof Date) {
+        return <><span className={style({color: 'magenta-1000'})}>new</span> <span className={style({color: 'red-1000'})}>Date</span>(<span className={style({color: 'pink-1000'})}>{value.getFullYear()}</span>, <span className={style({color: 'pink-1000'})}>{value.getMonth()}</span>, <span className={style({color: 'pink-1000'})}>{value.getDate()}</span>)</>;
+      }
+
       let entries = Object.entries(value);
       let res: ReactNode[] = entries.map(([name, value], i) => {
         let result = <><span className={style({color: 'indigo-1000'})}>{name}</span>: {renderValue(value, indent)}</>;
@@ -483,6 +487,12 @@ export function Control({name}: {name: string}) {
       if (control.value.name === 'Intl.NumberFormatOptions') {
         return <NumberFormatControl control={control} value={value} onChange={onChange} />;
       }
+      if (control.value.name === 'Intl.ListFormatOptions') {
+        return <ListFormatControl control={control} value={value} onChange={onChange} />;
+      }
+      if (control.value.name === 'Intl.DateTimeFormatOptions') {
+        return <DateTimeFormatControl control={control} value={value} onChange={onChange} />;
+      }
       if (name === 'contextualHelp') {
         return <BooleanControl control={control} value={value} onChange={onChange} />;
       }
@@ -760,6 +770,38 @@ function NumberFormatControl({control, value, onChange}: ControlProps) {
   );
 }
 
+function ListFormatControl({control, value, onChange}: ControlProps) {
+  return (
+    <Picker
+      label={control.name}
+      contextualHelp={<PropContextualHelp control={control} />}
+      value={value?.type ?? 'conjunction'}
+      onChange={type => onChange({...value, type})}
+      styles={style({width: controlWidth})}>
+      <PickerItem id="conjunction">Conjunction</PickerItem>
+      <PickerItem id="disjunction">Disjunction</PickerItem>
+      <PickerItem id="unit">Unit</PickerItem>
+    </Picker>
+  );
+}
+
+function DateTimeFormatControl({control, value, onChange}: ControlProps) {
+  let clear = (v: any) => v === 'short' ? undefined : v;
+  return (
+    <Picker
+      label={control.name}
+      contextualHelp={<PropContextualHelp control={control} />}
+      value={value?.dateStyle ?? 'short'}
+      onChange={dateStyle => onChange({...value, dateStyle: clear(dateStyle)})}
+      styles={style({width: controlWidth})}>
+      <PickerItem id="short">Short</PickerItem>
+      <PickerItem id="medium">Medium</PickerItem>
+      <PickerItem id="long">Long</PickerItem>
+      <PickerItem id="full">Full</PickerItem>
+    </Picker>
+  );
+}
+
 function StringControl({control, value, onChange}: ControlProps) {
   return (
     <TextField