@dxos/react-ui-form 0.9.1-staging.ee54ba693a → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.9.1-staging.ee54ba693a",
+  "version": "0.11.0",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,14 +19,12 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "browser": "./dist/lib/browser/translations.mjs",
-      "node": "./dist/lib/node-esm/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -36,36 +34,35 @@
   ],
   "dependencies": {
     "@codemirror/lang-xml": "^6.1.0",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.43.0",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
     "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
-    "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.6.0",
     "tabster": "^8.5.5",
-    "@dxos/async": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo-doc": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo-protocol": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo-react": "0.9.1-staging.ee54ba693a",
-    "@dxos/effect": "0.9.1-staging.ee54ba693a",
-    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
-    "@dxos/keys": "0.9.1-staging.ee54ba693a",
-    "@dxos/lit-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/log": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-components": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-editor": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-list": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-markdown": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-pickers": "0.9.1-staging.ee54ba693a",
-    "@dxos/schema": "0.9.1-staging.ee54ba693a",
-    "@dxos/types": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-search": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/util": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-editor": "0.9.1-staging.ee54ba693a"
+    "@dxos/echo-doc": "0.11.0",
+    "@dxos/async": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/echo-protocol": "0.11.0",
+    "@dxos/effect": "0.11.0",
+    "@dxos/echo-react": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/lit-ui": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui-list": "0.11.0",
+    "@dxos/react-ui-markdown": "0.11.0",
+    "@dxos/react-ui-components": "0.11.0",
+    "@dxos/react-ui-pickers": "0.11.0",
+    "@dxos/react-ui-search": "0.11.0",
+    "@dxos/react-ui-editor": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/types": "0.11.0",
+    "@dxos/ui": "0.11.0",
+    "@dxos/ui-editor": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.17",
@@ -74,23 +71,23 @@
     "fast-check": "^3.19.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/protocols": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/effect-proto": "0.9.1-staging.ee54ba693a",
-    "@dxos/random": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-types": "0.9.1-staging.ee54ba693a",
-    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a"
+    "vite": "^8.1.4",
+    "@dxos/effect-proto": "0.11.0",
+    "@dxos/protocols": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0",
+    "@dxos/ui-theme": "0.11.0",
+    "@dxos/ui-types": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0"
   },
   "peerDependencies": {
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Card.stories.tsx

@@ -0,0 +1,93 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React from 'react';
+
+import { Card, Icon } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { Form } from './Form';
+
+/**
+ * Alignment harness for a form hosted inside a Card.
+ *
+ * `Form.Viewport` used to declare its own gutter grid, so a hosted form's fields inset by the
+ * form's gutter (8px) while the card's own rows inset by the card's (32px) — the two never lined
+ * up, and call sites grew three different workarounds. It now detects the host Column and places
+ * the body in the host's content track instead.
+ *
+ * Read the story by the vertical edges: the reference card's rows and the form card's fields
+ * should share one left edge, and the trailing edge should likewise agree.
+ */
+
+const Contact = Schema.Struct({
+  name: Schema.String.annotations({ title: 'Full name' }),
+  email: Schema.String.annotations({ title: 'Email' }),
+  role: Schema.optional(Schema.String.annotations({ title: 'Role' })),
+});
+
+const values = { name: 'Ada Lovelace', email: 'ada@example.com', role: 'Engineer' };
+
+const ReferenceCard = () => (
+  <Card.Root fullWidth>
+    <Card.Header>
+      <Card.Block>
+        <Icon icon='ph--user--regular' />
+      </Card.Block>
+      <Card.Title>Reference card</Card.Title>
+    </Card.Header>
+    <Card.Body>
+      <Card.Row>
+        <Card.Text>A card row — the inset to match.</Card.Text>
+      </Card.Row>
+      <Card.Row>
+        <Card.Text variant='description'>Second row, same track.</Card.Text>
+      </Card.Row>
+    </Card.Body>
+  </Card.Root>
+);
+
+const FormCard = () => (
+  <Card.Root fullWidth>
+    <Card.Header>
+      <Card.Block>
+        <Icon icon='ph--pencil--regular' />
+      </Card.Block>
+      <Card.Title>Form card</Card.Title>
+    </Card.Header>
+    <Card.Body>
+      <Form.Root schema={Contact} values={values}>
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </Card.Body>
+  </Card.Root>
+);
+
+const DefaultStory = () => (
+  <div className='flex flex-col gap-4 w-96'>
+    <ReferenceCard />
+    <FormCard />
+  </div>
+);
+
+const meta = {
+  title: 'ui/react-ui-form/Card',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
+  parameters: { translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Form/Form.stories.tsx

@@ -5,14 +5,15 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Annotation, Filter, Format, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { log } from '@dxos/log';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Tooltip } from '@dxos/react-ui';
+import { Toolbar, Tooltip } from '@dxos/react-ui';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 
@@ -394,3 +395,94 @@ export const DiscriminatedUnion: Story<Schema.Schema.Type<typeof CreateFeedSchem
     schema: CreateFeedSchema,
   },
 };
