@object-ui/fields 17.2.0 → 17.5.0

package/src/widgets/CurrencyField.tsx

@@ -1,53 +1,85 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
-import { useLocalization } from '@object-ui/i18n';
-import { resolveFieldCurrency } from '../currency';
+import { toDomProps } from './toDomProps';
+import { useLocalization, useDisplayLocale, formatDisplayNumber } from '@object-ui/i18n';
+import { resolveFieldCurrency, currencyFractionDigits, currencySymbol } from '../currency';
 
 /**
  * Format currency value for display. When `currency` is undefined the value
  * is rendered as a plain number with thousands separators (no symbol),
  * because silently assuming USD is misleading for non-USD businesses.
+ *
+ * `precision` is a display width the caller resolved — either the field's
+ * authored `precision` or, when it declared none, the currency's own ISO 4217
+ * minor-unit count (see the derivation at the call site, objectui#4361).
  */
-function formatAmount(value: number, currency: string | undefined, precision: number): string {
+function formatAmount(
+  value: number,
+  currency: string | undefined,
+  precision: number,
+  locale?: string,
+): string {
   if (currency) {
     try {
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
+      return formatDisplayNumber(value, {
+        locale,
         currency,
         minimumFractionDigits: precision,
         maximumFractionDigits: precision,
-      }).format(value);
+      });
     } catch {
       return `${currency} ${value.toFixed(precision)}`;
     }
   }
   try {
-    return new Intl.NumberFormat('en-US', {
+    // No `scale` passed: this is a currency widget whose `precision` is a
+    // display width, so a `precision: 0` amount keeps its separators rather
+    // than being read as an ordinal (objectui#4033).
+    return formatDisplayNumber(value, {
+      locale,
       minimumFractionDigits: precision,
       maximumFractionDigits: precision,
-    }).format(value);
+    });
   } catch {
     return value.toFixed(precision);
   }
 }
 
-const CURRENCY_SYMBOLS: Record<string, string> = {
-  USD: '$',
-};
-
-export function CurrencyField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetComponentProps<number>) {
-  const currencyField = (field || (props as any).schema) as any;
+export function CurrencyField({ value, onChange, field, readonly, error, className, ...props }: FieldWidgetComponentProps<number>) {
+  const currencyField = field as any;
   // Shared precedence: field currency → currencyConfig → tenant default (ADR-0053).
   const { currency: tenantCurrency } = useLocalization();
+  const locale = useDisplayLocale();
   const currency: string | undefined = resolveFieldCurrency(currencyField, tenantCurrency);
-  const precision = currencyField?.precision ?? 2;
+  // An AUTHORED `precision` wins: it is authored metadata, and this repo's
+  // convention is that authored metadata keeps priority. Whether a declared
+  // `precision` that contradicts the currency's ISO 4217 digits (say
+  // `precision: 2` on a JPY field) should be REJECTED at publish time is a
+  // contract question, so it is filed upstream in `@objectstack/spec` rather
+  // than answered here by overriding the author (objectui#4361).
+  //
+  // An ABSENT `precision` derives from the currency instead of defaulting to a
+  // literal 2, which rendered `¥1,234.50` for a currency with no minor unit.
+  // "Absent" is genuinely distinguishable from "authored 2" here — MEASURED,
+  // not assumed: `CurrencyFieldMetadata.precision` is optional in
+  // `@object-ui/types` and `z.ZodOptional<z.ZodNumber>` (no `.default()`) in
+  // `@objectstack/spec`, so a parsed field carries no materialized 2. The only
+  // `.default(2)` on the currency surface is `CurrencyConfigSchema.precision`,
+  // a different key on the `currencyConfig` block that this widget never reads.
+  //
+  // This is the widget's ONE precision, so the derivation also reaches the edit
+  // affordances below. Deliberate: leaving `step`/blur-rounding at 2 would give
+  // a JPY field that displays whole yen while offering a 0.01 spinner step and
+  // rounding typed input to 1234.56 yen.
+  const precision =
+    currencyField?.precision ?? (currency ? currencyFractionDigits(currency) : 2);
 
   if (readonly) {
     if (value == null) return <EmptyValue />;
     return (
       <span className="text-sm font-medium tabular-nums">
-        {formatAmount(Number(value), currency, precision)}
+        {formatAmount(Number(value), currency, precision, locale)}
       </span>
     );
   }
@@ -60,7 +92,16 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
     }
   };
 
