diff --git a/package.json b/package.json
index 8621665a..4ebbc72c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
 		"@conform-to/validitystate": "workspace:*",
 		"@conform-to/yup": "workspace:*",
 		"@conform-to/zod": "workspace:*",
-		"@playwright/test": "^1.44.1",
+		"@playwright/test": "^1.49.0",
 		"@types/node": "^20.10.4",
 		"@typescript-eslint/eslint-plugin": "^7.11.0",
 		"@typescript-eslint/parser": "^7.11.0",
diff --git a/packages/conform-dom/dom.ts b/packages/conform-dom/dom.ts
index 5c8399eb..a075e635 100644
--- a/packages/conform-dom/dom.ts
+++ b/packages/conform-dom/dom.ts
@@ -4,10 +4,11 @@ import { invariant } from './util';
  * Element that user can interact with,
  * includes `<input>`, `<select>` and `<textarea>`.
  */
-export type FieldElement =
+export type FieldElement = (
 	| HTMLInputElement
 	| HTMLSelectElement
-	| HTMLTextAreaElement;
+	| HTMLTextAreaElement
+) & { form: HTMLFormElement };
 
 /**
  * HTML Element that can be used as a form control,
@@ -37,12 +38,19 @@ export function isFormControl(element: unknown): element is FormControl {
  * A type guard to check if the provided element is a field element, which
  * is a form control excluding submit, button and reset type.
  */
-export function isFieldElement(element: unknown): element is FieldElement {
+export function isFieldElement(
+	element: unknown,
+	form?: HTMLFormElement,
+): element is FieldElement {
 	return (
 		isFormControl(element) &&
 		element.type !== 'submit' &&
 		element.type !== 'button' &&
-		element.type !== 'reset'
+		element.type !== 'reset' &&
+		element.name !== '' &&
+		element.form !== null &&
+		element.form.isConnected &&
+		(typeof form === 'undefined' || element.form === form)
 	);
 }
 
@@ -128,3 +136,100 @@ export function requestSubmit(
 		form.dispatchEvent(event);
 	}
 }