+
+// Reactive-source + local-buffer pattern: `values` is a live source, and a parent that gates persistence on
+// validity (like the selected-objects `ObjectForm`). `counter` ticks once a second from outside the form to
+// stand in for an external mutation.
+const ReactiveSchema = Schema.mutable(
+  Schema.Struct({
+    name: Schema.NonEmptyString.annotations({
+      title: 'Name',
+      description: 'Required — clear it and the form holds the invalid draft instead of snapping back.',
+    }),
+    counter: Schema.Number.annotations({
+      title: 'Counter',
+      description: 'Ticks every second from an external source; updates live even while you edit Name.',
+    }),
+  }),
+);
+type ReactiveValues = Schema.Schema.Type<typeof ReactiveSchema>;
+
+const ReactiveBufferedStory = () => {
+  const [source, setSource] = useState<Partial<ReactiveValues>>({ name: 'Alice', counter: 0 });
+  const [running, setRunning] = useState(true);
+
+  const tick = useCallback(() => setSource((prev) => ({ ...prev, counter: (prev.counter ?? 0) + 1 })), []);
+
+  // External source of truth: tick the counter outside the form while running. Stop it to edit the counter by hand.
+  useEffect(() => {
+    if (!running) {
+      return;
+    }
+    const interval = setInterval(tick, 1000);
+    return () => clearInterval(interval);
+  }, [running, tick]);
+
+  // Persist only valid changes (mirrors ObjectForm): invalid intermediate edits stay buffered in the form.
+  const handleValuesChanged = useCallback<NonNullable<FormRootProps<ReactiveValues>['onValuesChanged']>>(
+    (values, { isValid }) => {
+      if (!isValid) {
+        return;
+      }
+      setSource((prev) => ({ ...prev, ...values }));
+    },
+    [],
+  );
+
+  return (
+    <Tooltip.Provider>
+      <TestLayout json={{ source }}>
+        <div className='flex flex-col h-full'>
+          <Toolbar.Root>
+            <Toolbar.IconButton
+              icon={running ? 'ph--pause--regular' : 'ph--play--regular'}
+              label={running ? 'Stop external ticks' : 'Start external ticks'}
+              onClick={() => setRunning((value) => !value)}
+            />
+            <Toolbar.IconButton
+              icon='ph--plus--regular'
+              label='Tick counter once (external)'
+              disabled={running}
+              onClick={tick}
+            />
+          </Toolbar.Root>
+          <Form.Root schema={ReactiveSchema} values={source} onValuesChanged={handleValuesChanged}>
+            <Form.Viewport>
+              <Form.Content>
+                <Form.FieldSet />
+              </Form.Content>
+            </Form.Viewport>
+          </Form.Root>
+        </div>
+      </TestLayout>
+    </Tooltip.Provider>
+  );
+};
+
+/**
+ * Demonstrates the reactive-source + local-buffer pattern used by the selected-objects companion. Pass a live
+ * object as `values` and gate persistence on validity in `onValuesChanged`. Watch the `Counter` field update
+ * live from the external tick while you clear `Name`: the form holds the invalid draft (shows the error) without
+ * snapping back, and the external counter keeps flowing in. Fixing `Name` commits it and reconciles.
+ *
+ * Use the toolbar to stop the external ticks (then edit `Counter` by hand, or step it once with the `+` button)
+ * to see manual edits and external updates reconcile through the same path.
+ *
+ * @idiom org.dxos.react-ui-form.reactiveBufferedForm
+ *   applies: Editing a live/remote object where fields can change externally mid-edit (object/article editors, companions)
+ *   instead-of: Uncontrolled `defaultValues` (ignores external changes) or naive controlled `values` (snaps invalid input back)
+ *   uses: {@link Form.Root}
+ */
+export const ReactiveBuffered: Story<ReactiveValues> = {
+  render: () => <ReactiveBufferedStory />,
+};