-  const symbol = currency ? (currency === 'USD' ? '$' : currency) : '';
+  // ONE channel for the symbol (objectui#4414). This used to be a hand-written
+  // `currency === 'USD' ? '$' : currency` ternary, with a dead one-entry
+  // `CURRENCY_SYMBOLS` map sitting two lines above it restating the same fact —
+  // a table that looked like the place to add a currency but that nothing read.
+  // Both were hand copies of knowledge `Intl` already carries, and both are
+  // gone: `currencySymbol` reads the `currency` part of the SAME format the
+  // readonly branch above renders amounts with, so the two modes of this widget
+  // can no longer disagree (they did: `JPY` in the adornment, `¥1,235` in the
+  // readonly span). USD at the display-locale default is `$` either way.
+  const symbol = currency ? currencySymbol(currency, locale) : '';
 
   return (
     <div className="relative">
@@ -70,7 +111,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         </span>
       )}
       <Input
-        {...props}
+        {...toDomProps(props)}
         type="number"
         value={value ?? ''}
         onChange={(e) => {
@@ -87,7 +128,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         min={typeof currencyField?.min === 'number' ? currencyField.min : undefined}
         max={typeof currencyField?.max === 'number' ? currencyField.max : undefined}
         step={Math.pow(10, -precision).toFixed(precision)}
-        aria-invalid={!!errorMessage}
+        aria-invalid={!!error}
       />
     </div>
   );

package/src/widgets/DateField.tsx

@@ -1,25 +1,34 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
+import { useDisplayLocale } from '@object-ui/i18n';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { openNativePicker } from './openNativePicker';
+import { toDateInputValue } from './nativeDateValue';
 
 /**
  * DateField - Date picker input widget
  * Uses native date input and displays locale-formatted date in readonly mode
  */
 export function DateField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+  // Before the readonly early return: the hook count must not depend on a prop
+  // (objectui#4468). A bare `toLocaleDateString()` reads the MACHINE's locale,
+  // which is how a Chinese form ended up with an `8/11/2026` value in it.
+  const locale = useDisplayLocale();
   if (readonly) {
-    return value ? <span className="text-sm">{new Date(value).toLocaleDateString()}</span> : <EmptyValue />;
+    return value ? <span className="text-sm">{new Date(value).toLocaleDateString(locale)}</span> : <EmptyValue />;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input
       {...domProps}
       type="date"
-      value={value || ''}
+      // An API that hands back `2026-06-17T00:00:00.000Z` for a `date` field
+      // would leave this control empty too (objectui#3127). The written-back
+      // shape is unchanged: the control's own plain `YYYY-MM-DD`.
+      value={toDateInputValue(value)}
       onChange={(e) => onChange(e.target.value)}
       onClick={(e) => {
         openNativePicker(e.currentTarget);

package/src/widgets/DateTimeField.tsx

@@ -1,32 +1,41 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
+import { useDisplayLocale } from '@object-ui/i18n';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { openNativePicker } from './openNativePicker';
+import { toDateTimeInputValue, fromDateTimeInputValue } from './nativeDateValue';
 
 /**
  * DateTimeField - Combined date and time picker widget
  * Displays both date and time in locale format when readonly
  */
 export function DateTimeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+  // Before the readonly early return — the hook count must not depend on a
+  // prop. See DateField for why the bare `toLocale*` calls were wrong
+  // (objectui#4468).
+  const locale = useDisplayLocale();
   if (readonly) {
     if (!value) return <EmptyValue />;
     const date = new Date(value);
     return (
       <span className="text-sm">
-        {date.toLocaleDateString()} {date.toLocaleTimeString()}
+        {date.toLocaleDateString(locale)} {date.toLocaleTimeString(locale)}
       </span>
     );
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input
       {...domProps}
       type="datetime-local"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
+      // The record's value is ISO-8601 (`…T14:30:00.000Z`), which this control
+      // rejects outright — it renders empty and the user reads that as a lost
+      // value (objectui#3127). Convert in, and back out on the same basis.
+      value={toDateTimeInputValue(value)}
+      onChange={(e) => onChange(fromDateTimeInputValue(e.target.value))}
       onClick={(e) => {
         openNativePicker(e.currentTarget);
         domProps.onClick?.(e);

package/src/widgets/EmailField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * EmailField - Email address input with mailto link in readonly mode
  * Renders as a clickable mailto link when readonly, standard email input otherwise
  */
-export function EmailField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
-  const config = field || (props as any).schema;
+export function EmailField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  const config = field;
   if (readonly) {
     if (!value) return <EmptyValue />;
     return (
@@ -20,8 +21,7 @@ export function EmailField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input
@@ -31,7 +31,7 @@ export function EmailField({ value, onChange, field, readonly, errorMessage, ...
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'email@example.com'}
       disabled={readonly || domProps.disabled}
-      aria-invalid={!!errorMessage}
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/FileField.tsx

@@ -4,7 +4,10 @@ import { useUpload } from '@object-ui/providers';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2 } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
 import { useUploadingSignal } from './useUploadingSignal';
+import { maxSizeError, type TranslateFn } from './file-size-guard';
 import {
   fileValueForSubmit,
   readFileValues,
@@ -46,13 +49,11 @@ function useFileUploads(opts: {
     if (selectedFiles.length === 0) return;
     const newErrors: string[] = [];
 
+    // Shared with ImageField — see `file-size-guard`.
     const validFiles = selectedFiles.filter(file => {
-      if (maxSize && file.size > maxSize) {
-        const maxMB = (maxSize / (1024 * 1024)).toFixed(1);
-        newErrors.push(t('fields.file.exceedsMaxSize', {
-          defaultValue: `"${file.name}" exceeds max size (${maxMB} MB)`,
-          name: file.name, max: maxMB,
-        }));
+      const rejection = maxSizeError(t as TranslateFn, file, maxSize);
+      if (rejection) {
+        newErrors.push(rejection);
         return false;
       }
       return true;
@@ -115,11 +116,11 @@ function useFileUploads(opts: {
  * Supports single and multiple file uploads with configurable accepted file types.
  * L2: File size validation, per-file progress indicators, error messages.
  */
-export function FileField({ value, onChange, field, readonly, onUploadingChange, ...props }: FieldWidgetComponentProps<any>) {
+export function FileField({ value, onChange, field, readonly, onUploadingChange, error, ...props }: FieldWidgetComponentProps<any>) {
   const { t } = useObjectTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const cameraRef = useRef<HTMLInputElement>(null);
-  const fileField = (field || (props as any).schema) as any;
+  const fileField = field as any;
   const multiple = fileField?.multiple || false;
   const accept = fileField?.accept ? fileField.accept.join(',') : undefined;
   const maxSize = fileField?.maxSize as number | undefined; // bytes
@@ -183,10 +184,18 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
   }, [accept, processFiles]);
 
   if (readonly) {
-    if (!value) return <EmptyValue />;
+    // Readonly there is no dropzone: the field's whole rendered surface is the
+    // list of file names, so THAT is what the host's group label names
+    // (objectui#3990). The role is therefore `group` here and `button` (the
+    // dropzone) while editable — the same widget, two different surfaces. See
+    // `toHostGroupProps`; `EmptyValue`'s own `aria-label` ("No value") is
+    // outranked by `aria-labelledby` per accname, and on the `generic` role that
+    // placeholder span carries it was never exposed as a name anyway.
+    const hostGroupProps = toHostGroupProps(props);
+    if (!value) return <EmptyValue {...hostGroupProps} />;
 
     return (
-      <div className="flex flex-wrap gap-2">
+      <div {...hostGroupProps} className="flex flex-wrap gap-2">
         {views.map((file, idx) => (
           <span key={idx} className="text-sm truncate max-w-xs">
             {file.name}
@@ -209,6 +218,8 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
     }
   };
 
+  const { name: _domName, ...dropzoneDomProps } = toDomProps(props);
+
   return (
     <div className={props.className}>
       <input
@@ -233,8 +244,23 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
       )}
       
       <div className="space-y-2">
-        {/* Drag-and-drop zone */}
+        {/* Drag-and-drop zone — the widget's real focusable control (it is the
+            keyboard path to the hidden file input), so the DOM pass-through
+            and the validation state land here (objectui#3318). `name` is
+            withheld: only DOM-legal on form controls, and on this div it is
+            exactly the leak #3291 sweeps for.
+
+            It also carries the host's label. This widget is declared
+            `labelling: 'group'` (objectui#3961) NOT because it is composite — it
+            has exactly one control — but because that one control is a
+            `div[role="button"]`, which no `<label for>` can reach. So the form
+            renderer names it by IDREF instead, and `aria-labelledby` arrives in
+            the same whitelist spread (`toDomProps` forwards the whole `aria-`
+            family). Deliberately no extra `role="group"` wrapper: there is no
+            group here, and adding one would announce a container that holds a
+            single button. */}
         <div
+          {...dropzoneDomProps}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
@@ -255,6 +281,8 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
               inputRef.current?.click();
             }
           }}
+          // AFTER the spread so this widget's own computation wins (#3222).
+          aria-invalid={!!error}
         >
           <Upload className={`size-8 ${isDragOver ? 'text-primary' : 'text-muted-foreground'}`} />
           <div className="text-center">

package/src/widgets/FilterConditionField.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FilterBuilder, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -297,6 +298,7 @@ export function FilterConditionField({
   onChange,
   readonly,
   className,
+  error,
   ...props
 }: FieldWidgetComponentProps<string | object>) {
   const ctx = React.useContext(SchemaRendererContext);
@@ -397,10 +399,19 @@ export function FilterConditionField({
       {rawMode ? (
         <>
           <textarea
+            // DOM pass-through onto the raw-JSON editing surface
+            // (objectui#3318). NOTE this widget stays on the #3318 ledger
+            // regardless: its dependency-gated state (no `object_name` chosen
+            // yet — the state a fresh form and the registry sweep render) is a
+            // plain hint paragraph with no focusable control.
+            {...toDomProps(props)}
             className="min-h-[96px] w-full rounded border bg-background px-2 py-1 font-mono text-xs"
             value={rawValue}
             placeholder='{ "type": "customer", "is_active": true }'
             onChange={(e) => onChange(e.target.value as any)}
+            // The form's validation slot (#3222) OR this widget's own
+            // unparsable-JSON state, which already renders its red message.
+            aria-invalid={!!error || !parsed.ok}
           />
           {!parsed.ok && (
             <span className="text-xs text-destructive">{t('fields.filterCondition.invalidJson')}</span>

package/src/widgets/FormulaField.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EmptyValue } from '@object-ui/components';
+import { useDisplayLocale } from '@object-ui/i18n';
 import { FieldWidgetComponentProps } from './types';
 
 /**
@@ -7,7 +8,11 @@ import { FieldWidgetComponentProps } from './types';
  * Values are computed on the backend and cannot be edited
  */
 export function FormulaField({ value, field, ...props }: FieldWidgetComponentProps<any>) {
-  const formulaField = (field || (props as any).schema) as any;
+  // Before the empty-value early return — the hook count must not change when
+  // a value flips between null and set. A `date` return type used to format
+  // through the MACHINE's locale (objectui#4468).
+  const locale = useDisplayLocale();
+  const formulaField = field as any;
   const returnType = formulaField?.return_type || 'text';
 
   if (value == null) {
@@ -20,7 +25,7 @@ export function FormulaField({ value, field, ...props }: FieldWidgetComponentPro
   } else if (returnType === 'boolean') {
     displayValue = value ? 'Yes' : 'No';
   } else if (returnType === 'date') {
-    displayValue = new Date(value).toLocaleDateString();
+    displayValue = new Date(value).toLocaleDateString(locale);
   } else {
     displayValue = String(value);
   }

package/src/widgets/FullscreenFieldEditor.tsx

@@ -0,0 +1,60 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { FullscreenEditor, type FullscreenEditorProps } from '@object-ui/components';
+
+/**
+ * The fullscreen-edit affordance shared by every long-text widget in this
+ * package (`field:textarea` → `TextAreaField`, `field:markdown` / `field:html`
+ * → `RichTextField`).
+ *
+ * ## This is now a thin wrapper (objectui#3398)
+ *
+ * The affordance, the dialog, the draft/commit state machine and the
+ * `readOnly` / `disabled` semantics all live in `FullscreenEditor`
+ * (`@object-ui/components`). They used to live here AND, separately, in the
+ * form renderer's built-in `textarea` branch — one form-level promise
+ * (`ObjectFormSchema.mobile.fullscreenLongText`, projected onto every long-text
+ * field as `mobile_fullscreen`) answered twice, on the two render paths.
+ *
+ * Two copies of a state machine drift, and these did: objectui#3400 measured a
+ * read-only field editable through the built-in branch's dialog, objectui#3402
+ * measured the same hole for `disabled` here, and #3393 (label in the dialog
+ * title) and #3272 (i18n) each landed on one side before the other. The
+ * maintainer's ruling of 2026-08-10 was one implementation hoisted to the
+ * dependency-legal side — and the measured import graph allows exactly that
+ * direction: this package depends on `@object-ui/components`, which declares no
+ * dependency on `@object-ui/fields` in `dependencies` or `peerDependencies`.
+ *
+ * ## Why the wrapper survives the merge rather than being deleted
+ *
+ * It carries the one thing that is genuinely about THIS package: `readOnly` is
+ * not part of the contract here. Both hosts early-return a read-only DISPLAY
+ * before they compute the affordance (`TextAreaField.tsx`, `RichTextField.tsx`),
+ * so a `readOnly` reaching this component would be a prop with no producer on
+ * this path — the shape this package keeps deleting (objectui#3232/#3233). The
+ * `Omit` below is that statement in the type system, and it is why the hoist did
+ * not simply re-export the primitive. A future host that renders an editor for
+ * read-only fields must widen this type AND pass the prop together; the
+ * primitive already answers it (no affordance at all).
+ *
+ * Everything else — `value` / `onCommit` / `label` / `testIdPrefix` /
+ * `disabled` / `children` / `footer` — passes straight through, so the hosts and
+ * their pins are unchanged. `testIdPrefix` still namespaces this package's ids
+ * (`textarea-`, `richtext-`), distinct from the built-in branch's
+ * `form-textarea-`, so a test can still say which render path it found.
+ */
+export type FullscreenFieldEditorProps = Omit<FullscreenEditorProps, 'readOnly'>;
+
+export function FullscreenFieldEditor(props: FullscreenFieldEditorProps) {
+  // `readOnly` is deliberately not forwarded — it is not in the props type, and
+  // the primitive defaults it to false, which is the behaviour both hosts rely
+  // on: they have already returned a read-only display before reaching here.
+  return <FullscreenEditor {...props} />;
+}

package/src/widgets/GeolocationField.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { Input, Button, Label, EmptyValue } from '@object-ui/components';
 import { MapPin, Crosshair } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
 
 /**
  * Geolocation data structure
@@ -16,9 +18,37 @@ export interface GeolocationValue {
  * Geolocation field widget - provides a location picker with coordinates
  * Supports manual entry and browser geolocation API
  */
-export function GeolocationField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<GeolocationValue>) {
+export function GeolocationField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<GeolocationValue>) {
   const [isLoading, setIsLoading] = React.useState(false);
   const location = value || {};
+  // DOM pass-through (objectui#3318): the whitelist spread goes onto the FIRST
+  // sub-input (latitude); the composite's validation state goes onto BOTH
+  // focusable sub-inputs via `aria-invalid={!!error}`.
+  //
+  // `id` and `aria-labelledby` are held back and land on the group CONTAINER
+  // instead (objectui#3961) — they address the whole field, not the latitude box.
+  // The host `id` never reached the DOM before: it was overwritten one line later
+  // by `id={subId('latitude')}` (objectui#3343), leaving the form's group label
+  // pointing at nothing. And `aria-labelledby` on the latitude input would
+  // OVERRIDE its own "Latitude" label with the field name. `aria-describedby` and
+  // the rest stay on the first sub-input, where focus can reach them.
+  const {
+    id: _hostId,
+    'aria-labelledby': _hostLabelledBy,
+    ...domProps
+  } = toDomProps(props);
+  // The pair held back above, in the one spelling every group-labelled widget
+  // uses for it — and computed HERE, before the readonly early return below,
+  // because that return used to drop both keys on the floor: a published label
+  // id with no consumer in the document (objectui#3990). See `toHostGroupProps`.
+  const hostGroupProps = toHostGroupProps(props);
+  // Sub-input ids (objectui#3343): `useId()` prefix + sub-field name — the
+  // `groupId` paradigm of RadioField / CheckboxesField. Hardcoded literals
+  // ("latitude" / "longitude") collide as soon as a form renders two
+  // geolocation fields, and every label's htmlFor then resolves to the
+  // FIRST match.
+  const groupId = useId();
+  const subId = (name: keyof GeolocationValue) => `${groupId}-${name}`;
 
   const handleFieldChange = (fieldName: keyof GeolocationValue, fieldValue: string) => {
     onChange({
@@ -67,9 +97,13 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
   };
 
   if (readonly) {
+    // Readonly the composite collapses to the formatted coordinates (plus the
+    // "View on map" link), so THAT row is the surface the host label names
+    // (objectui#3990). The `EmptyValue` placeholder sits inside it, so it needs
+    // nothing of its own.
     const formatted = formatLocation(location);
     return (
-      <div className="flex items-center gap-2">
+      <div {...hostGroupProps} className="flex items-center gap-2">
         <MapPin className="w-4 h-4 text-muted-foreground" />
         {formatted ? <span className="text-sm">{formatted}</span> : <EmptyValue />}
         {location.latitude && location.longitude && (
@@ -88,7 +122,11 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
   }
 
   return (
-    <div className="space-y-3">
+    // `role="group"` only when a host actually named this container
+    // (objectui#3961); standalone rendering stays exactly as it was. That
+    // condition now lives in `toHostGroupProps` so this container and the
+    // readonly row above cannot answer differently (objectui#3990).
+    <div className="space-y-3" {...hostGroupProps}>
       <div className="flex items-center gap-2">
         <Button
           type="button"
@@ -115,9 +153,10 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
 
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <Label htmlFor="latitude" className="text-xs">Latitude</Label>
+          <Label htmlFor={subId('latitude')} className="text-xs">Latitude</Label>
           <Input
-            id="latitude"
+            {...domProps}
+            id={subId('latitude')}
             type="number"
             value={location.latitude ?? ''}
             onChange={(e) => handleFieldChange('latitude', e.target.value)}
@@ -125,19 +164,21 @@ export function GeolocationField({ value, onChange, field, readonly, ...props }:
             disabled={readonly || props.disabled}
             step="any"
             className={props.className}
+            aria-invalid={!!error}
           />
         </div>
         
         <div>
-          <Label htmlFor="longitude" className="text-xs">Longitude</Label>
+          <Label htmlFor={subId('longitude')} className="text-xs">Longitude</Label>
           <Input
-            id="longitude"
+            id={subId('longitude')}
             type="number"
             value={location.longitude ?? ''}
             onChange={(e) => handleFieldChange('longitude', e.target.value)}
             placeholder="-122.4194"
             disabled={readonly || props.disabled}
             step="any"
+            aria-invalid={!!error}
           />
         </div>
       </div>