@base-ui/react 1.2.0 → 1.4.0

package/esm/field/error/FieldError.js

@@ -29,6 +29,7 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
     id: idProp,
     className,
     match,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
@@ -44,13 +45,14 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
     errors
   } = useFormContext();
   const formError = name ? errors[name] : null;
+  const hasSpecificMatch = typeof match === 'string';
   let rendered = false;
-  if (formError || match === true) {
+  if (match === true) {
     rendered = true;
-  } else if (match) {
+  } else if (hasSpecificMatch) {
     rendered = Boolean(validityData.state[match]);
   } else {
-    rendered = validityData.state.valid === false;
+    rendered = Boolean(formError) || validityData.state.valid === false;
   }
   const {
     mounted,
@@ -69,11 +71,12 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
   const errorRef = React.useRef(null);
   const [lastRenderedMessage, setLastRenderedMessage] = React.useState(null);
   const [lastRenderedMessageKey, setLastRenderedMessageKey] = React.useState(null);
-  const errorMessage = formError || (validityData.errors.length > 1 ? /*#__PURE__*/_jsx("ul", {
+  const clientErrorMessage = validityData.errors.length > 1 ? /*#__PURE__*/_jsx("ul", {
     children: validityData.errors.map(message => /*#__PURE__*/_jsx("li", {
       children: message
     }, message))
-  }) : validityData.error);
+  }) : validityData.error;
+  const errorMessage = hasSpecificMatch ? clientErrorMessage : formError || clientErrorMessage;
   let errorKey = validityData.error;
   if (formError != null) {
     errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;

package/esm/field/error/FieldErrorDataAttributes.d.ts

@@ -27,4 +27,12 @@ export declare enum FieldErrorDataAttributes {
    * Present when the field control is focused.
    */
   focused = "data-focused",
+  /**
+   * Present when the error message is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the error message is animating out.
+   */
+  endingStyle = "data-ending-style",
 }

package/esm/field/error/FieldErrorDataAttributes.js

@@ -1,4 +1,5 @@
-export let FieldErrorDataAttributes = /*#__PURE__*/function (FieldErrorDataAttributes) {
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let FieldErrorDataAttributes = function (FieldErrorDataAttributes) {
   /**
    * Present when the field is disabled.
    */
@@ -27,5 +28,13 @@ export let FieldErrorDataAttributes = /*#__PURE__*/function (FieldErrorDataAttri
    * Present when the field control is focused.
    */
   FieldErrorDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the error message is animating in.
+   */
+  FieldErrorDataAttributes[FieldErrorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the error message is animating out.
+   */
+  FieldErrorDataAttributes[FieldErrorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return FieldErrorDataAttributes;
 }({});

package/esm/field/item/FieldItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
@@ -8,7 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldItem: React.ForwardRefExoticComponent<Omit<FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.State> {
+export interface FieldItemState extends FieldRootState {}
+export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItemState> {
   /**
    * Whether the wrapped control should ignore user interaction.
    * The `disabled` prop on `<Field.Root>` takes precedence over this.
@@ -17,6 +18,6 @@ export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.St
   disabled?: boolean | undefined;
 }
 export declare namespace FieldItem {
-  type State = FieldRoot.State;
+  type State = FieldItemState;
   type Props = FieldItemProps;
 }

package/esm/field/item/FieldItem.js

@@ -19,6 +19,7 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;
@@ -32,7 +33,7 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
   const parentId = checkboxGroupContext?.parent.id;
   // this a more reliable check
   const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const initialControlId = hasParentCheckbox ? parentId : undefined;
+  const controlId = hasParentCheckbox ? parentId : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);
@@ -43,7 +44,7 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
     stateAttributesMapping: fieldValidityMapping
   });
   return /*#__PURE__*/_jsx(LabelableProvider, {
-    initialControlId: initialControlId,
+    controlId: controlId,
     children: /*#__PURE__*/_jsx(FieldItemContext.Provider, {
       value: fieldItemContext,
       children: element

package/esm/field/label/FieldLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import type { FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An accessible label that is automatically associated with the field control.
@@ -8,11 +8,11 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type FieldLabelState = FieldRoot.State;
-export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabel.State> {
+export interface FieldLabelState extends FieldRootState {}
+export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabelState> {
   /**
    * Whether the component renders a native `<label>` element when replacing it via the `render` prop.
-   * Set to `false` if the rendered element is not a label (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a label (for example, `<div>`).
    *
    * This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button.
    * @default true

package/esm/field/label/FieldLabel.js

@@ -3,16 +3,11 @@
 import * as React from 'react';
 import { error } from '@base-ui/utils/error';
 import { SafeReact } from '@base-ui/utils/safeReact';
-import { isHTMLElement } from '@floating-ui/utils/dom';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { ownerDocument } from '@base-ui/utils/owner';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { getTarget } from "../../floating-ui-react/utils.js";
 import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { fieldValidityMapping } from "../utils/constants.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useLabel } from "../../labelable-provider/useLabel.js";
 
 /**
  * An accessible label that is automatically associated with the field control.
@@ -24,40 +19,19 @@ export const FieldLabel = /*#__PURE__*/React.forwardRef(function FieldLabel(comp
   const {
     render,
     className,
+    style,
     id: idProp,
     nativeLabel = true,
     ...elementProps
   } = componentProps;
   const fieldRootContext = useFieldRootContext(false);
   const {
-    controlId,
-    setLabelId,
     labelId
   } = useLabelableContext();
-  const id = useBaseUiId(idProp);
   const labelRef = React.useRef(null);
-  const handleInteraction = useStableCallback(event => {
-    const target = getTarget(event.nativeEvent);
-    if (target?.closest('button,input,select,textarea')) {
-      return;
-    }
-
-    // Prevent text selection when double clicking label.
-    if (!event.defaultPrevented && event.detail > 1) {
-      event.preventDefault();
-    }
-    if (nativeLabel || !controlId) {
-      return;
-    }
-    const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
-    if (isHTMLElement(controlElement)) {
-      controlElement.focus({
-        // Available from Chrome 144+ (January 2026).
-        // Safari and Firefox already support it.
-        // @ts-expect-error not available in types yet
-        focusVisible: true
-      });
-    }
+  const labelProps = useLabel({
+    id: labelId ?? idProp,
+    native: nativeLabel
   });
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -79,28 +53,10 @@ export const FieldLabel = /*#__PURE__*/React.forwardRef(function FieldLabel(comp
       }
     }, [nativeLabel]);
   }
-  useIsoLayoutEffect(() => {
-    if (id) {
-      setLabelId(id);
-    }
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
   const element = useRenderElement('label', componentProps, {
     ref: [forwardedRef, labelRef],
     state: fieldRootContext.state,
-    props: [{
-      id: labelId
-    }, nativeLabel ? {
-      htmlFor: controlId ?? undefined,
-      onMouseDown: handleInteraction
-    } : {
-      onClick: handleInteraction,
-      onPointerDown(event) {
-        event.preventDefault();
-      }
-    }, elementProps],
+    props: [labelProps, elementProps],
     stateAttributesMapping: fieldValidityMapping
   });
   return element;

package/esm/field/root/FieldRoot.d.ts

@@ -31,15 +31,32 @@ export interface FieldRootActions {
   validate: () => void;
 }
 export interface FieldRootState {
-  /** Whether the component should ignore user interaction. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled: boolean;
+  /**
+   * Whether the field has been touched.
+   */
   touched: boolean;
+  /**
+   * Whether the field value has changed from its initial value.
+   */
   dirty: boolean;
+  /**
+   * Whether the field is valid.
+   */
   valid: boolean | null;
+  /**
+   * Whether the field has a value.
+   */
   filled: boolean;
+  /**
+   * Whether the field is focused.
+   */
   focused: boolean;
 }
-export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRoot.State> {
+export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRootState> {
   /**
    * Whether the component should ignore user interaction.
    * Takes precedence over the `disabled` prop on the `<Field.Control>` component.

package/esm/field/root/FieldRoot.js

@@ -9,6 +9,7 @@ import { useFormContext } from "../../form/FormContext.js";
 import { LabelableProvider } from "../../labelable-provider/index.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useFieldValidation } from "./useFieldValidation.js";
+import { useFieldControlRegistration } from "./useFieldControlRegistration.js";
 
 /**
  * @internal
@@ -32,6 +33,7 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     dirty: dirtyProp,
     touched: touchedProp,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -62,7 +64,8 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     setTouchedUnwrapped(value);
   });
   const shouldValidateOnChange = useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
-  const invalid = Boolean(invalidProp || name && {}.hasOwnProperty.call(errors, name) && errors[name] !== undefined);
+  const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
+  const invalid = invalidProp === true || hasFormError;
   const [validityData, setValidityData] = React.useState({
     state: DEFAULT_VALIDITY_STATE,
     error: '',
@@ -94,6 +97,14 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     markedDirtyRef.current = true;
     validation.commit(validityData.value);
   }, [validation, validityData]);
+  const registerFieldControl = useFieldControlRegistration({
+    commit: validation.commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  });
   React.useImperativeHandle(actionsRef, () => ({
     validate: handleImperativeValidate
   }), [handleImperativeValidate]);
@@ -117,8 +128,9 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     shouldValidateOnChange,
     state,
     markedDirtyRef,
+    registerFieldControl,
     validation
-  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, validation]);
+  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,

package/esm/field/root/FieldRootContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { FieldRoot, FieldValidityData } from "./FieldRoot.js";
+import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
 import type { Form } from "../../form/index.js";
 import type { UseFieldValidationReturnValue } from "./useFieldValidation.js";
+import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
 export interface FieldRootContext {
   invalid: boolean | undefined;
   name: string | undefined;
@@ -20,8 +21,9 @@ export interface FieldRootContext {
   validationMode: Form.ValidationMode;
   validationDebounceTime: number;
   shouldValidateOnChange: () => boolean;
-  state: FieldRoot.State;
+  state: FieldRootState;
   markedDirtyRef: React.RefObject<boolean>;
+  registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }
 export declare const FieldRootContext: React.Context<FieldRootContext>;

package/esm/field/root/FieldRootContext.js

@@ -3,7 +3,7 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 import { NOOP } from "../../utils/noop.js";
-import { DEFAULT_VALIDITY_STATE } from "../utils/constants.js";
+import { DEFAULT_FIELD_ROOT_STATE, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_VALIDITY_STATE } from "../utils/constants.js";
 import { EMPTY_OBJECT } from "../../utils/constants.js";
 export const FieldRootContext = /*#__PURE__*/React.createContext({
   invalid: undefined,
@@ -17,29 +17,23 @@ export const FieldRootContext = /*#__PURE__*/React.createContext({
   },
   setValidityData: NOOP,
   disabled: undefined,
-  touched: false,
+  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
   setTouched: NOOP,
-  dirty: false,
+  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
   setDirty: NOOP,
-  filled: false,
+  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
   setFilled: NOOP,
-  focused: false,
+  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
   setFocused: NOOP,
   validate: () => null,
   validationMode: 'onSubmit',
   validationDebounceTime: 0,
   shouldValidateOnChange: () => false,
-  state: {
-    disabled: false,
-    valid: null,
-    touched: false,
-    dirty: false,
-    filled: false,
-    focused: false
-  },
+  state: DEFAULT_FIELD_ROOT_STATE,
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: NOOP,
   validation: {
     getValidationProps: (props = EMPTY_OBJECT) => props,
     getInputValidationProps: (props = EMPTY_OBJECT) => props,

package/esm/field/root/useFieldControlRegistration.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { FieldValidityData } from "./FieldRoot.js";
+export interface FieldControlRegistration {
+  controlRef: React.RefObject<any>;
+  getValue?: (() => unknown) | undefined;
+  id: string | undefined;
+  value: unknown;
+}
+export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): (source: symbol, registration: FieldControlRegistration | undefined) => void;
+export interface UseFieldControlRegistrationParameters {
+  commit: (value: unknown) => void;
+  invalid: boolean;
+  markedDirtyRef: React.RefObject<boolean>;
+  name: string | undefined;
+  setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
+  validityData: FieldValidityData;
+}

package/esm/field/root/useFieldControlRegistration.js

@@ -0,0 +1,125 @@
+'use client';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityData.js";
+import { useFormContext } from "../../form/FormContext.js";
+export function useFieldControlRegistration(params) {
+  const {
+    commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  } = params;
+  const {
+    formRef
+  } = useFormContext();
+  const activeFieldControlSourceRef = React.useRef(null);
+  const registrationRef = React.useRef(null);
+  const fallbackControlRef = React.useRef(null);
+  const getValue = useStableCallback(() => {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return undefined;
+    }
+    if (registration.getValue) {
+      return registration.getValue();
+    }
+    return registration.value;
+  });
+  const validate = useStableCallback((flushSync = true) => {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    let nextValue = registration.value;
+    if (nextValue === undefined) {
+      nextValue = getValue();
+    }
+    markedDirtyRef.current = true;
+    if (!flushSync) {
+      commit(nextValue);
+    } else {
+      // Synchronously update the validity state so the submit event can be prevented.
+      ReactDOM.flushSync(() => commit(nextValue));
+    }
+  });
+  function refreshRegistration() {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue,
+      name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: getCombinedFieldValidityData(validityData, invalid),
+      validate
+    });
+  }
+  function deleteRegistration(id = registrationRef.current?.id) {
+    if (id) {
+      formRef.current.fields.delete(id);
+    }
+  }
+  function syncInitialValue() {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    let initialValue = registration.value;
+    if (initialValue === undefined) {
+      initialValue = getValue();
+    }
+    if (validityData.initialValue === null && initialValue !== null) {
+      setValidityData(prev => ({
+        ...prev,
+        initialValue
+      }));
+    }
+  }
+  useIsoLayoutEffect(() => {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue,
+      name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: getCombinedFieldValidityData(validityData, invalid),
+      validate
+    });
+  }, [formRef, getValue, invalid, name, validate, validityData]);
+  useIsoLayoutEffect(() => {
+    const fields = formRef.current.fields;
+    return () => {
+      const id = registrationRef.current?.id;
+      if (id) {
+        fields.delete(id);
+      }
+    };
+  }, [formRef]);
+  return useStableCallback((source, registration) => {
+    if (!registration) {
+      if (activeFieldControlSourceRef.current === source) {
+        activeFieldControlSourceRef.current = null;
+        deleteRegistration();
+        registrationRef.current = null;
+      }
+      return;
+    }
+    const previousId = registrationRef.current?.id;
+    activeFieldControlSourceRef.current = source;
+    registrationRef.current = registration;
+    if (previousId && previousId !== registration.id) {
+      deleteRegistration(previousId);
+    }
+    syncInitialValue();
+    refreshRegistration();
+  });
+}

package/esm/field/root/useFieldValidation.js

@@ -191,6 +191,7 @@ export function useFieldValidation(params) {
       if (currentFieldData) {
         formRef.current.fields.set(controlId, {
           ...currentFieldData,
+          // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
           ...getCombinedFieldValidityData(nextValidityData, invalid)
         });
       }
@@ -211,9 +212,9 @@ export function useFieldValidation(params) {
         commit(event.currentTarget.value, true);
         return;
       }
-      if (invalid) {
-        return;
-      }
+
+      // When validating on change, run client-side validation even if
+      // externally invalid
       const element = event.currentTarget;
       if (element.value === '') {
         // Ignore the debounce time for empty values.
@@ -229,7 +230,7 @@ export function useFieldValidation(params) {
         commit(element.value);
       }
     }
-  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, invalid, validationDebounceTime, shouldValidateOnChange]);
+  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, validationDebounceTime, shouldValidateOnChange]);
   return React.useMemo(() => ({
     getValidationProps,
     getInputValidationProps,

package/esm/field/root/useRegisterFieldControl.d.ts

@@ -0,0 +1,5 @@
+import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
+export interface UseRegisterFieldControlParameters extends FieldControlRegistration {
+  enabled?: boolean | undefined;
+}
+export declare function useRegisterFieldControl(controlRef: FieldControlRegistration['controlRef'], params: Omit<UseRegisterFieldControlParameters, 'controlRef'>): void;

package/esm/field/root/useRegisterFieldControl.js

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useFieldRootContext } from "./FieldRootContext.js";
+export function useRegisterFieldControl(controlRef, params) {
+  const {
+    enabled = true,
+    getValue,
+    id,
+    value
+  } = params;
+  const {
+    registerFieldControl
+  } = useFieldRootContext();
+  const sourceRef = React.useRef(null);
+  if (!sourceRef.current) {
+    sourceRef.current = Symbol();
+  }
+  useIsoLayoutEffect(() => {
+    const source = sourceRef.current;
+    if (!source || !enabled) {
+      return undefined;
+    }
+    registerFieldControl(source, {
+      controlRef,
+      getValue,
+      id,
+      value
+    });
+    return () => {
+      registerFieldControl(source, undefined);
+    };
+  }, [controlRef, enabled, getValue, id, registerFieldControl, value]);
+}

package/esm/field/utils/constants.d.ts

@@ -1,3 +1,4 @@
+import type { FieldRootState } from "../root/FieldRoot.js";
 export declare const DEFAULT_VALIDITY_STATE: {
   badInput: boolean;
   customError: boolean;
@@ -11,6 +12,8 @@ export declare const DEFAULT_VALIDITY_STATE: {
   valid: null;
   valueMissing: boolean;
 };
+export declare const DEFAULT_FIELD_STATE_ATTRIBUTES: Pick<FieldRootState, 'valid' | 'touched' | 'dirty' | 'filled' | 'focused'>;
+export declare const DEFAULT_FIELD_ROOT_STATE: FieldRootState;
 export declare const fieldValidityMapping: {
   valid(value: boolean | null): Record<string, string> | null;
 };

package/esm/field/utils/constants.js

@@ -12,6 +12,17 @@ export const DEFAULT_VALIDITY_STATE = {
   valid: null,
   valueMissing: false
 };
+export const DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+export const DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
 export const fieldValidityMapping = {
   valid(value) {
     if (value === null) {