+
+/**
+ * Synchronizes the field elements with the provided state
+ */
+export function syncFieldValue(
+	element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+	value: unknown,
+	defaultValue: unknown,
+): void {
+	const getInputValue = (value: unknown): string[] =>
+		typeof value === 'string'
+			? [value]
+			: Array.isArray(value) && value.every((item) => typeof item === 'string')
+				? value
+				: [];
+
+	if (element instanceof HTMLInputElement) {
+		switch (element.type) {
+			case 'checkbox':
+			case 'radio':
+				element.checked = getInputValue(value).includes(element.value);
+				element.defaultChecked = getInputValue(defaultValue).includes(
+					element.value,
+				);
+				break;
+			case 'file':
+				// Do nothing for now
+				break;
+			default:
+				element.value = getInputValue(value)[0] ?? '';
+				element.defaultValue = getInputValue(defaultValue)[0] ?? '';
+				break;
+		}
+	} else if (element instanceof HTMLSelectElement) {
+		for (const option of element.options) {
+			option.selected = getInputValue(value).includes(option.value);
+			option.defaultSelected = getInputValue(defaultValue).includes(
+				option.value,
+			);
+		}
+	} else {
+		element.value = getInputValue(value)[0] ?? '';
+		element.defaultValue = getInputValue(defaultValue)[0] ?? '';
+	}
+}
+
+export function syncFieldConstraint(
+	element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+	constraint: {
+		required?: boolean;
+		minLength?: number;
+		maxLength?: number;
+		min?: string | number;
+		max?: string | number;
+		step?: string | number;
+		multiple?: boolean;
+		pattern?: string;
+	},
+): void {
+	if (
+		typeof constraint.required !== 'undefined' &&
+		// If the element is a part of the checkbox group, it is unclear whether all checkboxes are required or only one.
+		!(
+			element.type === 'checkbox' &&
+			element.form?.elements.namedItem(element.name) instanceof RadioNodeList
+		)
+	) {
+		element.required = constraint.required;
+	}
+
+	if (typeof constraint.multiple !== 'undefined' && 'multiple' in element) {
+		element.multiple = constraint.multiple;
+	}
+
+	if (typeof constraint.minLength !== 'undefined' && 'minLength' in element) {
+		element.minLength = constraint.minLength;
+	}
+
+	if (typeof constraint.maxLength !== 'undefined' && 'maxLength' in element) {
+		element.maxLength = constraint.maxLength;
+	}
+	if (typeof constraint.min !== 'undefined' && 'min' in element) {
+		element.min = `${constraint.min}`;
+	}
+
+	if (typeof constraint.max !== 'undefined' && 'max' in element) {
+		element.max = `${constraint.max}`;
+	}
+
+	if (typeof constraint.step !== 'undefined' && 'step' in element) {
+		element.step = `${constraint.step}`;
+	}
+
+	if (typeof constraint.pattern !== 'undefined' && 'pattern' in element) {
+		element.pattern = constraint.pattern;
+	}
+}
diff --git a/packages/conform-dom/form.ts b/packages/conform-dom/form.ts
index 66717aa0..64ecaade 100644
--- a/packages/conform-dom/form.ts
+++ b/packages/conform-dom/form.ts
@@ -17,6 +17,8 @@ import {
 	getFormEncType,
 	getFormMethod,
 	requestSubmit,
+	syncFieldValue,
+	syncFieldConstraint,
 } from './dom';
 import { clone, generateId, invariant } from './util';
 import {
@@ -230,7 +232,7 @@ export type FormContext<
 	onInput(event: Event): void;
 	onBlur(event: Event): void;
 	onUpdate(options: Partial<FormOptions<Schema, FormError, FormValue>>): void;
-	observe(): () => void;
+	syncFormValue(): void;
 	subscribe(
 		callback: () => void,
 		getSubject?: () => SubscriptionSubject | undefined,
@@ -260,9 +262,9 @@ export type FormContext<
 
 function createFormMeta<Schema, FormError, FormValue>(
 	options: FormOptions<Schema, FormError, FormValue>,
-	initialized?: boolean,
+	isResetting?: boolean,
 ): FormMeta<FormError> {
-	const lastResult = !initialized ? options.lastResult : undefined;
+	const lastResult = !isResetting ? options.lastResult : undefined;
 	const defaultValue = options.defaultValue
 		? (serialize(options.defaultValue) as Record<string, unknown>)
 		: {};
@@ -276,12 +278,7 @@ function createFormMeta<Schema, FormError, FormValue>(
 		value: initialValue,
 		constraint: options.constraint ?? {},
 		validated: lastResult?.state?.validated ?? {},
-		key: !initialized
-			? getDefaultKey(defaultValue)
-			: {
-					'': generateId(),
-					...getDefaultKey(defaultValue),
-				},
+		key: getDefaultKey(defaultValue),
 		// The `lastResult` should comes from the server which we won't expect the error to be null
 		// We can consider adding a warning if it happens
 		error: (lastResult?.error as Record<string, FormError>) ?? {},
@@ -298,15 +295,20 @@ function getDefaultKey(
 ): Record<string, string> {
 	return Object.entries(flatten(defaultValue, { prefix })).reduce<
 		Record<string, string>
-	>((result, [key, value]) => {
-		if (Array.isArray(value)) {
-			for (let i = 0; i < value.length; i++) {
-				result[formatName(key, i)] = generateId();
+	>(
+		(result, [key, value]) => {
+			if (Array.isArray(value)) {
+				for (let i = 0; i < value.length; i++) {
+					result[formatName(key, i)] = generateId();
+				}
 			}
-		}
 
-		return result;
-	}, {});
+			return result;
+		},
+		{
+			[prefix ?? '']: generateId(),
+		},
+	);
 }
 
 function setFieldsValidated<Error>(
@@ -438,10 +440,8 @@ function updateValue<Error>(
 	if (name === '') {
 		meta.initialValue = value as Record<string, unknown>;
 		meta.value = value as Record<string, unknown>;
-		meta.key = {
-			...getDefaultKey(value as Record<string, unknown>),
-			'': generateId(),
-		};
+		meta.key = getDefaultKey(value as Record<string, unknown>);
+
 		return;
 	}
 
@@ -827,13 +827,7 @@ export function createFormContext<
 		const form = getFormElement();
 		const element = event.target;
 
-		if (
-			!form ||
-			!isFieldElement(element) ||
-			element.form !== form ||
-			!element.form.isConnected ||
-			element.name === ''
-		) {
+		if (!form || !isFieldElement(element) || element.form !== form) {
 			return null;
 		}
 
@@ -854,15 +848,19 @@ export function createFormContext<
 			: shouldValidate === eventName;
 	}
 
-	function updateFormValue(form: HTMLFormElement) {
-		const formData = new FormData(form);
-		const result = getSubmissionContext(formData);
+	function syncFormValue() {
+		const formElement = getFormElement();
 
-		updateFormMeta({
-			...meta,
-			isValueUpdated: true,
-			value: result.payload,
-		});
+		if (formElement) {
+			const formData = new FormData(formElement);
+			const result = getSubmissionContext(formData);
+
+			updateFormMeta({
+				...meta,
+				isValueUpdated: true,
+				value: result.payload,
+			});
+		}
 	}
 
 	function onInput(event: Event) {
@@ -873,7 +871,7 @@ export function createFormContext<
 		}
 
 		if (event.defaultPrevented || !willValidate(element, 'onInput')) {
-			updateFormValue(element.form);
+			syncFormValue();
 		} else {
 			dispatch({
 				type: 'validate',
@@ -1038,47 +1036,6 @@ export function createFormContext<
 		});
 	}
 
-	function observe() {
-		const observer = new MutationObserver((mutations) => {
-			const form = getFormElement();
-
-			if (!form) {
-				return;
-			}
-
-			for (const mutation of mutations) {
-				const nodes =
-					mutation.type === 'childList'
-						? [...mutation.addedNodes, ...mutation.removedNodes]
-						: [mutation.target];
-
-				for (const node of nodes) {
-					const element = isFieldElement(node)
-						? node
-						: node instanceof HTMLElement
-							? node.querySelector<FieldElement>('input,select,textarea')
-							: null;
-
-					if (element?.form === form) {
-						updateFormValue(form);
-						return;
-					}
-				}
-			}
-		});
-
-		observer.observe(document, {
-			subtree: true,
-			childList: true,
-			attributes: true,
-			attributeFilter: ['form', 'name'],
-		});
-
-		return () => {
-			observer.disconnect();
-		};
-	}
-
 	return {
 		getFormId() {
 			return meta.formId;
@@ -1094,9 +1051,46 @@ export function createFormContext<
 		insert: createFormControl('insert'),
 		remove: createFormControl('remove'),
 		reorder: createFormControl('reorder'),
+		syncFormValue,
 		subscribe,
 		getState,
 		getSerializedState,
-		observe,
 	};
 }
+
+export function syncFormState<FormError>(
+	formElement: HTMLFormElement,
+	stateSnapshot: FormState<FormError>,
+	/**
+	 * Default to manage inputs that is configured using the `getInputProps` helpers
+	 */
+	shouldSyncElement: (element: FieldElement) => boolean = (element) =>
+		typeof element.dataset.conform !== 'undefined',
+) {
+	for (const element of formElement.elements) {
+		if (
+			isFieldElement(element) &&
+			element.dataset.conform !== 'managed' &&
+			shouldSyncElement(element)
+		) {
+			const prev = element.dataset.conform;
+			const next = stateSnapshot.key[element.name];
+			const isInitializing = typeof prev === 'undefined';
+
+			if (isInitializing || prev !== next) {
+				element.dataset.conform = next;
+
+				// Sync the field constraint first to make sure multiple attribute is applied first before the value
+				syncFieldConstraint(
+					element,
+					stateSnapshot.constraint[element.name] ?? {},
+				);
+				syncFieldValue(
+					element,
+					stateSnapshot.initialValue[element.name],
+					stateSnapshot.defaultValue[element.name],
+				);
+			}
+		}
+	}
+}
diff --git a/packages/conform-dom/index.ts b/packages/conform-dom/index.ts
index 50f57c5c..e5908d4c 100644
--- a/packages/conform-dom/index.ts
+++ b/packages/conform-dom/index.ts
@@ -12,7 +12,12 @@ export {
 	type SubscriptionSubject,
 	type SubscriptionScope,
 	createFormContext as unstable_createFormContext,
+	syncFormState as unstable_syncFormState,
 } from './form';
+export {
+	type FormObserver,
+	createFormObserver as unstable_createFormObserver,
+} from './observer';
 export { type FieldElement, isFieldElement } from './dom';
 export {
 	type Submission,
diff --git a/packages/conform-dom/observer.ts b/packages/conform-dom/observer.ts
new file mode 100644
index 00000000..8bf765e6
--- /dev/null
+++ b/packages/conform-dom/observer.ts
@@ -0,0 +1,243 @@
+import { type FieldElement, isFieldElement } from './dom';
+
+export type FormObserver = {
+	/**
+	 * Subscribes to the event when any field element is mounted or unmounted.
+	 *
+	 * @param callback - Function invoked with the corresponding form element.
+	 * @returns A function to unsubscribe the callback.
+	 */
+	onFieldMounted(callback: (formElement: HTMLFormElement) => void): () => void;
+
+	/**
+	 * Subscribes to the event when an input element's value changes.
+	 * @param callback - Function invoked with the input element.
+	 * @returns A function to unsubscribe the callback.
+	 */
+	onFieldChanged(callback: (fieldElement: FieldElement) => void): () => void;
+
+	/**
+	 * Subscribes to the event when a form's value changes.
+	 *
+	 * @param callback - Function invoked with the form element and its FormData.
+	 * @returns A function to unsubscribe the callback.
+	 */
+	onFormDataChanged(
+		callback: (formElement: HTMLFormElement, formData: FormData) => void,
+	): () => void;
+
+	/**
+	 * Retrieves the form data for a given form element.
+	 * @param formElement - The form element.
+	 * @returns The FormData snapshot.
+	 */
+	getFormDataSnapshot(formElement: HTMLFormElement): FormData;
+};
+
+export function createFormObserver(): FormObserver {
+	const snapshot = new Map<HTMLFormElement, FormData>();
+	const fieldMountedCallbacks = new Set<
+		Parameters<FormObserver['onFieldMounted']>[0]
+	>();
+	const inputChangedCallbacks = new Set<
+		Parameters<FormObserver['onFieldChanged']>[0]
+	>();
+	const formDataChangedCallbacks = new Set<
+		Parameters<FormObserver['onFormDataChanged']>[0]
+	>();
+
+	let observer: MutationObserver | null = null;
+
+	function handleInput(event: Event) {
+		const element = event.target;
+
+		if (isFieldElement(element)) {
+			emitFieldChanged(element);
+			emitFormDataChanged(element.form);
+		}
+	}
+
+	function handleReset(event: Event) {
+		if (event.target instanceof HTMLFormElement) {
+			emitFormDataChanged(event.target);
+		}
+	}
+
+	function handleSubmit(event: SubmitEvent): void {
+		if (event.target instanceof HTMLFormElement) {
+			emitFormDataChanged(event.target, event.submitter);
+		}
+	}
+
+	function getFieldElements(node: Node): FieldElement[] {
+		const fieldElements: FieldElement[] = [];
+
+		if (isFieldElement(node)) {
+			fieldElements.push(node);
+		} else if (node instanceof HTMLElement) {
+			for (const element of node.querySelectorAll('input,select,textarea')) {
+				if (isFieldElement(element)) {
+					fieldElements.push(element);
+				}
+			}
+		}
+
+		return fieldElements;
+	}
+
+	function handleMutation(mutations: MutationRecord[]): void {
+		const formDataChanged = new Set<HTMLFormElement>();
+		const fieldElementMoutned = new Set<HTMLFormElement>();
+		const fieldElementChanged = new Set<FieldElement>();
+
+		for (const mutation of mutations) {
+			switch (mutation.type) {
+				case 'childList':
+					for (const node of [
+						...mutation.addedNodes,
+						...mutation.removedNodes,
+					]) {
+						for (const fieldElement of getFieldElements(node)) {
+							fieldElementMoutned.add(fieldElement.form);
+							formDataChanged.add(fieldElement.form);
+						}
+					}
+					break;
+				case 'attributes':
+					if (isFieldElement(mutation.target)) {
+						fieldElementChanged.add(mutation.target);
+						formDataChanged.add(mutation.target.form);
+					}
+					break;
+			}
+		}
+
+		for (const formElement of formDataChanged) {
+			emitFormDataChanged(formElement);
+		}
+
+		for (const fieldElement of fieldElementChanged) {
+			emitFieldChanged(fieldElement);
+		}
+
+		for (const formElement of fieldElementMoutned) {
+			emitFieldMounted(formElement);
+		}
+	}
+
+	function emitFieldMounted(formElement: HTMLFormElement) {
+		for (const callback of fieldMountedCallbacks) {
+			callback(formElement);
+		}
+	}
+
+	function emitFieldChanged(fieldElement: FieldElement) {
+		for (const callback of inputChangedCallbacks) {
+			callback(fieldElement);
+		}
+	}
+
+	function emitFormDataChanged(
+		formElement: HTMLFormElement,
+		submitter: HTMLElement | null = null,
+	) {
+		const formData = new FormData(formElement, submitter);
+
+		snapshot.set(formElement, formData);
+
+		for (const callback of formDataChangedCallbacks) {
+			callback(formElement, formData);
+		}
+	}
+
+	function initialize() {
+		// If there are no subscribers yet, listen for input, reset, and submit events globally
+		if (
+			formDataChangedCallbacks.size === 0 &&
+			fieldMountedCallbacks.size === 0
+		) {
+			// Listen for input, reset, and submit events
+			document.addEventListener('input', handleInput);
+			document.addEventListener('reset', handleReset);
+			// Capture submit event during the capturing pharse to ensure that the submitter is available
+			document.addEventListener('submit', handleSubmit, true);
+
+			// Observe form and input changes
+			observer ??= new MutationObserver(handleMutation);
+			observer.observe(document.body, {
+				subtree: true,
+				childList: true,
+				attributeFilter: [
+					// Basic attributes
+					'form',
+					'name',
+					// Custom attributes for non-standard updates
+					'data-conform',
+					// Validation attributes
+					'type',
+					'required',
+					'min',
+					'max',
+					'step',
+					'minlength',
+					'maxlength',
+					'pattern',
+					'multiple',
+				],
+			});
+		}
+	}
+
+	function destroy() {
+		// If there are no subscribers left, remove event listeners and disconnect the observer
+		if (
+			formDataChangedCallbacks.size === 0 &&
+			fieldMountedCallbacks.size === 0
+		) {
+			document.removeEventListener('input', handleInput);
+			document.removeEventListener('reset', handleReset);
+			document.removeEventListener('submit', handleSubmit, true);
+			observer?.disconnect();
+		}
+	}
+
+	return {
+		onFieldMounted(callback) {
+			initialize();
+			fieldMountedCallbacks.add(callback);
+
+			return () => {
+				fieldMountedCallbacks.delete(callback);
+				destroy();
+			};
+		},
+		onFieldChanged(callback) {
+			initialize();
+			inputChangedCallbacks.add(callback);
+
+			return () => {
+				inputChangedCallbacks.delete(callback);
+				destroy();
+			};
+		},
+		onFormDataChanged(callback) {
+			initialize();
+			formDataChangedCallbacks.add(callback);
+
+			return () => {
+				formDataChangedCallbacks.delete(callback);
+				destroy();
+			};
+		},
+		getFormDataSnapshot(formElement) {
+			let formData = snapshot.get(formElement);
+
+			if (!formData) {
+				formData = new FormData(formElement);
+				snapshot.set(formElement, formData);
+			}
+
+			return formData;
+		},
+	};
+}
diff --git a/packages/conform-react/helpers.ts b/packages/conform-react/helpers.ts
index bebe699a..910ddc43 100644
--- a/packages/conform-react/helpers.ts
+++ b/packages/conform-react/helpers.ts
@@ -1,7 +1,7 @@
 import type { FormMetadata, FieldMetadata, Metadata, Pretty } from './context';
 
 type FormControlProps = {
-	key: string | undefined;
+	key?: string;
 	id: string;
 	name: string;
 	form: string;
@@ -214,7 +214,8 @@ export function getFormControlProps<Schema>(
 	options?: FormControlOptions,
 ): FormControlProps {
 	return simplify({
-		key: metadata.key,
+		// let Conform updates the field value for us
+		'data-conform': '',
 		required: metadata.required || undefined,
 		...getFieldsetProps(metadata, options),
 	});
diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts
index 24161525..a7fc4482 100644
--- a/packages/conform-react/hooks.ts
+++ b/packages/conform-react/hooks.ts
@@ -1,5 +1,10 @@
-import { type FormId, type FieldName } from '@conform-to/dom';
-import { useEffect, useId, useState, useLayoutEffect } from 'react';
+import {
+	type FormId,
+	type FieldName,
+	unstable_createFormObserver as createFormObserver,
+	unstable_syncFormState as syncFormState,
+} from '@conform-to/dom';
+import { useEffect, useId, useState, useLayoutEffect, useRef } from 'react';
 import {
 	type FormMetadata,
 	type FieldMetadata,
@@ -13,6 +18,8 @@ import {
 	getFormMetadata,
 } from './context';
 
+export const formObserver = createFormObserver();
+
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
@@ -61,6 +68,14 @@ export function useForm<
 			 * Default to `true`.
 			 */
 			defaultNoValidate?: boolean;
+
+			/**
+			 * Define if the input could be updated by conform.
+			 * Default to inputs that are configured using the `getInputProps`, `getSelectProps` or `getTextareaProps` helpers.
+			 */
+			shouldSyncElement?: (
+				element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+			) => boolean;
 		}
 	>,
 ): [
@@ -68,13 +83,25 @@ export function useForm<
 	ReturnType<FormMetadata<Schema, FormError>['getFieldset']>,
 ] {
 	const { id, ...formConfig } = options;
+	const optionsRef = useRef(options);
 	const formId = useFormId<Schema, FormError>(id);
 	const [context] = useState(() =>
 		createFormContext({ ...formConfig, formId }),
 	);
 
 	useSafeLayoutEffect(() => {
-		const disconnect = context.observe();
+		const formId = context.getFormId();
+		const disconnect = formObserver.onFieldMounted((formElement) => {
+			if (formElement === document.forms.namedItem(formId)) {
+				syncFormState(
+					formElement,
+					context.getState(),
+					optionsRef.current.shouldSyncElement,
+				);
+				// syncFormState must happen before syncFormValue to ensure the newly mounted field have the correct default value set
+				context.syncFormValue();
+			}
+		});
 		document.addEventListener('input', context.onInput);
 		document.addEventListener('focusout', context.onBlur);
 		document.addEventListener('reset', context.onReset);
@@ -88,14 +115,34 @@ export function useForm<
 	}, [context]);
 
 	useSafeLayoutEffect(() => {
+		optionsRef.current = options;
 		context.onUpdate({ ...formConfig, formId });
 	});
 
-	const subjectRef = useSubjectRef();
+	const subjectRef = useSubjectRef({
+		key: {
+			// Subscribe to all key changes so it will re-render and
+			// update the field value as soon as the DOM is updated
+			prefix: [''],
+		},
+	});
 	const stateSnapshot = useFormState(context, subjectRef);
 	const noValidate = useNoValidate(options.defaultNoValidate);
 	const form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
 
+	useEffect(() => {
+		const formId = context.getFormId();
+		const formElement = document.forms.namedItem(formId);
+
+		if (formElement) {
+			syncFormState(
+				formElement,
+				stateSnapshot,
+				optionsRef.current.shouldSyncElement,
+			);
+		}
+	}, [context, stateSnapshot]);
+
 	return [form, form.getFieldset()];
 }
 
diff --git a/packages/conform-react/integrations.ts b/packages/conform-react/integrations.ts
index 1bdc9579..883222c9 100644
--- a/packages/conform-react/integrations.ts
+++ b/packages/conform-react/integrations.ts
@@ -71,7 +71,7 @@ export function createDummySelect(
 
 	select.name = name;
 	select.multiple = true;
-	select.dataset.conform = 'true';
+	select.dataset.conform = 'managed';
 
 	// To make sure the input is hidden but still focusable
 	select.setAttribute('aria-hidden', 'true');
@@ -98,7 +98,7 @@ export function createDummySelect(
 export function isDummySelect(
 	element: HTMLElement,
 ): element is HTMLSelectElement {
-	return element.dataset.conform === 'true';
+	return element.dataset.conform === 'managed';
 }
 
 export function updateFieldValue(
@@ -306,26 +306,8 @@ export function useControl<
 		change(value);
 	};
 
-	const refCallback: RefCallback<
-		HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined
-	> = (element) => {
-		register(element);
-
-		if (!element) {
-			return;
-		}
-
-		const prevKey = element.dataset.conform;
-		const nextKey = `${meta.key ?? ''}`;
-
-		if (prevKey !== nextKey) {
-			element.dataset.conform = nextKey;
-			updateFieldValue(element, value ?? '');
-		}
-	};
-
 	return {
-		register: refCallback,
+		register,
 		value,
 		change: handleChange,
 		focus,
diff --git a/playground/app/routes/form-control.tsx b/playground/app/routes/form-control.tsx
index dad98b68..81fbfa85 100644
--- a/playground/app/routes/form-control.tsx
+++ b/playground/app/routes/form-control.tsx
@@ -128,6 +128,12 @@ export default function FormControl() {
 						>
 							Reset form
 						</button>
+						<input
+							type="submit"
+							className="rounded-md border p-2 hover:border-black"
+							name="example"
+							value="Submit"
+						/>
 					</div>
 				</Playground>
 			</Form>
diff --git a/playground/app/routes/sync-form-state.tsx b/playground/app/routes/sync-form-state.tsx
new file mode 100644
index 00000000..ae11804b
--- /dev/null
+++ b/playground/app/routes/sync-form-state.tsx
@@ -0,0 +1,199 @@
+import { getFormProps, useForm } from '@conform-to/react';
+import { parseWithZod } from '@conform-to/zod';
+import type { ActionFunctionArgs } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { Form, useActionData } from '@remix-run/react';
+import { useState } from 'react';
+import { z } from 'zod';
+import { Playground, Field } from '~/components';
+
+const schema = z.object({
+	input: z.object({
+		text: z.string(),
+		files: z.instanceof(File).array(),
+		number: z.number(),
+	}),
+	textarea: z.string(),
+	select: z.string(),
+	multiSelect: z.array(z.string()),
+	checkbox: z.boolean(),
+	checkboxGroup: z.array(z.string()),
+	radioGroup: z.string(),
+});
+
+export async function action({ request }: ActionFunctionArgs) {
+	const formData = await request.formData();
+	const submission = parseWithZod(formData, { schema });
+
+	return json({
+		lastResult: submission.reply({
+			resetForm: true,
+		}),
+		defaultValue: {
+			input: {
+				text: 'Default text',
+				number: 4,
+				files: [],
+			},
+			textarea: 'You need to write something here',
+			select: 'red',
+			multiSelect: ['apple', 'banana', 'cherry'],
+			checkbox: false,
+			checkboxGroup: ['JS', 'CSS'],
+			radioGroup: 'Français',
+		},
+	});
+}
+
+export default function Example() {
+	const actionData = useActionData<typeof action>();
+	const [form, fields] = useForm({
+		lastResult: actionData?.lastResult,
+		shouldValidate: 'onBlur',
+		onValidate: ({ formData }) => parseWithZod(formData, { schema }),
+		defaultValue: actionData?.defaultValue ?? {
+			input: {
+				text: 'Hello World',
+				number: 2,
+				files: [],
+			},
+			textarea: 'Once upon a time',
+			select: 'green',
+			multiSelect: ['banana', 'cherry'],
+			checkbox: false,
+			checkboxGroup: ['HTML', 'CSS'],
+			radioGroup: 'Deutsch',
+		},
+		constraint: {
+			'input.text': {
+				required: true,
+				minLength: 5,
+				maxLength: 30,
+				pattern: '[a-zA-Z]+',
+			},
+			'input.number': {
+				min: 5,
+				max: 10,
+				step: 1,
+			},
+			'input.files': {
+				required: true,
+				multiple: true,
+			},
+			textarea: {
+				required: true,
+				minLength: 10,
+				maxLength: 1000,
+			},
+			select: {
+				required: true,
+			},
+			multiSelect: {
+				multiple: true,
+			},
+			checkbox: {
+				required: true,
+			},
+			checkboxGroup: {
+				required: true,
+			},
+			radioGroup: {
+				required: true,
+			},
+		},
+		shouldSyncElement(element) {
+			return element.name !== 'token';
+		},
+	});
+	const inputFields = fields.input.getFieldset();
+	const [showNumberField, setShowNumberField] = useState(true);
+
+	return (
+		<Form method="post" {...getFormProps(form)}>
+			<Playground title="Sync form state" result={actionData?.lastResult}>
+				<Field label="Token">
+					<input name="token" defaultValue="1-0624770" />
+				</Field>
+				<Field label="Text" meta={inputFields.text}>
+					<input name={inputFields.text.name} />
+				</Field>
+				{showNumberField ? (
+					<Field label="Number" meta={inputFields.number}>
+						<input type="number" name={inputFields.number.name} />
+					</Field>
+				) : null}
+				<Field label="Files" meta={inputFields.files}>
+					<input type="file" name={inputFields.files.name} />
+				</Field>
+				<Field label="Textarea" meta={fields.textarea}>
+					<textarea name={fields.textarea.name} />
+				</Field>
+				<Field label="Select" meta={fields.select}>
+					<select name={fields.select.name}>
+						<option value="red">Red</option>
+						<option value="green">Green</option>
+						<option value="blue">Blue</option>
+					</select>
+				</Field>
+				<Field label="Multi select" meta={fields.multiSelect}>
+					<select name={fields.multiSelect.name}>
+						<option value="apple">Apple</option>
+						<option value="banana">Banana</option>
+						<option value="cherry">Cherry</option>
+					</select>
+				</Field>
+				<Field label="Checkbox" meta={fields.checkbox}>
+					<label className="inline-block">
+						<input type="checkbox" name={fields.checkbox.name} />
+						<span className="p-2">Show number field</span>
+					</label>
+				</Field>
+				<Field label="Checkbox group" meta={fields.checkboxGroup}>
+					{['HTML', 'CSS', 'JS'].map((value) => (
+						<label key={value} className="inline-block">
+							<input
+								type="checkbox"
+								name={fields.checkboxGroup.name}
+								value={value}
+							/>
+							<span className="p-2">{value}</span>
+						</label>
+					))}
+				</Field>
+				<Field label="Radio" meta={fields.radioGroup}>
+					{['English', 'Deutsch', 'Français'].map((value) => (
+						<label key={value} className="inline-block">
+							<input type="radio" name={fields.radioGroup.name} value={value} />
+							<span className="p-2">{value}</span>
+						</label>
+					))}
+				</Field>
+				<button
+					{...form.update.getButtonProps({
+						value: {
+							input: {
+								text: 'Updated',
+								number: 3,
+							},
+							textarea: 'Some text here',
+							select: 'blue',
+							multiSelect: ['apple', 'cherry'],
+							checkbox: true,
+							checkboxGroup: ['HTML', 'JS'],
+							radioGroup: 'English',
+						},
+					})}
+				>
+					Update value
+				</button>
+				<hr />
+				<button
+					type="button"
+					onClick={() => setShowNumberField((prev) => !prev)}
+				>
+					Toggle number field
+				</button>
+			</Playground>
+		</Form>
+	);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b418bf2..05df636d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,8 +27,8 @@ importers:
         specifier: workspace:*
         version: link:packages/conform-zod
       '@playwright/test':
-        specifier: ^1.44.1
-        version: 1.44.1
+        specifier: ^1.49.0
+        version: 1.49.0
       '@types/node':
         specifier: ^20.10.4
         version: 20.11.20
@@ -106,7 +106,7 @@ importers:
         version: 18.2.0(react@18.2.0)
       react-scripts:
         specifier: 5.0.1
-        version: 5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5)
+        version: 5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5)
     devDependencies:
       '@types/node':
         specifier: ^16.18.14
@@ -140,7 +140,7 @@ importers:
         version: 18.2.0(react@18.2.0)
       react-scripts:
         specifier: 5.0.1
-        version: 5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5)
+        version: 5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5)
     devDependencies:
       '@headlessui/tailwindcss':
         specifier: ^0.1.2
@@ -192,7 +192,7 @@ importers:
         version: 18.2.0(react@18.2.0)
       react-scripts:
         specifier: 5.0.1
-        version: 5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5)
+        version: 5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5)
     devDependencies:
       '@types/node':
         specifier: ^16.18.14
@@ -583,7 +583,7 @@ importers:
         version: 12.4.0
       '@remix-run/dev':
         specifier: ^2.5.1
-        version: 2.9.1(@remix-run/react@2.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5))(@remix-run/serve@2.9.1(typescript@5.4.5))(@types/node@20.11.20)(terser@5.26.0)(typescript@5.4.5)(vite@5.1.4(@types/node@20.11.20)(terser@5.26.0))(wrangler@3.53.1)
+        version: 2.9.1(@remix-run/react@2.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5))(@remix-run/serve@2.9.1(typescript@5.4.5))(@types/node@20.11.20)(terser@5.26.0)(typescript@5.4.5)(vite@5.1.4(@types/node@20.11.20)(terser@5.26.0))(wrangler@3.53.1(@cloudflare/workers-types@4.20240502.0))
       '@tailwindcss/forms':
         specifier: ^0.5.7
         version: 0.5.7(tailwindcss@3.4.3)
@@ -812,7 +812,7 @@ importers:
     devDependencies:
       '@remix-run/dev':
         specifier: ^2.9.1
-        version: 2.9.1(@remix-run/react@2.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5))(@remix-run/serve@2.9.1(typescript@5.4.5))(@types/node@20.11.20)(terser@5.26.0)(typescript@5.4.5)(vite@5.1.4(@types/node@20.11.20)(terser@5.26.0))(wrangler@3.53.1)
+        version: 2.9.1(@remix-run/react@2.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5))(@remix-run/serve@2.9.1(typescript@5.4.5))(@types/node@20.11.20)(terser@5.26.0)(typescript@5.4.5)(vite@5.1.4(@types/node@20.11.20)(terser@5.26.0))(wrangler@3.53.1(@cloudflare/workers-types@4.20240502.0))
       '@tailwindcss/forms':
         specifier: ^0.5.2
         version: 0.5.7(tailwindcss@3.4.3)
@@ -3349,9 +3349,9 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@playwright/test@1.44.1':
-    resolution: {integrity: sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==}
-    engines: {node: '>=16'}
+  '@playwright/test@1.49.0':
+    resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==}
+    engines: {node: '>=18'}
     hasBin: true
 
   '@pmmmwh/react-refresh-webpack-plugin@0.5.11':
@@ -8806,14 +8806,14 @@ packages:
     resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
     engines: {node: '>=8'}
 
-  playwright-core@1.44.1:
-    resolution: {integrity: sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==}
-    engines: {node: '>=16'}
+  playwright-core@1.49.0:
+    resolution: {integrity: sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==}
+    engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.44.1:
-    resolution: {integrity: sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==}
-    engines: {node: '>=16'}
+  playwright@1.49.0:
+    resolution: {integrity: sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==}
+    engines: {node: '>=18'}
     hasBin: true
 
   possible-typed-array-names@1.0.0:
@@ -14223,9 +14223,9 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@playwright/test@1.44.1':
+  '@playwright/test@1.49.0':
     dependencies:
-      playwright: 1.44.1
+      playwright: 1.49.0
 
   '@pmmmwh/react-refresh-webpack-plugin@0.5.11(react-refresh@0.11.0)(type-fest@1.4.0)(webpack-dev-server@4.15.1(webpack@5.89.0))(webpack@5.89.0)':
     dependencies:
@@ -14878,7 +14878,7 @@ snapshots:
       - ts-node
       - utf-8-validate
 
-  '@remix-run/dev@2.9.1(@remix-run/react@2.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5))(@remix-run/serve@2.9.1(typescript@5.4.5))(@types/node@20.11.20)(terser@5.26.0)(typescript@5.4.5)(vite@5.1.4(@types/node@20.11.20)(terser@5.26.0))(wrangler@3.53.1)':
+  '@remix-run/dev@2.9.1(@remix-run/react@2.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5))(@remix-run/serve@2.9.1(typescript@5.4.5))(@types/node@20.11.20)(terser@5.26.0)(typescript@5.4.5)(vite@5.1.4(@types/node@20.11.20)(terser@5.26.0))(wrangler@3.53.1(@cloudflare/workers-types@4.20240502.0))':
     dependencies:
       '@babel/core': 7.23.5
       '@babel/generator': 7.23.5
@@ -14963,8 +14963,8 @@ snapshots:
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@4.9.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.0)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jest: 26.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint@8.57.0)(typescript@4.9.5))(eslint@8.57.0)(typescript@4.9.5)
       eslint-plugin-jest-dom: 4.0.3(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
@@ -17829,8 +17829,8 @@ snapshots:
       '@typescript-eslint/parser': 6.20.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.33.2(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0)
@@ -17840,7 +17840,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)(jest@27.5.1)(typescript@4.9.5):
+  eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(jest@27.5.1)(typescript@4.9.5):
     dependencies:
       '@babel/core': 7.23.5
       '@babel/eslint-parser': 7.23.3(@babel/core@7.23.5)(eslint@8.57.0)
@@ -17851,7 +17851,7 @@ snapshots:
       confusing-browser-globals: 1.0.11
       eslint: 8.57.0
       eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint@8.57.0)(typescript@4.9.5))(eslint@8.57.0)(jest@27.5.1)(typescript@4.9.5)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.2(eslint@8.57.0)