package/src/components/Form/Form.theme.ts

@@ -13,15 +13,18 @@ export type FormBehavior = { showDescription: boolean };
 const formStyles = tv({
   slots: {
     viewport: '',
-    content: '',
+    // Bottom padding on the body, so the last field never sits flush against its host's edge
+    // (a form in a card, a dialog body, a scrolled panel all need it).
+    content: 'pb-form-padding',
     section: 'flex flex-col py-form-section-gap first:pt-0',
-    group: 'flex flex-col gap-3 p-trim-md border border-separator rounded-sm',
+    group: 'flex flex-col gap-trim-md p-trim-md border border-separator rounded-sm',
     sectionHeader: '',
     sectionTitle: 'text-lg',
     sectionDescription: 'text-description',
     fieldSet: '',
     field: '',
-    fieldLabel: 'h-8 grid grid-cols-[1fr_auto_auto] items-center select-none',
+    // Columns: label (fills) → optional `labelEnd` readout → error icon (or its spacer) → optional trailing `button`.
+    fieldLabel: 'min-h-(--dx-control) grid grid-cols-[1fr_auto_auto_auto] items-center select-none',
     fieldLabelText: '',
     fieldDescription: 'text-description',
     fieldControl: '',
@@ -31,10 +34,10 @@ const formStyles = tv({
     // Standalone submit row (full-width primary button).
     submit: 'flex w-full pt-form-padding',
     // Collapsible field-set body: indented column of sub-fields.
-    fieldSetBody: 'flex flex-col gap-2 px-2 pb-2',
+    fieldSetBody: 'flex flex-col px-trim-sm pb-trim-sm',
     // Bordered container wrapping a collapsible nested group, plus its top spacing.
     fieldSetBox: 'border border-subdued-separator rounded-sm',
-    fieldSetBoxOuter: 'pt-trim-md',
+    fieldSetBoxOuter: '',
   },
   variants: {
     variant: {
@@ -49,16 +52,19 @@ const formStyles = tv({
         sectionDescription: 'px-trim-md',
         // No top padding: the section gap already separates the field set from the title above it.
         fieldSet: 'flex flex-col gap-trim-md',
+        // Nested groups render their sub-fields through `fieldSetBody`, so it needs the same gap as
+        // `fieldSet` — otherwise fields inside a group sit flush while their top-level siblings don't.
+        fieldSetBody: 'flex flex-col gap-trim-md px-trim-sm pb-trim-sm',
         field: mx(
           'grid',
           'grid-cols-1 [grid-template-areas:"header""description""control""validation"]',
           'md:grid-cols-2 md:[grid-template-areas:"header_header""description_control""validation_validation"]',
-          'gap-x-trim-lg gap-y-0 p-trim-md border border-input-separator rounded-md',
+          'gap-x-trim-xl gap-y-0 p-trim-md border border-input-separator rounded-md',
         ),
         fieldLabel: '[grid-area:header]',
         fieldLabelText: 'text-base-fg text-lg',
-        fieldDescription: '[grid-area:description] pt-1 text-description',
-        fieldControl: '[grid-area:control] flex justify-end items-start md:text-right pt-3 md:pt-0',
+        fieldDescription: '[grid-area:description] pt-trim-xs text-description',
+        fieldControl: '[grid-area:control] flex justify-end items-start pt-trim-md md:pt-0',
         fieldValidation: '[grid-area:validation]',
       },
     },

package/src/components/Form/Form.tsx

@@ -8,7 +8,7 @@ import {
   FormContent,
   type FormContentProps,
   FormError,
-  FormFieldSetController,
+  FormFieldSetContainer,
   FormGroup,
   type FormGroupProps,
   FormLayoutController,
@@ -30,7 +30,7 @@ export const Form = {
   Content: FormContent,
   Section: FormSection,
   Group: FormGroup,
-  FieldSet: FormFieldSetController,
+  FieldSet: FormFieldSetContainer,
   Layout: FormLayoutController,
   Label: FormFieldLabel,
   Row: FormRow,

package/src/components/Form/FormControls.tsx

@@ -15,6 +15,7 @@ import {
   type ThemedClassName,
   composable,
   composableProps,
+  useInColumn,
   useMergeRefs,
   useTranslation,
   withColumn,
@@ -59,7 +60,6 @@ export type FormRootProps<T extends AnyProperties = AnyProperties> = Merge<
   Omit<NaturalFormFieldSetProps<T>, 'schema' | 'path'>
 >;
 
-// `variant` (from FormContextValue) flows through `...props` into the context for all parts to read.
 export const FormRoot = <T extends AnyProperties = AnyProperties>({
   children,
   schema,
@@ -96,20 +96,39 @@ export const FormViewport = composable<HTMLDivElement, FormViewportProps>(
   ({ children, scroll, gutter = 'sm', ...props }, forwardedRef) => {
     const { variant = 'default' } = useFormContext(FORM_VIEWPORT_NAME);
     const styles = formTheme.styles({ variant });
+    const inColumn = useInColumn();
     // Span the full width when nested inside another Column grid (e.g. Card.Root)
     // instead of landing in a single narrow track.
     const span = '[.dx-column-root_&]:col-span-full';
+
+    // Inside a host Column (a Card, a Dialog body), the host already owns the gutter: place the
+    // body in its content track rather than nesting a second grid, which is what made form fields
+    // inset differently from the card title above them. Non-scrolling only — a scrolling viewport
+    // needs its own gutter to host the scrollbar.
+    if (inColumn && !scroll) {
+      return (
+        <Column.Center
+          {...composableProps(props, { classNames: ['w-full min-w-0', styles.viewport()] })}
+          ref={forwardedRef}
+        >
+          {children}
+        </Column.Center>
+      );
+    }
+
+    // Forwarded props land on the OUTERMOST element, never on the inner ScrollArea. A host places
+    // this component by passing placement down (`Panel.Content asChild` merges `[grid-area:content]`
+    // into it); on an inner element that name belongs to no line of the enclosing Column grid, and
+    // CSS answers an unmatched name by fabricating an implicit row rather than ignoring it — which
+    // silently pushed the form into a phantom second row (AUDIT.md §3).
     if (scroll) {
       return (
-        <Column.Root gutter={gutter} classNames={['dx-expander', span]}>
-          <ScrollArea.Root
-            {...composableProps(props, { classNames: styles.viewport() })}
-            orientation='vertical'
-            centered
-            padding
-            thin
-            ref={forwardedRef}
-          >
+        <Column.Root
+          {...composableProps(props, { classNames: ['dx-expander', span, styles.viewport()] })}
+          gutter={gutter}
+          ref={forwardedRef}
+        >
+          <ScrollArea.Root orientation='vertical' centered padding thin>
             <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
           </ScrollArea.Root>
         </Column.Root>
@@ -168,10 +187,10 @@ FormContent.displayName = FORM_CONTENT_NAME;
 
 const FORM_FIELDSET_NAME = 'Form.FieldSet';
 
-export type FormFieldSetControllerProps = ThemedClassName<NaturalFormFieldSetProps<any>>;
+export type FormFieldSetContainerProps = ThemedClassName<NaturalFormFieldSetProps<any>>;
 
 /** Context-reading binding for `Form.FieldSet`: pulls the schema + field context off the form and delegates to {@link FormFieldSet}. */
-export const FormFieldSetController = ({ classNames, ...props }: FormFieldSetControllerProps) => {
+export const FormFieldSetContainer = ({ classNames, ...props }: FormFieldSetContainerProps) => {
   const { form, variant = 'default', ...contextProps } = useFormContext(FORM_FIELDSET_NAME);
   const styles = formTheme.styles({ variant });
   return (
@@ -184,7 +203,7 @@ export const FormFieldSetController = ({ classNames, ...props }: FormFieldSetCon
   );
 };
 
-FormFieldSetController.displayName = FORM_FIELDSET_NAME;
+FormFieldSetContainer.displayName = FORM_FIELDSET_NAME;
 
 //
 // Layout

package/src/components/Form/FormField/FormField.tsx

@@ -12,6 +12,7 @@ import React, { useMemo } from 'react';
 import { Annotation, Format } from '@dxos/echo';
 import { SchemaEx } from '@dxos/effect';
 import { IconButton, IconButtonProps, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '#translations';
 import { type FieldContext, type FormFieldRenderer, type FormFieldRendererProps } from '#types';
@@ -87,6 +88,7 @@ export const FormField = (props: FormFieldProps) => {
     fieldMap,
     fieldProvider,
     readonly,
+    hideEmpty = true,
     layout,
 
     // RefFieldProps
@@ -144,7 +146,7 @@ export const FormField = (props: FormFieldProps) => {
   // (`ArrayField`, nested-struct -> `FormFieldSet`) keep their own
   // empty-value checks, but those branches only apply when the value is
   // actually a non-null array/object, so this check doesn't interfere.
-  if (readonly && fieldState.getValue() == null) {
+  if (readonly && hideEmpty && fieldState.getValue() == null) {
     return null;
   }
 
@@ -310,8 +312,14 @@ FormField.displayName = 'Form.FormField';
 // Layout components
 //
 
-export const CompactIconButton = (props: IconButtonProps) => {
-  return <IconButton variant='ghost' iconOnly {...props} />;
+// End-of-row form buttons occupy a consistent 32px block (matching the standard `h-8` label row) with
+// the button inset so its hover fill never touches the row's top/bottom/right edges.
+export const CompactIconButton = ({ classNames, ...props }: IconButtonProps) => {
+  return (
+    <span className='grid size-8 shrink-0 place-items-center'>
+      <IconButton variant='ghost' iconOnly {...props} classNames={mx('min-h-0 h-7 w-7 p-0', classNames)} />
+    </span>
+  );
 };
 
 /**

package/src/components/Form/FormField/FormRow.tsx

@@ -34,10 +34,17 @@ export type FormFieldLabelProps = ThemedClassName<
      */
     path?: string;
     /**
-     * Trailing button rendered at the end of the label row (third grid column).
+     * Trailing button rendered at the end of the label row (last grid column).
      * Used by nested-object field sets to surface a collapse toggle.
      */
     button?: ReactNode;
+    /**
+     * Read-only content rendered right after the label text (e.g. a live numeric readout for a
+     * slider field) — a sibling of `Input.Label`, never a child, so the label's `textContent`
+     * stays exactly `label` (see the comment on `labelClassNames` below) and doesn't masquerade
+     * as an interactive control the way `button` does.
+     */
+    labelEnd?: ReactNode;
     onClick?: () => void;
   } & Pick<FormFieldRendererProps, 'label' | 'readonly' | 'required'>
 >;
@@ -52,6 +59,7 @@ export const FormFieldLabel = ({
   required,
   standalone,
   button,
+  labelEnd,
   onClick,
 }: FormFieldLabelProps) => {
   const styles = formTheme.styles({ variant });
@@ -77,6 +85,7 @@ export const FormFieldLabel = ({
   return (
     <div className={styles.fieldLabel({ class: mx(onClick && 'cursor-pointer', classNames) })} onClick={onClick}>
       {labelNode}
+      {labelEnd}
       {error ? (
         <Tooltip.Trigger asChild content={error} side='bottom'>
           <Icon icon='ph--warning--regular' size={4} classNames='text-error-text' />
@@ -135,6 +144,13 @@ export type FormRowProps<T = any> = ThemedClassName<
        * Render the label as a standalone `<span>` (group/multi-input fields with no single associated control).
        */
       standalone?: boolean;
+      /**
+       * Read-only content rendered right after the label text, right-aligned by the label row's
+       * grid (e.g. a live numeric readout for a slider field). Forwarded to `FormFieldLabel`'s
+       * `labelEnd` slot — a sibling of the label, never a child, so the label's `textContent` and
+       * accessible name stay exactly `label`.
+       */
+      labelEnd?: ReactNode;
       /**
        * Override the read-only/`static` rendering of the value. Fields whose value is not plain text
        * (refs, selects, markdown) supply this; the default formats scalars/dates via `formatStaticValue`.
@@ -175,6 +191,7 @@ export const FormRow = <T,>({
   format,
   required,
   standalone,
+  labelEnd,
   renderStatic,
   validation,
   getStatus,
@@ -210,6 +227,7 @@ export const FormRow = <T,>({
               readonly={readonly}
               required={required}
               standalone={standalone}
+              labelEnd={labelEnd}
               label={label}
               path={jsonPath}
             />
@@ -241,6 +259,7 @@ export const FormRow = <T,>({
           readonly={readonly}
           required={required}
           standalone
+          labelEnd={labelEnd}
           label={label}
           path={jsonPath}
         />