diff --git a/packages/conform-dom/form.ts b/packages/conform-dom/form.ts
index 66717aa0..9ecfa491 100644
--- a/packages/conform-dom/form.ts
+++ b/packages/conform-dom/form.ts
@@ -117,6 +117,7 @@ export type Constraint = {
 export type FormMeta<FormError> = {
 	formId: string;
 	isValueUpdated: boolean;
+	pendingIntents: Intent[];
 	submissionStatus?: 'error' | 'success';
 	defaultValue: Record<string, unknown>;
 	initialValue: Record<string, unknown>;
@@ -199,6 +200,7 @@ export type SubscriptionSubject = {
 } & {
 	formId?: boolean;
 	status?: boolean;
+	lastIntent?: boolean;
 };
 
 export type SubscriptionScope = {
@@ -231,6 +233,7 @@ export type FormContext<
 	onBlur(event: Event): void;
 	onUpdate(options: Partial<FormOptions<Schema, FormError, FormValue>>): void;
 	observe(): () => void;
+	runSideEffect(intents: Intent[]): void;
 	subscribe(
 		callback: () => void,
 		getSubject?: () => SubscriptionSubject | undefined,
@@ -260,15 +263,16 @@ 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>)
 		: {};
 	const initialValue = lastResult?.initialValue ?? defaultValue;
 	const result: FormMeta<FormError> = {
 		formId: options.formId,
+		pendingIntents: isResetting ? [{ type: 'reset', payload: {} }] : [],
 		isValueUpdated: false,
 		submissionStatus: lastResult?.status,
 		defaultValue,
@@ -276,7 +280,7 @@ function createFormMeta<Schema, FormError, FormValue>(
 		value: initialValue,
 		constraint: options.constraint ?? {},
 		validated: lastResult?.state?.validated ?? {},
-		key: !initialized
+		key: !isResetting
 			? getDefaultKey(defaultValue)
 			: {
 					'': generateId(),
@@ -296,9 +300,9 @@ function getDefaultKey(
 	defaultValue: Record<string, unknown> | Array<unknown>,
 	prefix?: string,
 ): Record<string, string> {
-	return Object.entries(flatten(defaultValue, { prefix })).reduce<
-		Record<string, string>
-	>((result, [key, value]) => {
+	return Object.entries(
+		flatten(defaultValue, { resolve: normalize, 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();
@@ -436,8 +440,10 @@ function updateValue<Error>(
 	value: unknown,
 ): void {
 	if (name === '') {
-		meta.initialValue = value as Record<string, unknown>;
-		meta.value = value as Record<string, unknown>;
+		meta.value = Object.assign({}, meta.value, value) as Record<
+			string,
+			unknown
+		>;
 		meta.key = {
 			...getDefaultKey(value as Record<string, unknown>),
 			'': generateId(),
@@ -445,12 +451,16 @@ function updateValue<Error>(
 		return;
 	}
 
-	meta.initialValue = clone(meta.initialValue);
 	meta.value = clone(meta.value);
 	meta.key = clone(meta.key);
 
-	setValue(meta.initialValue, name, () => value);
-	setValue(meta.value, name, () => value);
+	setValue(meta.value, name, (currentValue) => {
+		if (isPlainObject(currentValue)) {
+			return Object.assign({}, currentValue, value);
+		}
+
+		return value;
+	});
 
 	if (isPlainObject(value) || Array.isArray(value)) {
 		setState(meta.key, name, () => undefined);
@@ -638,6 +648,7 @@ export function createFormContext<
 		getSubject?: () => SubscriptionSubject | undefined;
 	}> = [];
 	const latestOptions = options;
+	const processedIntents = new Set<Intent>();
 	let meta = createFormMeta(options);
 	let state = createFormState(meta);
 
@@ -669,6 +680,7 @@ export function createFormContext<
 
 		return {
 			submissionStatus: next.submissionStatus,
+			pendingIntents: next.pendingIntents,
 			defaultValue,
 			initialValue,
 			value,
@@ -707,7 +719,7 @@ export function createFormContext<
 		state = nextState;
 
 		const cache: Record<
-			Exclude<keyof SubscriptionSubject, 'formId' | 'status'>,
+			Exclude<keyof SubscriptionSubject, 'formId' | 'status' | 'lastIntent'>,
 			Record<string, boolean>
 		> = {
 			value: {},
@@ -726,6 +738,8 @@ export function createFormContext<
 				(subject.formId && prevMeta.formId !== nextMeta.formId) ||
 				(subject.status &&
 					prevState.submissionStatus !== nextState.submissionStatus) ||
+				(subject.lastIntent &&
+					prevMeta.pendingIntents !== nextMeta.pendingIntents) ||
 				shouldNotify(
 					prevState.error,
 					nextState.error,
@@ -900,6 +914,7 @@ export function createFormContext<
 	}
 
 	function reset() {
+		processedIntents.clear();
 		updateFormMeta(createFormMeta(latestOptions, true));
 	}
 
@@ -936,8 +951,16 @@ export function createFormContext<
 
 			return result;
 		}, {});
+		const pendingIntents =
+			result.intent ||
+			meta.pendingIntents.some((intent) => processedIntents.has(intent))
+				? meta.pendingIntents
+						.filter((intent) => !processedIntents.has(intent))
+						.concat(result.intent ? [result.intent] : [])
+				: meta.pendingIntents;
 		const update: FormMeta<FormError> = {
 			...meta,
+			pendingIntents,
 			isValueUpdated: false,
 			submissionStatus: result.status,
 			value: result.initialValue,
@@ -1038,7 +1061,22 @@ export function createFormContext<
 		});
 	}
 
+	function getFieldElements(node: Node, form: HTMLFormElement): FieldElement[] {
+		if (isFieldElement(node) && node.form === form) {
+			return [node];
+		}
+
+		if (node instanceof HTMLElement) {
+			return Array.from(
+				node.querySelectorAll<FieldElement>('input,select,textarea'),
+			).filter((element) => element.form === form);
+		}
+
+		return [];
+	}
+
 	function observe() {
+		const initializedElements = new Set<FieldElement>();
 		const observer = new MutationObserver((mutations) => {
 			const form = getFormElement();
 
@@ -1046,27 +1084,80 @@ export function createFormContext<
 				return;
 			}
 
+			let shouldUpdateFormValue = false;
+
 			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;
+				switch (mutation.type) {
+					case 'childList': {
+						for (const node of mutation.addedNodes) {
+							const elements = getFieldElements(node, form);
+
+							for (const element of elements) {
+								const value = getValue(meta.initialValue, element.name);
+								const defaultValue =
+									typeof value === 'string' ||
+									(Array.isArray(value) &&
+										value.every((item) => typeof item === 'string'))
+										? value
+										: undefined;
+
+								if (!initializedElements.has(element)) {
+									updateField(element, {
+										value: defaultValue,
+										defaultValue,
+										constraint: meta.constraint[element.name],
+									});
+									initializedElements.add(element);
+								}
+
+								shouldUpdateFormValue = true;
+							}
+						}
+						for (const node of mutation.removedNodes) {
+							const elements = getFieldElements(node, form);
+
+							if (elements.length > 0) {
+								shouldUpdateFormValue = true;
+							}
+						}
+						break;
+					}
+					default: {
+						const elements = getFieldElements(mutation.target, form);
+
+						if (elements.length > 0) {
+							shouldUpdateFormValue = true;
+						}
+						break;
 					}
 				}
 			}
+
+			if (shouldUpdateFormValue) {
+				updateFormValue(form);
+			}
 		});
 
+		for (const element of getFormElement()?.elements ?? []) {
+			if (isFieldElement(element)) {
+				const value = getValue(meta.defaultValue, element.name);
+				const defaultValue =
+					typeof value === 'string' ||
+					(Array.isArray(value) &&
+						value.every((item) => typeof item === 'string'))
+						? value
+						: undefined;
+
+				updateField(element, {
+					value: defaultValue,
+					defaultValue,
+					constraint: meta.constraint[element.name],
+				});
+
+				initializedElements.add(element);
+			}
+		}
+
 		observer.observe(document, {
 			subtree: true,
 			childList: true,
@@ -1079,6 +1170,62 @@ export function createFormContext<
 		};
 	}
 
+	function runSideEffect(intents: Intent[]) {
+		const formElement = getFormElement();
+
+		if (!formElement) {
+			return;
+		}
+
+		for (const intent of intents) {
+			switch (intent.type) {
+				case 'update': {
+					const flattenedValue = flatten(intent.payload.value, {
+						prefix: formatName(intent.payload.name, intent.payload.index),
+					});
+
+					for (const element of formElement.elements) {
+						if (isFieldElement(element)) {
+							const value = flattenedValue[element.name];
+
+							updateField(element, {
+								value:
+									typeof value === 'string' ||
+									(Array.isArray(value) &&
+										value.every((item) => typeof item === 'string'))
+										? value
+										: undefined,
+							});
+						}
+					}
+					break;
+				}
+				case 'reset': {
+					const prefix = formatName(intent.payload.name, intent.payload.index);
+
+					for (const element of formElement.elements) {
+						if (isFieldElement(element) && isPrefix(element.name, prefix)) {
+							const value = getValue(meta.defaultValue, element.name);
+
+							updateField(element, {
+								defaultValue:
+									typeof value === 'string' ||
+									(Array.isArray(value) &&
+										value.every((item) => typeof item === 'string'))
+										? value
+										: undefined,
+							});
+							resetField(element);
+						}
+					}
+					break;
+				}
+			}
+
+			processedIntents.add(intent);
+		}
+	}
+
 	return {
 		getFormId() {
 			return meta.formId;
@@ -1094,9 +1241,149 @@ export function createFormContext<
 		insert: createFormControl('insert'),
 		remove: createFormControl('remove'),
 		reorder: createFormControl('reorder'),
+		runSideEffect,
 		subscribe,
 		getState,
 		getSerializedState,
 		observe,
 	};
 }
+
+export function resetField(
+	element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+): void {
+	if (element instanceof HTMLInputElement) {
+		switch (element.type) {
+			case 'checkbox':
+			case 'radio':
+				element.checked = element.defaultChecked;
+				break;
+			case 'file':
+				element.value = '';
+				break;
+			default:
+				element.value = element.defaultValue;
+				break;
+		}
+	} else if (element instanceof HTMLSelectElement) {
+		for (const option of element.options) {
+			option.selected = option.defaultSelected;
+		}
+	} else {
+		element.value = element.defaultValue;
+	}
+}
+
+export function updateField(
+	element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+	options: {
+		value?: string | string[];
+		defaultValue?: string | string[];
+		constraint?: {
+			required?: boolean;
+			minLength?: number;
+			maxLength?: number;
+			min?: string | number;
+			max?: string | number;
+			step?: string | number;
+			multiple?: boolean;
+			pattern?: string;
+		};
+	},
+) {
+	const value =
+		typeof options.value === 'undefined'
+			? null
+			: Array.isArray(options.value)
+				? options.value
+				: [options.value];
+	const defaultValue =
+		typeof options.defaultValue === 'undefined'
+			? null
+			: Array.isArray(options.defaultValue)
+				? options.defaultValue
+				: [options.defaultValue];
+
+	if (options.constraint) {
+		const { constraint } = options;
+
+		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;
+		}
+	}
+
+	if (element instanceof HTMLInputElement) {
+		switch (element.type) {
+			case 'checkbox':
+			case 'radio':
+				if (value) {
+					element.checked = value.includes(element.value);
+				}
+				if (defaultValue) {
+					element.defaultChecked = defaultValue.includes(element.value);
+				}
+				break;
+			case 'file':
+				// Do nothing for now
+				break;
+			default:
+				if (value) {
+					element.value = value[0] ?? '';
+				}
+				if (defaultValue) {
+					element.defaultValue = defaultValue[0] ?? '';
+				}
+				break;
+		}
+	} else if (element instanceof HTMLSelectElement) {
+		for (const option of element.options) {
+			if (value) {
+				option.selected = value.includes(option.value);
+			}
+			if (defaultValue) {
+				option.defaultSelected = defaultValue.includes(option.value);
+			}
+		}
+	} else {
+		if (value) {
+			element.value = value[0] ?? '';
+		}
+		if (defaultValue) {
+			element.defaultValue = defaultValue[0] ?? '';
+		}
+	}
+}
diff --git a/packages/conform-dom/formdata.ts b/packages/conform-dom/formdata.ts
index 30aa5111..aacaeb20 100644
--- a/packages/conform-dom/formdata.ts
+++ b/packages/conform-dom/formdata.ts
@@ -259,7 +259,7 @@ export function flatten(
 	const resolve = options.resolve ?? ((data) => data);
 
 	function process(data: unknown, prefix: string) {
-		const value = normalize(resolve(data));
+		const value = resolve(data);
 
 		if (typeof value !== 'undefined') {
 			result[prefix] = value;
@@ -276,7 +276,7 @@ export function flatten(
 		}
 	}
 
-	if (data) {
+	if (typeof data !== 'undefined') {
 		process(data, options.prefix ?? '');
 	}
 
diff --git a/packages/conform-dom/submission.ts b/packages/conform-dom/submission.ts
index c13ec74b..3be75ffb 100644
--- a/packages/conform-dom/submission.ts
+++ b/packages/conform-dom/submission.ts
@@ -175,9 +175,18 @@ export function parse<FormValue, FormError>(
 
 				if (typeof intent.payload.value !== 'undefined') {
 					if (name) {
-						setValue(context.payload, name, () => value);
+						setValue(context.payload, name, (currentValue) => {
+							if (isPlainObject(currentValue)) {
+								return Object.assign({}, currentValue, value);
+							}
+
+							return value;
+						});
 					} else {
-						context.payload = value;
+						context.payload = {
+							...context.payload,
+							...value,
+						};
 					}
 				}
 				break;
@@ -505,10 +514,10 @@ export function setState(
 			resolve(data) {
 				if (isPlainObject(data) || Array.isArray(data)) {
 					// @ts-expect-error
-					return data[root] ?? null;
+					return normalize(data[root] ?? null);
 				}
 
-				return data;
+				return normalize(data);
 			},
 			prefix: name,
 		}),
diff --git a/packages/conform-react/context.tsx b/packages/conform-react/context.tsx
index 69ece9c4..76d9e89f 100644
--- a/packages/conform-react/context.tsx
+++ b/packages/conform-react/context.tsx
@@ -210,7 +210,11 @@ export function updateSubjectRef(
 	scope?: keyof SubscriptionScope,
 	name?: string,
 ): void {
-	if (subject === 'status' || subject === 'formId') {
+	if (
+		subject === 'status' ||
+		subject === 'formId' ||
+		subject === 'lastIntent'
+	) {
 		ref.current[subject] = true;
 	} else if (typeof scope !== 'undefined' && typeof name !== 'undefined') {
 		ref.current[subject] = {
diff --git a/packages/conform-react/helpers.ts b/packages/conform-react/helpers.ts
index bebe699a..1f7734d9 100644
--- a/packages/conform-react/helpers.ts
+++ b/packages/conform-react/helpers.ts
@@ -214,7 +214,7 @@ export function getFormControlProps<Schema>(
 	options?: FormControlOptions,
 ): FormControlProps {
 	return simplify({
-		key: metadata.key,
+		key: undefined,
 		required: metadata.required || undefined,
 		...getFieldsetProps(metadata, options),
 	});
diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts
index 24161525..684fd0dc 100644
--- a/packages/conform-react/hooks.ts
+++ b/packages/conform-react/hooks.ts
@@ -91,11 +91,17 @@ export function useForm<
 		context.onUpdate({ ...formConfig, formId });
 	});
 
-	const subjectRef = useSubjectRef();
+	const subjectRef = useSubjectRef({
+		lastIntent: true,
+	});
 	const stateSnapshot = useFormState(context, subjectRef);
 	const noValidate = useNoValidate(options.defaultNoValidate);
 	const form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
 
+	useEffect(() => {
+		context.runSideEffect(stateSnapshot.pendingIntents);
+	}, [context, stateSnapshot.pendingIntents]);
+
 	return [form, form.getFieldset()];
 }
 
diff --git a/playground/app/routes/form-control.tsx b/playground/app/routes/form-control.tsx
index dad98b68..d552b9bd 100644
--- a/playground/app/routes/form-control.tsx
+++ b/playground/app/routes/form-control.tsx
@@ -104,6 +104,37 @@ export default function FormControl() {
 						>
 							Update number
 						</button>
+						<button
+							className="rounded-md border p-2 hover:border-black"
+							{...form.update.getButtonProps({
+								name: form.name,
+								value: {
+									name: 'Partial update',
+									message: 'This works!',
+								},
+							})}
+						>
+							Partial update
+						</button>
+						<button
+							className="rounded-md border p-2 hover:border-black"
+							type="button"
+							onClick={() => {
+								// We should wrap each form.update() in flushSync ideally
+								// But this is not well documented, so people are likely doing this as "it looks working"
+								// This makes sure we are not breaking the existing code
+								form.update({
+									name: fields.message.name,
+									value: 'Updated message',
+								});
+								form.update({
+									name: fields.number.name,
+									value: 987,
+								});
+							}}
+						>
+							Multiple updates
+						</button>
 						<button
 							className="rounded-md border p-2 hover:border-black"
 							{...form.update.getButtonProps({
diff --git a/playground/app/routes/sync-form-state.tsx b/playground/app/routes/sync-form-state.tsx
new file mode 100644
index 00000000..7d1fb40e
--- /dev/null
+++ b/playground/app/routes/sync-form-state.tsx
@@ -0,0 +1,196 @@
+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,
+			},
+		},
+	});
+	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" value="1-0624770" onChange={() => {}} />
+				</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/tests/integrations/form-control.spec.ts b/tests/integrations/form-control.spec.ts
index 039b3ea5..ade6a385 100644
--- a/tests/integrations/form-control.spec.ts
+++ b/tests/integrations/form-control.spec.ts
@@ -14,10 +14,12 @@ 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")'),
+		partialUpdate: form.locator('button:text("Partial update")'),
+		multipleUpdates: form.locator('button:text("Multiple updates")'),
 	};
 }
 
-async function runValidationScenario(page: Page) {
+async function runValidationScenario(page: Page, hasClientValidation: boolean) {
 	const playground = getPlayground(page);
 	const fieldset = getFieldset(playground.container);
 
@@ -74,17 +76,29 @@ async function runValidationScenario(page: Page) {
 	await expect(fieldset.message).toHaveValue(
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
 	);
+
+	await fieldset.partialUpdate.click();
+	await expect(fieldset.name).toHaveValue('Partial update');
+	await expect(fieldset.number).toHaveValue('13579');
+	await expect(fieldset.message).toHaveValue('This works!');
+
+	if (hasClientValidation) {
+		await fieldset.multipleUpdates.click();
+		await expect(fieldset.name).toHaveValue('Partial update');
+		await expect(fieldset.number).toHaveValue('987');
+		await expect(fieldset.message).toHaveValue('Updated message');
+	}
 }
 
 test.describe('With JS', () => {
 	test('Client Validation', async ({ page }) => {
 		await page.goto('/form-control');
-		await runValidationScenario(page);
+		await runValidationScenario(page, true);
 	});
 
 	test('Server Validation', async ({ page }) => {
 		await page.goto('/form-control?noClientValidate=yes');
-		await runValidationScenario(page);
+		await runValidationScenario(page, false);
 	});
 });
 
@@ -93,6 +107,6 @@ test.describe('No JS', () => {
 
 	test('Validation', async ({ page }) => {
 		await page.goto('/form-control');
-		await runValidationScenario(page);
+		await runValidationScenario(page, false);
 	});
 });
diff --git a/tests/integrations/sync-form-state.spec.ts b/tests/integrations/sync-form-state.spec.ts
new file mode 100644
index 00000000..91aa1aea
--- /dev/null
+++ b/tests/integrations/sync-form-state.spec.ts
@@ -0,0 +1,180 @@
+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();
+	await expect(fieldset.number).toHaveValue(
+		defaultValue.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);
+	}
+});