@@ -17883,13 +17883,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.0)(eslint@8.57.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.0)(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -17900,13 +17900,13 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.57.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -17922,7 +17922,7 @@ snapshots:
       debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
@@ -17934,18 +17934,18 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.0)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@4.9.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.0)(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -17956,18 +17956,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.20.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.20.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -17978,6 +17978,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-es@3.0.1(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -17992,7 +18002,7 @@ snapshots:
       lodash: 4.17.21
       string-natural-compare: 3.0.1
 
-  eslint-plugin-import@2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.29.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
@@ -18002,7 +18012,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -18019,7 +18029,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.29.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
@@ -18029,7 +18039,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -18046,7 +18056,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
@@ -18056,7 +18066,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -18083,7 +18093,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -21241,11 +21251,11 @@ snapshots:
     dependencies:
       find-up: 3.0.0
 
-  playwright-core@1.44.1: {}
+  playwright-core@1.49.0: {}
 
-  playwright@1.44.1:
+  playwright@1.49.0:
     dependencies:
-      playwright-core: 1.44.1
+      playwright-core: 1.49.0
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -22023,7 +22033,7 @@ snapshots:
       '@remix-run/router': 1.16.0
       react: 18.2.0
 
-  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5):
+  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(@types/babel__core@7.20.5)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(react@18.2.0)(type-fest@1.4.0)(typescript@4.9.5):
     dependencies:
       '@babel/core': 7.23.5
       '@pmmmwh/react-refresh-webpack-plugin': 0.5.11(react-refresh@0.11.0)(type-fest@1.4.0)(webpack-dev-server@4.15.1(webpack@5.89.0))(webpack@5.89.0)
@@ -22041,7 +22051,7 @@ snapshots:
       dotenv: 10.0.0
       dotenv-expand: 5.1.0
       eslint: 8.57.0
-      eslint-config-react-app: 7.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)(jest@27.5.1)(typescript@4.9.5)
+      eslint-config-react-app: 7.0.1(@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.5))(@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)(jest@27.5.1)(typescript@4.9.5)
       eslint-webpack-plugin: 3.2.0(eslint@8.57.0)(webpack@5.89.0)
       file-loader: 6.2.0(webpack@5.89.0)
       fs-extra: 10.1.0
