@object-ui/fields 17.1.0 → 17.3.0

package/src/widgets/AvatarField.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { Avatar, AvatarFallback, AvatarImage, Button } from '@object-ui/components';
 import { Upload, X } from 'lucide-react';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Avatar field widget - provides an avatar/profile picture uploader
  * Supports image URLs or file uploads
  */
-export function AvatarField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function AvatarField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const [isHovered, setIsHovered] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   
-  const avatarField = (field || (props as any).schema) as any;
+  const avatarField = field as any;
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -92,11 +93,17 @@ export function AvatarField({ value, onChange, field, readonly, ...props }: Fiel
           className="hidden"
         />
         <Button
+          // DOM pass-through onto the widget's real focusable control — the
+          // upload button is the keyboard path to the hidden file input
+          // (objectui#3318).
+          {...toDomProps(props)}
           type="button"
           variant="outline"
           size="sm"
           onClick={() => fileInputRef.current?.click()}
           disabled={readonly || props.disabled}
+          // AFTER the spread so this widget's own computation wins (#3222).
+          aria-invalid={!!error}
         >
           <Upload className="w-4 h-4 mr-2" />
           {value ? 'Change' : 'Upload'} Avatar

package/src/widgets/BooleanField.tsx

@@ -1,13 +1,14 @@
 import React, { useId } from 'react';
 import { Switch, Checkbox, Label } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * BooleanField - Toggle input supporting switch and checkbox variants
  * Renders as Switch or Checkbox based on field widget configuration
  */
-export function BooleanField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<boolean>) {
-  const config = (field || (props as any).schema) as any;
+export function BooleanField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<boolean>) {
+  const config = field as any;
   // Use simple type assertion for arbitrary custom properties not in BaseFieldMetadata
   const widget = config?.widget;
   // Generate unique ID using React's useId hook - must be before early returns (rules of hooks)
@@ -19,8 +20,7 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
     return <span className="text-sm">{value ? 'Yes' : 'No'}</span>;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   if (widget === 'checkbox') {
      return (

package/src/widgets/CapabilityMultiSelectField.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Badge, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { DataSource, QueryParams } from '@object-ui/types';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -86,12 +86,12 @@ export function CapabilityMultiSelectField({
   readonly,
   className,
   ...props
-}: FieldWidgetProps<string | string[]>) {
+}: FieldWidgetComponentProps<string | string[]>) {
   const { t } = useFieldTranslation();
   const ctx = React.useContext(SchemaRendererContext);
   const dataSource: DataSource | null =
-    (props as any).dataSource ?? (ctx as any)?.dataSource ?? null;
-  const disabled = (props as any).disabled as boolean | undefined;
+    (props.dataSource as any) ?? (ctx as any)?.dataSource ?? null;
+  const disabled = props.disabled;
 
   const [caps, setCaps] = React.useState<Capability[] | null>(null);
 

package/src/widgets/CharacterCount.tsx

@@ -0,0 +1,263 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { useFieldTranslation } from './useFieldTranslation';
+
+/**
+ * The character counter a capped long-text field renders, in the GOV.UK
+ * character-count shape — extracted from `TextAreaField` so that widget's TWO
+ * editing surfaces (the inline textarea and the fullscreen dialog) render the
+ * SAME counting UI instead of two hand-written copies (objectui#3417).
+ *
+ * ## Why this is shared rather than copied
+ *
+ * objectui#3408 gave the inline counter three nodes — decorative digits, an
+ * accessible description, a gated status region. The fullscreen dialog's
+ * counter, passed to `FullscreenFieldEditor` as a `footer`, stayed what it had
+ * always been: a bare `{n}/{max}` `span` with no accessible name, no
+ * `aria-describedby` association with the dialog's textarea, and nothing
+ * `aria-live`. Same field, same cap, same user — and a screen reader in the
+ * fullscreen dialog got nothing at all, while browse mode read "5 slash 500".
+ *
+ * That is the failure mode this package keeps paying for (objectui#3301: the
+ * fullscreen flag reached `RichTextField` for as long as the feature existed
+ * and that widget never read it). A second hand-written copy of a counting UI
+ * is the same failure with an extra step: it drifts, and nothing reports the
+ * drift. So the counter has ONE implementation and each surface renders it.
+ *
+ * ## The three nodes, and why the third is a prop
+ *
+ * 1. the visible `{n}/{max}` digits, `aria-hidden` — a glance affordance;
+ * 2. a visually-hidden DESCRIPTION carrying the translated sentence. The host
+ *    owns {@link CharacterCountProps.descriptionId} and MUST name it in the
+ *    edited control's `aria-describedby`, which is what makes the sentence
+ *    reachable on focus rather than only in browse mode;
+ * 3. a visually-hidden `aria-live="polite"` STATUS region, silent until the
+ *    value is inside the last 10% / 20 characters of the cap and updated only
+ *    after the typist pauses.
+ *
+ * Node 3 is opt-in per surface ({@link CharacterCountProps.announceNearLimit}),
+ * required rather than defaulted, because "should this surface interrupt the
+ * user while they type?" is a real decision and neither answer should be
+ * reached by leaving a prop off. The fullscreen dialog answers no: it is a
+ * modal the user opened deliberately to write at length, the description
+ * already tells them the cap on focus, and the dialog's own textarea carries
+ * the same native `maxLength` stop as the inline one. The inline surface
+ * answers yes, unchanged from objectui#3408.
+ */
+
+/**
+ * How long the typist must pause before the counter's status region is allowed
+ * to change (objectui#3408). The GOV.UK Design System character-count component
+ * uses the same shape and the same order of magnitude.
+ *
+ * The number this replaces was effectively 0: the counter WAS the live region,
+ * so every keystroke re-rendered it and every re-render was an announcement.
+ * Measured on `origin/main`, zh session, `maxLength: 500`, typing a 52-character
+ * sentence one character at a time: 52 keystrokes produced 52 distinct
+ * announcements totalling 979 spoken characters — ~19x the text the user was
+ * trying to write, each one interrupting the screen reader's echo of what they
+ * had just typed.
+ */
+const COUNTER_STATUS_DEBOUNCE_MS = 1000;
+
+/** Announce inside the last 10% of the cap … */
+const COUNTER_STATUS_REMAINING_RATIO = 0.1;
+/** … or the last 20 characters — whichever the typist reaches FIRST. */
+const COUNTER_STATUS_MIN_REMAINING = 20;
+
+/**
+ * The remaining-character count at or below which the status region speaks.
+ *
+ * "10% remaining OR 20 characters remaining, whichever comes first" is a
+ * disjunction, and because `remaining` only ever counts DOWN as the user types,
+ * the branch that fires first is simply the LARGER of the two — hence `max`.
+ * A 500-character cap starts warning at 50 remaining; a 100-character cap at 20
+ * (10% of it would be 10, which the typist would reach later, not sooner).
+ *
+ * A cap smaller than {@link COUNTER_STATUS_MIN_REMAINING} is therefore "near
+ * the limit" from the first keystroke, which is correct: on a 10-character
+ * field every character genuinely is one of the last few. The debounce still
+ * bounds it to one announcement per pause.
+ */
+function counterStatusThreshold(maxLength: number): number {
+  return Math.max(
+    Math.ceil(maxLength * COUNTER_STATUS_REMAINING_RATIO),
+    COUNTER_STATUS_MIN_REMAINING,
+  );
+}
+
+export interface CharacterCountProps {
+  /**
+   * Length of the text this surface is counting. The inline surface passes the
+   * committed value's length; the fullscreen dialog passes the DRAFT's, which
+   * is the number that is true of what the user is looking at.
+   */
+  length: number;
+  /**
+   * The declared cap. Callers render this component only when the field
+   * declares one, so it is non-optional here — a counter with no cap to count
+   * against has nothing to say and must not be mounted at all (an unconditional
+   * live region in every long-text field is the objectui#3408 defect back
+   * again).
+   */
+  maxLength: number;
+  /**
+   * The description node's `id`, minted by the host from `useId()`.
+   *
+   * The host MUST also name it in the edited control's `aria-describedby` —
+   * this component renders the sentence, only the host knows which element is
+   * being described, and a description nothing references is a node no screen
+   * reader will ever reach. That association is asserted from the OUTSIDE (the
+   * tests resolve `aria-describedby` and concatenate the referenced nodes' text,
+   * exactly as an assistive technology does) rather than trusted here.
+   *
+   * Two surfaces of one widget therefore need two ids: the dialog's draft and
+   * the inline value diverge the moment the user types in the dialog, so one
+   * shared id would point both controls at whichever sentence rendered last.
+   */
+  descriptionId: string;
+  /**
+   * Render node 3, the threshold-gated debounced `aria-live` status region.
+   *
+   * Required on purpose — see the component doc above. `false` removes the
+   * region from the DOM entirely (not merely empties it), which is the only
+   * form of "no live region" a test can tell apart from "a live region that
+   * happens to be silent right now".
+   */
+  announceNearLimit: boolean;
+  /**
+   * Classes for the visible digits. Required because placement is entirely the
+   * surface's business — inline pins them to the textarea's bottom-right
+   * corner, the dialog lays them out as a footer item — and a default borrowed
+   * from either one would position the other wrongly while looking deliberate.
+   */
+  className: string;
+  /**
+   * `data-testid` for the visible digits, namespaced per surface
+   * (`textarea-character-count`, `textarea-fullscreen-character-count`) so a
+   * test that finds digits can say WHICH surface it found them on. Same
+   * convention, same reason, as `FullscreenFieldEditor`'s `testIdPrefix`.
+   */
+  testId: string;
+}
+
+export function CharacterCount({
+  length,
+  maxLength,
+  descriptionId,
+  announceNearLimit,
+  className,
+  testId,
+}: CharacterCountProps) {
+  const { t } = useFieldTranslation();
+
+  /**
+   * The counter sentence as a DESCRIPTION (objectui#3408). Reached through the
+   * edited control's `aria-describedby`, so focusing it says "12 characters,
+   * 500 max" once and then shuts up. Before this the cap was announced only as
+   * a side effect of typing — focus told a screen reader user nothing at all
+   * that a sighted user could read off the corner of the box.
+   */
+  const description = t('fields.textarea.characterCount', { count: length, max: maxLength });
+
+  /**
+   * The near-limit warning, gated. Silent for the whole comfortable middle of
+   * the field — a count nobody is close to is not news — and phrased as what
+   * is LEFT rather than what has been typed, because that is the number the
+   * user is about to act on. Over-long values (a cap lowered after the record
+   * was saved) clamp to 0: the textarea's own `maxLength` blocks further
+   * input, so "0 left" is the true actionable state, and the description above
+   * still carries the honest `503 of 500`.
+   *
+   * Short-circuited by `announceNearLimit` rather than only hidden at render
+   * time, so a surface that renders no status region also schedules no timer —
+   * a debounce firing into a region that does not exist is a state update with
+   * no consumer, and in tests an `act()` warning with no cause.
+   */
+  const pendingStatus =
+    announceNearLimit && maxLength - length <= counterStatusThreshold(maxLength)
+      ? t('fields.textarea.charactersRemaining', { count: Math.max(maxLength - length, 0) })
+      : '';
+
+  /**
+   * The last sentence a PAUSE settled on. Only ever written by the timer —
+   * never cleared synchronously — so this effect adds no cascading render on
+   * the keystrokes it is busy staying quiet through
+   * (`react-hooks/set-state-in-effect`).
+   */
+  const [settledStatus, setSettledStatus] = useState('');
+
+  useEffect(() => {
+    if (!pendingStatus) return;
+    const timer = setTimeout(() => setSettledStatus(pendingStatus), COUNTER_STATUS_DEBOUNCE_MS);
+    // Every keystroke cancels the previous pending announcement, so a typist
+    // who never pauses is never interrupted. The dependency is the SENTENCE,
+    // not the length: re-typing back to the same count produces the same string
+    // and therefore no DOM change and no second announcement.
+    return () => clearTimeout(timer);
+  }, [pendingStatus]);
+
+  /**
+   * Speak the settled sentence only while it is still TRUE — i.e. while it is
+   * the one the current value would produce. Everything else renders empty,
+   * which costs no speech (emptying a live region announces nothing), and that
+   * is what makes leaving the warning band silent IMMEDIATELY rather than a
+   * second later.
+   *
+   * The obvious alternative, `pendingStatus ? settledStatus : ''`, is wrong in
+   * one specific way: delete back out of the band and type into it again, and
+   * the region re-announces the STALE count from before the excursion a full
+   * second before the timer corrects it. Announcing a wrong number is worse
+   * than announcing a right one twice, which is the bounded, sub-second,
+   * correct-content cost of the comparison below. Pinned by `never
+   * re-announces the STALE count when the user types back into the band`.
+   */
+  const status = settledStatus === pendingStatus ? pendingStatus : '';
+
+  return (
+    <>
+      {/*
+        The VISIBLE counter, and visible ONLY (objectui#3408). It used to be
+        three things at once: the digits a sighted user glances at, the carrier
+        of the translated sentence (objectui#3406), and the live region itself —
+        so the sentence was re-announced on every single keystroke. Split into
+        the three nodes here, this one is decorative: `aria-hidden` keeps a
+        screen reader from reading "5 slash 200" on top of the description that
+        says it properly.
+      */}
+      <div className={className} aria-hidden="true" data-testid={testId}>
+        {length}/{maxLength}
+      </div>
+
+      {/*
+        The DESCRIPTION. Referenced by the edited control's `aria-describedby`,
+        never announced on its own — a screen reader reads it when focus lands
+        on the control and not again. Visually hidden because the digits above
+        already say it to the eye.
+      */}
+      <span id={descriptionId} className="sr-only">
+        {description}
+      </span>
+
+      {/*
+        The STATUS region, on the surfaces that opted in. Rendered
+        unconditionally there and starting EMPTY on purpose: a live region has
+        to be in the DOM before its content changes or the first change is not
+        announced at all. `aria-atomic` so the whole sentence is spoken rather
+        than the digits that differ from last time.
+      */}
+      {announceNearLimit && (
+        <span className="sr-only" aria-live="polite" aria-atomic="true">
+          {status}
+        </span>
+      )}
+    </>
+  );
+}

package/src/widgets/CheckboxesField.tsx

@@ -1,7 +1,9 @@
 import React, { useId, useEffect } from 'react';
 import { Checkbox, Label, EmptyValue, Badge } from '@object-ui/components';
 import type { OptionLike } from '@object-ui/core';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
 type Option = OptionLike;
@@ -24,18 +26,18 @@ export function CheckboxesField({
   field,
   readonly,
   className,
-  schema,
   dependentValues,
   dependsOn: dependsOnProp,
-  emptyHint: _emptyHint,
+  emptyHint,
   dataSource: _dataSource,
+  error,
   ...props
-}: FieldWidgetProps<string[]>) {
-  const config = (field || schema) as any;
+}: FieldWidgetComponentProps<string[]>) {
+  const config = field as any;
   const rawOptions: Option[] = config?.options || [];
   const selected: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
   const groupId = useId();
-  const fieldName = (props as any).name || config?.name || (props as any).id || '';
+  const fieldName = props.name || config?.name || props.id || '';
 
   const dependsOn = config?.dependsOn ?? dependsOnProp;
   const { options, gated, dependsOnFields } = useCascadingOptions<Option>(
@@ -70,19 +72,18 @@ export function CheckboxesField({
   }
 
   // No offered options is unfillable — surface a legible state instead of an
-  // empty checkbox list: a dependency-gated list prompts for its controlling
-  // field; an unconfigured / fully-filtered list says so. Mirrors the select.
+  // empty checkbox list: the host's `emptyHint` when it computed one, else this
+  // widget's own translated copy. Shared with the select / multiselect / radio
+  // so the four cannot drift again (objectui#3231).
   if (options.length === 0) {
-    const hint = gated
-      ? `Select ${dependsOnFields.join(' / ')} first`
-      : 'No options available';
     return (
-      <div
-        data-testid={fieldName ? `checkboxes-empty-${fieldName}` : undefined}
-        className="flex min-h-9 w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
-      >
-        {hint}
-      </div>
+      <OptionsEmptyState
+        emptyHint={emptyHint}
+        gated={gated}
+        dependsOnFields={dependsOnFields}
+        testId={fieldName ? `checkboxes-empty-${fieldName}` : undefined}
+        className="min-h-9"
+      />
     );
   }
 
@@ -91,8 +92,23 @@ export function CheckboxesField({
     onChange(next);
   };
 
+  // DOM pass-through (objectui#3318): the container carries the form
+  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
+  // wrapper div is not where assistive tech reads the invalid state. That
+  // state goes onto every focusable checkbox below (`checkbox` is an
+  // aria-invalid-supporting role), computed from the published `error` slot
+  // (#3222). The per-item ids below stay authoritative for their labels.
+  // `name` is withheld too: it is only DOM-legal on form controls, and on
+  // this div it is exactly the leak #3291 sweeps for.
+  const {
+    'aria-invalid': _hostAriaInvalid,
+    name: _domName,
+    ...groupDomProps
+  } = toDomProps(props);
+
   return (
     <div
+      {...groupDomProps}
       className={className}
       data-testid={fieldName ? `checkboxes-${fieldName}` : undefined}
     >
@@ -107,7 +123,8 @@ export function CheckboxesField({
               id={id}
               checked={selected.includes(value)}
               onCheckedChange={(checked) => toggle(value, !!checked)}
-              disabled={(props as any).disabled}
+              disabled={props.disabled}
+              aria-invalid={!!error}
               data-testid={`checkboxes-option-${value}`}
             />
             <Label htmlFor={id} className="font-normal">{opt.label}</Label>

package/src/widgets/CodeField.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Textarea, cn, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Code field widget - provides a code editor with syntax highlighting
  * Uses a simple textarea with monospace font
  * For advanced code editing, use the @object-ui/plugin-editor component
  */
-export function CodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
-  const config = field || (props as any).schema;
+export function CodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  const config = field;
   // Get code-specific configuration from field metadata
   const language = (config as any)?.language ?? 'javascript';
 
@@ -22,6 +23,8 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
 
   return (
     <Textarea
+      // DOM pass-through onto the real focusable control (objectui#3318).
+      {...toDomProps(props)}
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || `// Write ${language} code here...`}
@@ -29,6 +32,10 @@ export function CodeField({ value, onChange, field, readonly, ...props }: FieldW
       className={cn("font-mono text-sm", props.className)}
       rows={12}
       spellCheck={false}
+      // AFTER the spread so this widget's own computation wins: `error` is
+      // the published validation slot (#3222), `!!undefined` → explicit
+      // "false".
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/ColorField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * Color field widget - provides a color picker input
  * Supports hex color values (e.g., #ff0000)
  */
-export function ColorField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
-  const colorField = (field || (props as any).schema) as any;
+export function ColorField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  const colorField = field as any;
 
   if (readonly) {
     return (
@@ -29,8 +30,14 @@ export function ColorField({ value, onChange, field, readonly, ...props }: Field
         onChange={(e) => onChange(e.target.value)}
         disabled={readonly || props.disabled}
         className="w-10 h-10 rounded border border-input cursor-pointer"
+        // Both focusable halves of this widget announce the same validation
+        // state (objectui#3318).
+        aria-invalid={!!error}
       />
       <Input
+        // DOM pass-through onto the primary text control (objectui#3318): the
+        // whitelist spread carries the form renderer's id / aria-describedby.
+        {...toDomProps(props)}
         type="text"
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
@@ -38,6 +45,8 @@ export function ColorField({ value, onChange, field, readonly, ...props }: Field
         disabled={readonly || props.disabled}
         className={props.className}
         pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
+        // AFTER the spread so this widget's own computation wins (#3222).
+        aria-invalid={!!error}
       />
     </div>
   );

package/src/widgets/CurrencyField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useLocalization } from '@object-ui/i18n';
 import { resolveFieldCurrency } from '../currency';
 
@@ -36,8 +37,8 @@ const CURRENCY_SYMBOLS: Record<string, string> = {
   USD: '$',
 };
 
-export function CurrencyField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<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 currency: string | undefined = resolveFieldCurrency(currencyField, tenantCurrency);
@@ -70,7 +71,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         </span>
       )}
       <Input
-        {...props}
+        {...toDomProps(props)}
         type="number"
         value={value ?? ''}
         onChange={(e) => {
@@ -87,7 +88,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,19 +1,19 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { openNativePicker } from './openNativePicker';
 
 /**
  * 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 }: FieldWidgetProps<string>) {
+export function DateField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
   if (readonly) {
     return value ? <span className="text-sm">{new Date(value).toLocaleDateString()}</span> : <EmptyValue />;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input

package/src/widgets/DateTimeField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { openNativePicker } from './openNativePicker';
 
 /**
  * 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 }: FieldWidgetProps<string>) {
+export function DateTimeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
   if (readonly) {
     if (!value) return <EmptyValue />;
     const date = new Date(value);
@@ -18,8 +19,7 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
     );
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input

package/src/widgets/EmailField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
-import { FieldWidgetProps } from './types';
+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 }: FieldWidgetProps<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}
     />
   );
 }