diff --git a/tests/conform-react.spec.ts b/tests/conform-react.spec.ts
index dc26e244..963a37b7 100644
--- a/tests/conform-react.spec.ts
+++ b/tests/conform-react.spec.ts
@@ -35,7 +35,10 @@ function getProps(metadata: FieldMetadata<any>) {
 describe('conform-react', () => {
 	test('getInputProps', () => {
 		const metadata = createFieldMetadata();
-		const props = getProps(metadata);
+		const props = {
+			'data-conform': '',
+			...getProps(metadata),
+		};
 
 		expect(
 			getInputProps(
@@ -159,7 +162,10 @@ describe('conform-react', () => {
 
 	test('getTextareaProps', () => {
 		const metadata = createFieldMetadata();
-		const props = getProps(metadata);
+		const props = {
+			'data-conform': '',
+			...getProps(metadata),
+		};
 
 		expect(getTextareaProps(metadata)).toEqual(props);
 		expect(
@@ -229,7 +235,10 @@ describe('conform-react', () => {
 
 	test('getSelectProps', () => {
 		const metadata = createFieldMetadata();
-		const props = getProps(metadata);
+		const props = {
+			'data-conform': '',
+			...getProps(metadata),
+		};
 
 		expect(getSelectProps(metadata)).toEqual(props);
 		expect(
diff --git a/tests/integrations/form-control.spec.ts b/tests/integrations/form-control.spec.ts
index 039b3ea5..54c00cc8 100644
--- a/tests/integrations/form-control.spec.ts
+++ b/tests/integrations/form-control.spec.ts
@@ -14,6 +14,7 @@ function getFieldset(form: Locator) {
 		clearMessage: form.locator('button:text("Clear message")'),
 		resetMessage: form.locator('button:text("Reset message")'),
 		resetForm: form.locator('button:text("Reset form")'),
+		inputButton: form.locator('input[type="submit"]'),
 	};
 }
 
@@ -21,6 +22,9 @@ async function runValidationScenario(page: Page) {
 	const playground = getPlayground(page);
 	const fieldset = getFieldset(playground.container);
 
+	// Conform should not overwrite the value of any input buttons
+	await expect(fieldset.inputButton).toHaveValue('Submit');
+
 	await expect(playground.error).toHaveText(['', '', '']);
 
 	await fieldset.validateMessage.click();
diff --git a/tests/integrations/sync-form-state.spec.ts b/tests/integrations/sync-form-state.spec.ts
new file mode 100644
index 00000000..0f2607a9
--- /dev/null
+++ b/tests/integrations/sync-form-state.spec.ts
@@ -0,0 +1,182 @@
+import { type Locator, test, expect } from '@playwright/test';
+import { getPlayground } from './helpers';
+
+function getFieldset(form: Locator) {
+	return {
+		token: form.locator('[name="token"]'),
+		text: form.locator('[name="input.text"]'),
+		number: form.locator('[name="input.number"]'),
+		files: form.locator('[name="input.files"]'),
+		textarea: form.locator('[name="textarea"]'),
+		select: form.locator('[name="select"]'),
+		multiSelect: form.locator('[name="multiSelect"]'),
+		checkbox: form.locator('[name="checkbox"]'),
+		checkboxGroup: form.locator('[name="checkboxGroup"]'),
+		radioGroup: form.locator('[name="radioGroup"]'),
+	};
+}
+
+async function assertFieldsetValue(
+	fieldset: ReturnType<typeof getFieldset>,
+	value: {
+		input: {
+			text: string;
+			number: number;
+		};
+		textarea: string;
+		select: string;
+		multiSelect: string[];
+		checkbox: boolean;
+		checkboxGroup: string[];
+		radioGroup: string;
+	},
+) {
+	// This check if Conform omit the token field based on the shouldSyncElement option
+	await expect(fieldset.token).toHaveValue('1-0624770');
+
+	await expect(fieldset.text).toHaveValue(value.input.text);
+	await expect(fieldset.number).toHaveValue(value.input.number.toString());
+	await expect(fieldset.files).toHaveValue('');
+	await expect(fieldset.textarea).toHaveValue(value.textarea);
+	await expect(fieldset.select).toHaveValue(value.select);
+	await expect(fieldset.multiSelect).toHaveValues(value.multiSelect);
+
+	if (value.checkbox) {
+		await expect(fieldset.checkbox).toBeChecked();
+	} else {
+		await expect(fieldset.checkbox).not.toBeChecked();
+	}
+
+	for (const option of await fieldset.checkboxGroup.all()) {
+		if (value.checkboxGroup.includes(await option.inputValue())) {
+			await expect(option).toBeChecked();
+		} else {
+			await expect(option).not.toBeChecked();
+		}
+	}
+
+	for (const option of await fieldset.radioGroup.all()) {
+		if ((await option.inputValue()) === value.radioGroup) {
+			await expect(option).toBeChecked();
+		} else {
+			await expect(option).not.toBeChecked();
+		}
+	}
+}
+
+test('sync fields value', async ({ page }) => {
+	await page.goto('/sync-form-state');
+
+	const playground = getPlayground(page);
+	const fieldset = getFieldset(playground.container);
+	const updateValueButton = playground.container.locator(
+		'button:text("Update value")',
+	);
+	const toggleNumberFieldButton = playground.container.locator(
+		'button:text("Toggle number field")',
+	);
+	const defaultValue = {
+		input: {
+			text: 'Hello World',
+			number: 2,
+		},
+		textarea: 'Once upon a time',
+		select: 'green',
+		multiSelect: ['banana', 'cherry'],
+		checkbox: false,
+		checkboxGroup: ['HTML', 'CSS'],
+		radioGroup: 'Deutsch',
+	};
+	const valueToBeSet = {
+		input: {
+			text: 'Updated',
+			number: 3,
+		},
+		textarea: 'Some text here',
+		select: 'blue',
+		multiSelect: ['apple', 'cherry'],
+		checkbox: true,
+		checkboxGroup: ['HTML', 'JS'],
+		radioGroup: 'English',
+	};
+	const newDefaultValue = {
+		input: {
+			text: 'Default text',
+			number: 4,
+		},
+		textarea: 'You need to write something here',
+		select: 'red',
+		multiSelect: ['apple', 'banana', 'cherry'],
+		checkbox: false,
+		checkboxGroup: ['JS', 'CSS'],
+		radioGroup: 'Français',
+	};
+
+	await assertFieldsetValue(fieldset, defaultValue);
+	await updateValueButton.click();
+	await assertFieldsetValue(fieldset, valueToBeSet);
+
+	// Check if mounting/unmounting the number field will break the sync
+	await toggleNumberFieldButton.click();
+	await expect(fieldset.number).not.toBeAttached();
+	await toggleNumberFieldButton.click();
+	// FIXME: The value of the number field should be the default value?
+	// We need a better way to differentiate default value vs last submitted value vs value user set
+	await expect(fieldset.number).toHaveValue(
+		valueToBeSet.input.number.toString(),
+	);
+
+	await playground.reset.click();
+	await assertFieldsetValue(fieldset, defaultValue);
+	await updateValueButton.click();
+	await assertFieldsetValue(fieldset, valueToBeSet);
+	await playground.submit.click();
+	await assertFieldsetValue(fieldset, newDefaultValue);
+	await updateValueButton.click();
+	await assertFieldsetValue(fieldset, valueToBeSet);
+	await playground.reset.click();
+	await assertFieldsetValue(fieldset, newDefaultValue);
+});
+
+test('sync validation attributes', async ({ page }) => {
+	await page.goto('/sync-form-state');
+
+	const playground = getPlayground(page);
+	const fieldset = getFieldset(playground.container);
+
+	await expect(fieldset.text).toHaveJSProperty('required', true);
+	await expect(fieldset.text).toHaveJSProperty('minLength', 5);
+	await expect(fieldset.text).toHaveJSProperty('maxLength', 30);
+	await expect(fieldset.text).toHaveJSProperty('pattern', '[a-zA-Z]+');
+	await expect(fieldset.text).toHaveJSProperty('multiple', false);
+
+	await expect(fieldset.number).toHaveJSProperty('required', false);
+	await expect(fieldset.number).toHaveJSProperty('min', '5');
+	await expect(fieldset.number).toHaveJSProperty('max', '10');
+	await expect(fieldset.number).toHaveJSProperty('step', '1');
+
+	await expect(fieldset.files).toHaveJSProperty('required', true);
+	await expect(fieldset.files).toHaveJSProperty('multiple', true);
+
+	await expect(fieldset.textarea).toHaveJSProperty('required', true);
+	await expect(fieldset.textarea).toHaveJSProperty('minLength', 10);
+	await expect(fieldset.textarea).toHaveJSProperty('maxLength', 1000);
+
+	await expect(fieldset.select).toHaveJSProperty('required', true);
+	await expect(fieldset.multiSelect).toHaveJSProperty('required', false);
+	await expect(fieldset.multiSelect).toHaveJSProperty('multiple', true);
+
+	await expect(fieldset.checkbox).toHaveJSProperty('required', true);
+
+	expect(fieldset.checkboxGroup).toHaveCount(3);
+
+	for (const option of await fieldset.checkboxGroup.all()) {
+		await expect(option).toHaveJSProperty('required', false);
+	}
+
+	expect(fieldset.radioGroup).toHaveCount(3);
+
+	for (const option of await fieldset.radioGroup.all()) {
+		await expect(option).toHaveJSProperty('required', true);
+	}
+});