diff --git a/packages/bindx-dataview/src/DataGrid.tsx b/packages/bindx-dataview/src/DataGrid.tsx
index 7989ba84..4ec88392 100644
--- a/packages/bindx-dataview/src/DataGrid.tsx
+++ b/packages/bindx-dataview/src/DataGrid.tsx
@@ -23,6 +23,7 @@ import {
 import { useDataViewKey } from './DataViewKeyProvider.js'
 import { DataViewProvider, type DataViewContextValue, type DataViewLoaderState } from './DataViewContext.js'
 import { useDataGridSetup, QUERY_FILTER_NAME } from './useDataGridSetup.js'
+import { useListFetchAllData } from './useListFetchAllData.js'
 
 export { QUERY_FILTER_NAME }
 
@@ -152,6 +153,14 @@ function DataGridImpl<TRoleMap extends Record<string, object>>({
 		setHighlightIndex(null)
 	}, [items])
 
+	// ---- Unpaged fetch of the same list the grid loads ----
+	const fetchAllData = useListFetchAllData({
+		entityType,
+		filter: setup.combinedFilter,
+		orderBy: setup.sorting.resolvedOrderBy,
+		selection: setup.selection,
+	})
+
 	const contextValue = useMemo((): DataViewContextValue => ({
 		filtering: setup.filtering,
 		sorting: setup.sorting,
@@ -166,10 +175,11 @@ function DataGridImpl<TRoleMap extends Record<string, object>>({
 		highlightIndex,
 		setHighlightIndex,
 		selectionMeta: setup.selection,
+		fetchAllData,
 		toolbarContent: setup.toolbarContent,
 		layoutRenders: setup.layoutRenders,
 		layoutElements: setup.layoutElements,
-	}), [setup.filtering, setup.sorting, setup.paging, setup.selectionState, setup.columns, entityType, items, itemCount, loaderState, reload, highlightIndex, setup.selection, setup.toolbarContent, setup.layoutRenders, setup.layoutElements])
+	}), [setup.filtering, setup.sorting, setup.paging, setup.selectionState, setup.columns, entityType, items, itemCount, loaderState, reload, highlightIndex, setup.selection, fetchAllData, setup.toolbarContent, setup.layoutRenders, setup.layoutElements])
 
 	return (
 		<DataViewProvider value={contextValue}>
diff --git a/packages/bindx-dataview/src/DataViewContext.tsx b/packages/bindx-dataview/src/DataViewContext.tsx
index 4fc5e147..71906483 100644
--- a/packages/bindx-dataview/src/DataViewContext.tsx
+++ b/packages/bindx-dataview/src/DataViewContext.tsx
@@ -18,6 +18,9 @@ export interface DataViewElementData {
 	readonly fallback?: boolean
 }
 
+/** Fetches every row in the view's scope, unpaged. Resolves to null when the query returned an unexpected result. */
+export type DataViewFetchAllData = () => Promise<readonly Record<string, unknown>[] | null>
+
 export interface DataViewContextValue {
 	readonly filtering: FilteringState
 	readonly sorting: SortingStateResult
@@ -32,6 +35,8 @@ export interface DataViewContextValue {
 	readonly highlightIndex: number | null
 	readonly setHighlightIndex: (index: number | null) => void
 	readonly selectionMeta: SelectionMeta
+	/** Owned by each view, so the query keeps the scope the view loads with (static filter, parent relation). */
+	readonly fetchAllData: DataViewFetchAllData
 	readonly toolbarContent?: React.ReactNode
 	/** Named layout render callbacks — analyzed during collection, called per item at runtime */
 	readonly layoutRenders: ReadonlyMap<string, (item: DataViewItem) => React.ReactNode>
diff --git a/packages/bindx-dataview/src/HasManyDataGrid.tsx b/packages/bindx-dataview/src/HasManyDataGrid.tsx
index a245eb09..2c6188e7 100644
--- a/packages/bindx-dataview/src/HasManyDataGrid.tsx
+++ b/packages/bindx-dataview/src/HasManyDataGrid.tsx
@@ -30,7 +30,6 @@ import type {
 import { FIELD_REF_META } from '@contember/bindx'
 import {
 	buildQueryFromSelection,
-	generateHasManyAlias,
 	EntityHandle,
 	setEntityData,
 } from '@contember/bindx'
@@ -40,8 +39,9 @@ import {
 	useBindxContext,
 } from '@contember/bindx-react'
 import { useDataViewKey } from './DataViewKeyProvider.js'
-import { DataViewProvider, type DataViewContextValue, type DataViewLoaderState } from './DataViewContext.js'
+import { DataViewProvider, type DataViewContextValue, type DataViewFetchAllData, type DataViewLoaderState } from './DataViewContext.js'
 import { useDataGridSetup } from './useDataGridSetup.js'
+import { buildHasManyRelationQuery, extractHasManyRelationRows } from './hasManyRelationQuery.js'
 
 // ============================================================================
 // Props
@@ -133,17 +133,6 @@ function HasManyDataGridImpl<TEntity extends object>({
 	const [loaderState, setLoaderState] = useState<DataViewLoaderState>('initial')
 	const [listState, setListState] = useState<ListState>(INITIAL_LIST_STATE)
 
-	// ---- Build relation query spec ----
-	const alias = useMemo(
-		() => generateHasManyAlias(fieldName, {
-			filter: setup.combinedFilter,
-			orderBy: setup.sorting.resolvedOrderBy as unknown[],
-			limit: setup.paging.queryLimit,
-			offset: setup.paging.queryOffset,
-		}),
-		[fieldName, setup.combinedFilter, setup.sorting.resolvedOrderBy, setup.paging.queryLimit, setup.paging.queryOffset],
-	)
-
 	const optionsKey = useMemo(
 		() => JSON.stringify({
 			filter: setup.combinedFilter ?? {},
@@ -161,7 +150,6 @@ function HasManyDataGridImpl<TEntity extends object>({
 
 		const fetchData = async (): Promise<void> => {
 			try {
-				const targetSpec = buildQueryFromSelection(setup.selection)
 				const currentOptions = JSON.parse(optionsKey) as {
 					filter: Record<string, unknown>
 					orderBy: readonly Record<string, unknown>[]
@@ -169,32 +157,18 @@ function HasManyDataGridImpl<TEntity extends object>({
 					offset?: number
 				}
 
-				const parentSpec = {
-					fields: [
-						{ name: 'id', sourcePath: ['id'] },
-						{
-							name: alias,
-							sourcePath: [fieldName],
-							isArray: true as const,
-							totalCount: true,
-							filter: Object.keys(currentOptions.filter).length > 0 ? currentOptions.filter : undefined,
-							orderBy: currentOptions.orderBy.length > 0 ? currentOptions.orderBy : undefined,
-							limit: currentOptions.limit,
-							offset: currentOptions.offset,
-							nested: targetSpec,
-						},
-					],
-				}
+				const { alias, query } = buildHasManyRelationQuery({
+					parentEntityType,
+					parentEntityId,
+					fieldName,
+					filter: currentOptions.filter,
+					orderBy: currentOptions.orderBy,
+					limit: currentOptions.limit,
+					offset: currentOptions.offset,
+					targetSpec: buildQueryFromSelection(setup.selection),
+				})
 
-				const result = await batcher.enqueue(
-					{
-						type: 'get',
-						entityType: parentEntityType,
-						by: { id: parentEntityId },
-						spec: parentSpec,
-					},
-					{ signal: abortController.signal },
-				)
+				const result = await batcher.enqueue(query, { signal: abortController.signal })
 
 				if (abortController.signal.aborted) return
 
@@ -203,17 +177,13 @@ function HasManyDataGridImpl<TEntity extends object>({
 					return
 				}
 
-				const relationData = (result.data[alias] ?? result.data[fieldName]) as Array<Record<string, unknown>> | undefined
-				const totalCount = Array.isArray(relationData) && 'totalCount' in relationData
-					? (relationData as Array<Record<string, unknown>> & { totalCount: number }).totalCount
-					: undefined
-
-				if (!Array.isArray(relationData)) {
-					setListState({ status: 'ready', items: [], totalCount })
+				const relation = extractHasManyRelationRows(result.data, { alias, fieldName })
+				if (!relation) {
+					setListState({ status: 'ready', items: [] })
 					return
 				}
 
-				const items = relationData.map((data: Record<string, unknown>) => {
+				const items = relation.rows.map((data: Record<string, unknown>) => {
 					const id = data['id'] as string
 					dispatcher.dispatch(
 						setEntityData(targetEntityType, id, data, true),
@@ -221,7 +191,7 @@ function HasManyDataGridImpl<TEntity extends object>({
 					return { id, data: data as object }
 				})
 
-				setListState({ status: 'ready', items, totalCount })
+				setListState({ status: 'ready', items, totalCount: relation.totalCount })
 			} catch (error) {
 				if (abortController.signal.aborted) return
 				setListState({ status: 'error', items: [] })
@@ -233,7 +203,7 @@ function HasManyDataGridImpl<TEntity extends object>({
 		return () => {
 			abortController.abort()
 		}
-	}, [parentEntityType, parentEntityId, fieldName, targetEntityType, alias, optionsKey, setup.selection, batcher, dispatcher, store])
+	}, [parentEntityType, parentEntityId, fieldName, targetEntityType, optionsKey, setup.selection, batcher, dispatcher, store])
 
 	// ---- Build items from state ----
 	const items = useMemo((): EntityAccessor<TEntity>[] => {
@@ -285,6 +255,23 @@ function HasManyDataGridImpl<TEntity extends object>({
 		setHighlightIndex(null)
 	}, [items])
 
+	// ---- Unpaged read of the same parent-scoped relation ----
+	const fetchAllData = useCallback<DataViewFetchAllData>(async () => {
+		const { alias, query } = buildHasManyRelationQuery({
+			parentEntityType,
+			parentEntityId,
+			fieldName,
+			filter: setup.combinedFilter,
+			orderBy: setup.sorting.resolvedOrderBy,
+			targetSpec: buildQueryFromSelection(setup.selection),
+		})
+
+		const result = await batcher.enqueue(query)
+		if (result.type !== 'get' || !result.data) return null
+
+		return extractHasManyRelationRows(result.data, { alias, fieldName })?.rows ?? null
+	}, [parentEntityType, parentEntityId, fieldName, setup.combinedFilter, setup.sorting.resolvedOrderBy, setup.selection, batcher])
+
 	const contextValue = useMemo((): DataViewContextValue => ({
 		filtering: setup.filtering,
 		sorting: setup.sorting,
@@ -299,10 +286,11 @@ function HasManyDataGridImpl<TEntity extends object>({
 		highlightIndex,
 		setHighlightIndex,
 		selectionMeta: setup.selection,
+		fetchAllData,
 		toolbarContent: setup.toolbarContent,
 		layoutRenders: setup.layoutRenders,
 		layoutElements: setup.layoutElements,
-	}), [setup.filtering, setup.sorting, setup.paging, setup.selectionState, setup.columns, targetEntityType, items, itemCount, loaderState, reload, highlightIndex, setup.selection, setup.toolbarContent, setup.layoutRenders, setup.layoutElements])
+	}), [setup.filtering, setup.sorting, setup.paging, setup.selectionState, setup.columns, targetEntityType, items, itemCount, loaderState, reload, highlightIndex, setup.selection, fetchAllData, setup.toolbarContent, setup.layoutRenders, setup.layoutElements])
 
 	return (
 		<DataViewProvider value={contextValue}>
diff --git a/packages/bindx-dataview/src/export.tsx b/packages/bindx-dataview/src/export.tsx
index 765acb3d..fa61768f 100644
--- a/packages/bindx-dataview/src/export.tsx
+++ b/packages/bindx-dataview/src/export.tsx
@@ -15,9 +15,6 @@ import React, { forwardRef, type ReactElement, useCallback, useState } from 'rea
 import { Slot } from '@radix-ui/react-slot'
 import { composeEventHandlers } from '@radix-ui/primitive'
 import { useDataViewContext } from './DataViewContext.js'
-import { useBindxContext } from '@contember/bindx-react'
-import { buildQueryFromSelection } from '@contember/bindx'
-import type { ListQuery, ListQueryResult } from '@contember/bindx'
 
 // ============================================================================
 // Export Factory Interface
@@ -117,12 +114,11 @@ export interface DataViewExportTriggerProps {
 
 export const DataViewExportTrigger = forwardRef<HTMLButtonElement, DataViewExportTriggerProps>(
 	({ baseName, exportFactory = defaultExportFactory, onlyVisible = false, ...props }, ref) => {
-		const { columns, entityType, filtering, selection, selectionMeta } = useDataViewContext()
-		const { adapter } = useBindxContext()
+		const { columns, entityType, fetchAllData, selection } = useDataViewContext()
 		const [isExporting, setIsExporting] = useState(false)
 
 		const handleExport = useCallback(async (): Promise<void> => {
-			if (!adapter || isExporting) return
+			if (isExporting) return
 			setIsExporting(true)
 
 			try {
@@ -130,19 +126,8 @@ export const DataViewExportTrigger = forwardRef<HTMLButtonElement, DataViewExpor
 					? columns.filter((c, i) => selection.isVisible(c.fieldName ?? `col-${i}`))
 					: columns
 
-				const listQuery: ListQuery = {
-					type: 'list',
-					entityType,
-					filter: filtering.resolvedWhere,
-					orderBy: undefined,
-					limit: undefined,
-					offset: undefined,
-					spec: buildQueryFromSelection(selectionMeta),
-				}
-
-				const results = await adapter.query([listQuery])
-				const result = results[0]
-				if (!result || result.type !== 'list') {
+				const data = await fetchAllData()
+				if (!data) {
 					console.error('Export failed: unexpected result')
 					return
 				}
@@ -152,7 +137,7 @@ export const DataViewExportTrigger = forwardRef<HTMLButtonElement, DataViewExpor
 					.map(c => ({ name: String(c.header ?? c.fieldName ?? ''), fieldName: c.fieldName }))
 
 				const { blob, extension } = exportFactory.create({
-					data: (result as ListQueryResult).data,
+					data,
 					columns: exportColumns,
 				})
 
@@ -169,7 +154,7 @@ export const DataViewExportTrigger = forwardRef<HTMLButtonElement, DataViewExpor
 			} finally {
 				setIsExporting(false)
 			}
-		}, [adapter, columns, entityType, filtering.resolvedWhere, selectionMeta, exportFactory, baseName, isExporting, onlyVisible, selection])
+		}, [columns, entityType, fetchAllData, exportFactory, baseName, isExporting, onlyVisible, selection])
 
 		const { onClick, ...otherProps } = props as React.ButtonHTMLAttributes<HTMLButtonElement>
 
@@ -195,25 +180,10 @@ export interface FetchAllDataResult {
 }
 
 export function useDataViewFetchAllData(): () => Promise<FetchAllDataResult | null> {
-	const { entityType, filtering, selectionMeta } = useDataViewContext()
-	const { adapter } = useBindxContext()
+	const { fetchAllData } = useDataViewContext()
 
 	return useCallback(async (): Promise<FetchAllDataResult | null> => {
-		if (!adapter) return null
-
-		const listQuery: ListQuery = {
-			type: 'list',
-			entityType,
-			filter: filtering.resolvedWhere,
-			orderBy: undefined,
-			limit: undefined,
-			offset: undefined,
-			spec: buildQueryFromSelection(selectionMeta),
-		}
-
-		const results = await adapter.query([listQuery])
-		const result = results[0]
-		if (!result || result.type !== 'list') return null
-		return { data: (result as ListQueryResult).data }
-	}, [adapter, entityType, filtering.resolvedWhere, selectionMeta])
+		const data = await fetchAllData()
+		return data ? { data } : null
+	}, [fetchAllData])
 }
diff --git a/packages/bindx-dataview/src/hasManyRelationQuery.ts b/packages/bindx-dataview/src/hasManyRelationQuery.ts
new file mode 100644
index 00000000..c2dd4cf8
--- /dev/null
+++ b/packages/bindx-dataview/src/hasManyRelationQuery.ts
@@ -0,0 +1,92 @@
+/**
+ * Parent-scoped relation query used by HasManyDataGrid.
+ *
+ * The grid reads its rows through the parent record, so every read of the
+ * relation — paged load and unpaged export alike — has to go through it.
+ */
+
+import { generateHasManyAlias } from '@contember/bindx'
+import type { GetQuery, QuerySpec } from '@contember/bindx'
+
+export interface HasManyRelationQueryOptions {
+	readonly parentEntityType: string
+	readonly parentEntityId: string
+	readonly fieldName: string
+	readonly filter: Record<string, unknown> | undefined
+	readonly orderBy: readonly Record<string, unknown>[] | undefined
+	readonly limit?: number
+	readonly offset?: number
+	readonly targetSpec: QuerySpec
+}
+
+export interface HasManyRelationQuery {
+	/** Alias the relation rows are returned under */
+	readonly alias: string
+	readonly query: GetQuery
+}
+
+export interface HasManyRelationRows {
+	readonly rows: readonly Record<string, unknown>[]
+	readonly totalCount: number | undefined
+}
+
+export function buildHasManyRelationQuery({
+	parentEntityType,
+	parentEntityId,
+	fieldName,
+	filter,
+	orderBy,
+	limit,
+	offset,
+	targetSpec,
+}: HasManyRelationQueryOptions): HasManyRelationQuery {
+	const relationFilter = filter && Object.keys(filter).length > 0 ? filter : undefined
+	const relationOrderBy = orderBy && orderBy.length > 0 ? orderBy : undefined
+	const alias = generateHasManyAlias(fieldName, {
+		filter: relationFilter,
+		orderBy: relationOrderBy,
+		limit,
+		offset,
+	})
+
+	const spec: QuerySpec = {
+		fields: [
+			{ name: 'id', sourcePath: ['id'] },
+			{
+				name: alias,
+				sourcePath: [fieldName],
+				isArray: true,
+				totalCount: true,
+				filter: relationFilter,
+				orderBy: relationOrderBy,
+				limit,
+				offset,
+				nested: targetSpec,
+			},
+		],
+	}
+
+	return {
+		alias,
+		query: {
+			type: 'get',
+			entityType: parentEntityType,
+			by: { id: parentEntityId },
+			spec,
+		},
+	}
+}
+
+export function extractHasManyRelationRows(
+	data: Record<string, unknown>,
+	{ alias, fieldName }: { alias: string; fieldName: string },
+): HasManyRelationRows | null {
+	const value = data[alias] ?? data[fieldName]
+	if (!isRecordArray(value)) return null
+	const totalCount = 'totalCount' in value && typeof value.totalCount === 'number' ? value.totalCount : undefined
+	return { rows: value, totalCount }
+}
+
+function isRecordArray(value: unknown): value is readonly Record<string, unknown>[] {
+	return Array.isArray(value) && value.every(item => typeof item === 'object' && item !== null)
+}
diff --git a/packages/bindx-dataview/src/index.ts b/packages/bindx-dataview/src/index.ts
index ea3faad7..68f9b730 100644
--- a/packages/bindx-dataview/src/index.ts
+++ b/packages/bindx-dataview/src/index.ts
@@ -127,6 +127,7 @@ export {
 	useOptionalDataViewContext,
 	DataViewProvider,
 	type DataViewContextValue,
+	type DataViewFetchAllData,
 	type DataViewItem,
 	type DataViewLoaderState as DataViewLoaderStateType,
 	type DataViewElementData,
diff --git a/packages/bindx-dataview/src/select/SelectDataView.tsx b/packages/bindx-dataview/src/select/SelectDataView.tsx
index 2f10cdaf..d81c4019 100644
--- a/packages/bindx-dataview/src/select/SelectDataView.tsx
+++ b/packages/bindx-dataview/src/select/SelectDataView.tsx
@@ -45,6 +45,7 @@ import {
 import { useSelectOptions } from './selectContext.js'
 import { DataViewProvider, type DataViewContextValue, type DataViewLoaderState } from '../DataViewContext.js'
 import { useFilteringState, useSortingState, usePagingState, useSelectionState } from '../useDataViewState.js'
+import { useListFetchAllData } from '../useListFetchAllData.js'
 
 export interface SelectDataViewProps {
 	/** Children rendered inside the DataView context */
@@ -212,6 +213,13 @@ function SelectDataViewImpl({
 
 	const emptyMap = useMemo(() => new Map(), [])
 
+	const fetchAllData = useListFetchAllData({
+		entityType,
+		filter: combinedFilter,
+		orderBy: sorting.resolvedOrderBy,
+		selection,
+	})
+
 	const contextValue = useMemo((): DataViewContextValue => ({
 		filtering,
 		sorting,
@@ -226,10 +234,11 @@ function SelectDataViewImpl({
 		highlightIndex,
 		setHighlightIndex,
 		selectionMeta: selection,
+		fetchAllData,
 		toolbarContent: undefined,
 		layoutRenders: emptyMap,
 		layoutElements: emptyMap,
-	}), [filtering, sorting, paging, selectionState, entityType, items, itemCount, loaderState, reload, highlightIndex, selection, emptyMap])
+	}), [filtering, sorting, paging, selectionState, entityType, items, itemCount, loaderState, reload, highlightIndex, selection, fetchAllData, emptyMap])
 
 	return (
 		<DataViewProvider value={contextValue}>
diff --git a/packages/bindx-dataview/src/useListFetchAllData.ts b/packages/bindx-dataview/src/useListFetchAllData.ts
new file mode 100644
index 00000000..0c2938a6
--- /dev/null
+++ b/packages/bindx-dataview/src/useListFetchAllData.ts
@@ -0,0 +1,38 @@
+/**
+ * Unpaged fetch-all for views that load through a root list query.
+ */
+
+import { useCallback } from 'react'
+import { buildQueryFromSelection } from '@contember/bindx'
+import type { ListQuery, SelectionMeta } from '@contember/bindx'
+import { useBindxContext } from '@contember/bindx-react'
+import type { DataViewFetchAllData } from './DataViewContext.js'
+
+export interface ListFetchAllDataOptions {
+	/** Entity the view lists */
+	readonly entityType: string
+	/** Full scope of the view — static filter combined with the user filters */
+	readonly filter: Record<string, unknown> | undefined
+	readonly orderBy: readonly Record<string, unknown>[] | undefined
+	readonly selection: SelectionMeta
+}
+
+export function useListFetchAllData({ entityType, filter, orderBy, selection }: ListFetchAllDataOptions): DataViewFetchAllData {
+	const { adapter } = useBindxContext()
+
+	return useCallback(async (): Promise<readonly Record<string, unknown>[] | null> => {
+		const listQuery: ListQuery = {
+			type: 'list',
+			entityType,
+			filter,
+			orderBy,
+			limit: undefined,
+			offset: undefined,
+			spec: buildQueryFromSelection(selection),
+		}
+
+		const results = await adapter.query([listQuery])
+		const result = results[0]
+		return result?.type === 'list' ? result.data : null
+	}, [adapter, entityType, filter, orderBy, selection])
+}
diff --git a/packages/bindx-form/src/components/FormInput.tsx b/packages/bindx-form/src/components/FormInput.tsx
index c7a311b0..3c6b76d1 100644
--- a/packages/bindx-form/src/components/FormInput.tsx
+++ b/packages/bindx-form/src/components/FormInput.tsx
@@ -3,7 +3,7 @@ import { SlotInput } from './SlotInput.js'
 import { useFormFieldState } from '../contexts.js'
 import { useFormInputHandler } from '../hooks/useFormInputHandler.js'
 import { useFormInputValidationHandler } from '../hooks/useFormInputValidationHandler.js'
-import type { FormInputProps } from '../types.js'
+import type { FormInputHandlerContext, FormInputProps } from '../types.js'
 import { useField } from '@contember/bindx-react'
 
 /**
@@ -13,6 +13,13 @@ function dataAttribute(value: boolean): '' | undefined {
 	return value ? '' : undefined
 }
 
+/**
+ * Collects the error a handler reports for the current input.
+ */
+interface HandlerErrorReport {
+	message: string | null
+}
+
 /**
  * Binds a field handle to an input element using Radix Slot pattern.
  *
@@ -35,6 +42,7 @@ export function FormInput<T>({
 	children,
 	formatValue: formatValueProp,
 	parseValue: parseValueProp,
+	handler: handlerProp,
 }: FormInputProps<T>): ReactElement {
 	const formState = useFormFieldState()
 	const id = formState?.htmlId
@@ -47,15 +55,26 @@ export function FormInput<T>({
 		formatValue: formatValueProp as ((value: unknown) => string) | undefined,
 		parseValue: parseValueProp as ((value: string) => unknown) | undefined,
 		columnType: formState?.field?.columnType as import('../types.js').ColumnType | undefined,
+		handler: handlerProp,
 	})
 
 	// Get validation handler for HTML5 validation + touch tracking
 	const validation = useFormInputValidationHandler(field)
 
-	const handlerContext = { state: handlerState, setState: setHandlerState }
-
 	const accessor = useField(field)
 
+	const createHandlerContext = useCallback(
+		(report: HandlerErrorReport): FormInputHandlerContext => ({
+			state: handlerState,
+			setState: setHandlerState,
+			currentValue: accessor.value,
+			setError: message => {
+				report.message = message
+			},
+		}),
+		[handlerState, accessor.value],
+	)
+
 	// Compute derived state
 	const hasErrors = (formState?.errors.length ?? field.errors.length) > 0
 	const dirty = formState?.dirty ?? accessor.isDirty
@@ -63,15 +82,19 @@ export function FormInput<T>({
 	const touched = field.isTouched
 
 	// Format current value for display
-	const displayValue = handler.formatValue(accessor.value, handlerContext)
+	const displayValue = handler.formatValue(accessor.value, createHandlerContext({ message: null }))
 
 	// Handle input changes
 	const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
 		(e) => {
-			const parsedValue = handler.parseValue(e.target.value, handlerContext)
+			const report: HandlerErrorReport = { message: null }
+			const parsedValue = handler.parseValue(e.target.value, createHandlerContext(report))
 			field.setValue(parsedValue as T | null)
+			if (report.message !== null) {
+				field.addError(report.message)
+			}
 		},
-		[field, handler, handlerContext],
+		[field, handler, createHandlerContext],
 	)
 
 	// Combine focus handler with validation
@@ -86,8 +109,13 @@ export function FormInput<T>({
 	const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(
 		(e) => {
 			validation.onBlur(e)
+			const report: HandlerErrorReport = { message: null }
+			handler.onBlur?.(createHandlerContext(report))
+			if (report.message !== null) {
+				field.addError(report.message)
+			}
 		},
-		[validation],
+		[field, handler, createHandlerContext, validation],
 	)
 
 	return (
diff --git a/packages/bindx-form/src/handlers/createJsonHandler.ts b/packages/bindx-form/src/handlers/createJsonHandler.ts
new file mode 100644
index 00000000..834ea1b9
--- /dev/null
+++ b/packages/bindx-form/src/handlers/createJsonHandler.ts
@@ -0,0 +1,90 @@
+import type { FormInputHandler, FormInputHandlerContext, JSONValue } from '../types.js'
+
+/**
+ * Options for createJsonHandler
+ */
+export interface JsonHandlerOptions {
+	/** Value written when the input is empty. Default `null`. */
+	readonly emptyValue?: JSONValue | null
+	/** Shape validation beyond JSON syntax. Returns an error message or null. */
+	readonly validate?: (value: JSONValue) => string | null
+	/** Pretty-print the raw input when the field loses focus. Default false. */
+	readonly formatOnBlur?: boolean
+}
+
+/**
+ * Raw input kept next to the pretty-printed form of the value it produced,
+ * so half-typed JSON is not reformatted under the user's cursor.
+ */
+interface JsonHandlerState {
+	readonly rawValue: string
+	readonly formatted: string
+	readonly error: string | null
+}
+
+function formatJson(value: unknown): string {
+	if (value === null || value === undefined) return ''
+	return JSON.stringify(value, null, 2)
+}
+
+function readState(state: unknown): JsonHandlerState | undefined {
+	if (typeof state !== 'object' || state === null) return undefined
+	if (!('rawValue' in state) || !('formatted' in state) || !('error' in state)) return undefined
+	const { rawValue, formatted, error } = state
+	if (typeof rawValue !== 'string' || typeof formatted !== 'string') return undefined
+	if (error !== null && typeof error !== 'string') return undefined
+	return { rawValue, formatted, error }
+}
+
+function describeParseError(error: unknown): string {
+	return `Invalid JSON: ${error instanceof Error ? error.message : String(error)}`
+}
+
+/**
+ * Handler for Json columns.
+ *
+ * Parses the input into a JSON value, keeps the previous value when the input does
+ * not parse, and reports the parse or validation failure as a field error, which
+ * blocks persist until the input parses again.
+ */
+export function createJsonHandler(options: JsonHandlerOptions = {}): FormInputHandler {
+	const { emptyValue = null, validate, formatOnBlur = false } = options
+
+	return {
+		parseValue: (value: string, ctx: FormInputHandlerContext): unknown => {
+			if (value.trim() === '') {
+				ctx.setState({ rawValue: value, formatted: formatJson(emptyValue), error: null })
+				return emptyValue
+			}
+			let parsed: JSONValue
+			try {
+				parsed = JSON.parse(value)
+			} catch (error) {
+				const message = describeParseError(error)
+				ctx.setState({ rawValue: value, formatted: formatJson(ctx.currentValue), error: message })
+				ctx.setError(message)
+				return ctx.currentValue
+			}
+			const validationError = validate?.(parsed) ?? null
+			ctx.setState({ rawValue: value, formatted: formatJson(parsed), error: validationError })
+			if (validationError !== null) {
+				ctx.setError(validationError)
+			}
+			return parsed
+		},
+		formatValue: (value: unknown, ctx: FormInputHandlerContext): string => {
+			const state = readState(ctx.state)
+			const formatted = formatJson(value)
+			return state !== undefined && state.formatted === formatted ? state.rawValue : formatted
+		},
+		onBlur: (ctx: FormInputHandlerContext): void => {
+			const state = readState(ctx.state)
+			if (state === undefined) return
+			// The error parseValue added now survives the blur, so re-reporting it would double it.
+			if (state.error !== null) return
+			if (formatOnBlur && state.rawValue !== state.formatted) {
+				ctx.setState({ ...state, rawValue: state.formatted })
+			}
+		},
+	}
+}
diff --git a/packages/bindx-form/src/hooks/index.ts b/packages/bindx-form/src/hooks/index.ts
index 14a95ca8..bce94758 100644
--- a/packages/bindx-form/src/hooks/index.ts
+++ b/packages/bindx-form/src/hooks/index.ts
@@ -1,2 +1,2 @@
 export { useFormInputHandler, getDefaultInputProps, type UseFormInputHandlerOptions } from './useFormInputHandler.js'
-export { useFormInputValidationHandler, type ValidationHandlerResult } from './useFormInputValidationHandler.js'
+export { useFormInputValidationHandler, HTML5_VALIDATION_ERROR_CODE, type ValidationHandlerResult } from './useFormInputValidationHandler.js'
diff --git a/packages/bindx-form/src/hooks/useFormInputHandler.ts b/packages/bindx-form/src/hooks/useFormInputHandler.ts
index 49700470..a9a5d67d 100644
--- a/packages/bindx-form/src/hooks/useFormInputHandler.ts
+++ b/packages/bindx-form/src/hooks/useFormInputHandler.ts
@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import type { FormInputHandler, FormInputHandlerContext, ColumnType } from '../types.js'
+import { createJsonHandler } from '../handlers/createJsonHandler.js'
 
 /**
  * Default handler for string fields
@@ -146,6 +147,7 @@ const defaultTypeHandlers: Partial<Record<ColumnType, HandlerFactory>> = {
 	Time: createTimeHandler,
 	Uuid: createStringHandler,
 	Enum: createStringHandler,
+	Json: () => createJsonHandler(),
 }
 
 function resolveColumnType(columnType: string | undefined): ColumnType | undefined {
@@ -163,6 +165,8 @@ export interface UseFormInputHandlerOptions {
 	formatValue?: FormInputHandler['formatValue']
 	/** Column type for auto-detection */
 	columnType?: ColumnType
+	/** Base handler, takes precedence over the column-type handler */
+	handler?: FormInputHandler
 }
 
 /**
@@ -170,20 +174,21 @@ export interface UseFormInputHandlerOptions {
  * Can be overridden with custom parse/format functions.
  */
 export function useFormInputHandler(options: UseFormInputHandlerOptions = {}): FormInputHandler {
-	const { parseValue, formatValue, columnType } = options
+	const { parseValue, formatValue, columnType, handler } = options
 
 	return useMemo(() => {
-		// Get base handler from column type or default to string
+		// Get base handler from the override, the column type, or default to string
 		const resolved = resolveColumnType(columnType)
 		const factory = (resolved && defaultTypeHandlers[resolved]) || createStringHandler
-		const baseHandler = factory()
+		const baseHandler = handler ?? factory()
 
 		return {
 			parseValue: parseValue ?? baseHandler.parseValue,
 			formatValue: formatValue ?? baseHandler.formatValue,
 			defaultInputProps: baseHandler.defaultInputProps,
+			onBlur: baseHandler.onBlur,
 		}
-	}, [parseValue, formatValue, columnType])
+	}, [parseValue, formatValue, columnType, handler])
 }
 
 /**
diff --git a/packages/bindx-form/src/hooks/useFormInputValidationHandler.ts b/packages/bindx-form/src/hooks/useFormInputValidationHandler.ts
index 0e67d277..7b2cd20b 100644
--- a/packages/bindx-form/src/hooks/useFormInputValidationHandler.ts
+++ b/packages/bindx-form/src/hooks/useFormInputValidationHandler.ts
@@ -1,5 +1,20 @@
 import { useRef, useState, useCallback, useEffect, type RefObject, type FocusEventHandler } from 'react'
-import type { FieldRef } from '@contember/bindx'
+import type { FieldErrorFilter, FieldRef } from '@contember/bindx'
+
+/**
+ * Code carried by the errors this hook adds, so they can be told apart from
+ * server errors and from validation raised elsewhere.
+ */
+export const HTML5_VALIDATION_ERROR_CODE = 'html5-validity'
+
+const ownErrors: FieldErrorFilter = { source: 'client', code: HTML5_VALIDATION_ERROR_CODE }
+
+function syncValidationError<T>(field: FieldRef<T>, message: string | undefined): void {
+	field.clearErrors(ownErrors)
+	if (message) {
+		field.addError({ message, code: HTML5_VALIDATION_ERROR_CODE })
+	}
+}
 
 /**
  * Result from useFormInputValidationHandler hook.
@@ -20,7 +35,8 @@ export interface ValidationHandlerResult {
  * - Marks field as touched on blur
  * - Reads HTML5 validation message on blur
  * - Syncs validation errors with field handle
- * - Clears validation errors on focus
+ * - Only ever clears the error it added itself, so server errors and validation
+ *   raised by other code survive a blur
  *
  * @example
  * ```tsx
@@ -59,10 +75,7 @@ export function useFormInputValidationHandler<T>(
 		const message = input.validity.valid ? undefined : input.validationMessage
 		validationMessageRef.current = message
 
-		field.clearErrors()
-		if (message) {
-			field.addError(message)
-		}
+		syncValidationError(field, message)
 	}, [field])
 
 	// Effect to sync validation state when value changes
@@ -73,10 +86,7 @@ export function useFormInputValidationHandler<T>(
 		const message = input.validity.valid ? undefined : input.validationMessage
 		if (message !== validationMessageRef.current) {
 			validationMessageRef.current = message
-			field.clearErrors()
-			if (message) {
-				field.addError(message)
-			}
+			syncValidationError(field, message)
 		}
 	})
 
diff --git a/packages/bindx-form/src/index.ts b/packages/bindx-form/src/index.ts
index 6bda9dee..740ee948 100644
--- a/packages/bindx-form/src/index.ts
+++ b/packages/bindx-form/src/index.ts
@@ -11,6 +11,10 @@ export type {
 	FormInputHandlerContext,
 	FormInputHandlerFactory,
 	ColumnType,
+	JSONPrimitive,
+	JSONValue,
+	JSONObject,
+	JSONArray,
 	TypeHandlerMap,
 	FormFieldScopeProps,
 	FormFieldStateProviderProps,
@@ -36,9 +40,13 @@ export {
 	getDefaultInputProps,
 	type UseFormInputHandlerOptions,
 	useFormInputValidationHandler,
+	HTML5_VALIDATION_ERROR_CODE,
 	type ValidationHandlerResult,
 } from './hooks/index.js'
 
+// Handlers
+export { createJsonHandler, type JsonHandlerOptions } from './handlers/createJsonHandler.js'
+
 // Components
 export {
 	SlotInput,
diff --git a/packages/bindx-form/src/types.ts b/packages/bindx-form/src/types.ts
index 9ddc9783..fea57647 100644
--- a/packages/bindx-form/src/types.ts
+++ b/packages/bindx-form/src/types.ts
@@ -28,6 +28,10 @@ export interface FormFieldState {
 export interface FormInputHandlerContext<State = unknown> {
 	readonly state?: State
 	readonly setState: (state: State) => void
+	/** Current field value, so a handler can keep it when the input does not parse */
+	readonly currentValue: unknown
+	/** Reports a validation error; the input adds it to the field after writing the value */
+	readonly setError: (message: string) => void
 }
 
 /**
@@ -40,6 +44,8 @@ export interface FormInputHandler<State = unknown> {
 	readonly formatValue: (value: unknown, ctx: FormInputHandlerContext<State>) => string
 	/** Default HTML input attributes for this type */
 	readonly defaultInputProps?: InputHTMLAttributes<HTMLInputElement>
+	/** Called when the input loses focus, to reformat the raw input or re-report an error */
+	readonly onBlur?: (ctx: FormInputHandlerContext<State>) => void
 }
 
 /**
@@ -47,6 +53,14 @@ export interface FormInputHandler<State = unknown> {
  */
 export type FormInputHandlerFactory<State = unknown> = () => FormInputHandler<State>
 
+/**
+ * JSON column value. Structurally identical to the JSONValue emitted by bindx-generator.
+ */
+export type JSONPrimitive = string | number | boolean | null
+export type JSONValue = JSONPrimitive | JSONObject | JSONArray
+export type JSONObject = { readonly [K in string]?: JSONValue }
+export type JSONArray = readonly JSONValue[]
+
 /**
  * Column types from Contember schema
  */
@@ -99,6 +113,8 @@ export interface FormInputProps<T> {
 	readonly formatValue?: (value: T | null) => string
 	/** Custom value parser */
 	readonly parseValue?: (value: string) => T | null
+	/** Handler override, takes precedence over the column-type handler */
+	readonly handler?: FormInputHandler
 }
 
 /**
diff --git a/packages/bindx-form/tests/formInputValidation.test.tsx b/packages/bindx-form/tests/formInputValidation.test.tsx
new file mode 100644
index 00000000..d04a9583
--- /dev/null
+++ b/packages/bindx-form/tests/formInputValidation.test.tsx
@@ -0,0 +1,147 @@
+import { describe, test, expect, afterEach } from 'bun:test'
+import { render, waitFor, cleanup, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { BindxProvider, useBindxContext } from '@contember/bindx-react'
+import { addFieldError, createServerError } from '@contember/bindx'
+import { FormError, FormFieldScope, FormInput } from '../src/index.js'
+import {
+	useEntity,
+	entityDefs,
+	schema,
+	getAllByTestId,
+	getByTestId,
+	queryByTestId,
+	createAdapter,
+} from './testUtils.js'
+
+afterEach(() => {
+	cleanup()
+})
+
+function TestForm(): React.ReactElement {
+	const { dispatcher } = useBindxContext()
+	const article = useEntity(entityDefs.Article, { by: { id: 'article-1' } }, e => e.title())
+
+	if (article.$isLoading) return <div>Loading...</div>
+	if (article.$isError) return <div>Error</div>
+
+	return (
+		<div>
+			<FormFieldScope field={article.title} required={true}>
+				<FormInput field={article.title}>
+					<input data-testid="input" />
+				</FormInput>
+				<FormError formatter={errors => errors.map(error => error.message)}>
+					<span data-testid="error" />
+				</FormError>
+			</FormFieldScope>
+			<button
+				data-testid="add-server-error"
+				onClick={() => dispatcher.dispatch(addFieldError(
+					'Article',
+					'article-1',
+					'title',
+					createServerError('Title is already taken', 'UniqueConstraintViolation'),
+				))}
+			>
+				Add server error
+			</button>
+			<button
+				data-testid="add-client-error"
+				onClick={() => article.title.addError({ message: 'Invalid JSON', code: 'json-parse' })}
+			>
+				Add client error
+			</button>
+		</div>
+	)
+}
+
+async function renderForm(): Promise<{ input: HTMLInputElement; container: Element }> {
+	const { container } = render(
+		<BindxProvider adapter={createAdapter()} schema={schema}>
+			<TestForm />
+		</BindxProvider>,
+	)
+	await waitFor(() => {
+		expect(queryByTestId(container, 'input')).not.toBeNull()
+	})
+	const input = getByTestId(container, 'input')
+	if (!(input instanceof HTMLInputElement)) {
+		throw new Error('Rendered element is not an input')
+	}
+	return { input, container }
+}
+
+function errorsOf(container: Element): string {
+	return getAllByTestId(container, 'error').map(element => element.textContent).join('|')
+}
+
+/** happy-dom computes validity but leaves validationMessage empty, so the message is set explicitly. */
+function makeInvalid(input: HTMLInputElement, message: string): void {
+	fireEvent.change(input, { target: { value: '' } })
+	input.setCustomValidity(message)
+}
+
+function makeValid(input: HTMLInputElement): void {
+	input.setCustomValidity('')
+	fireEvent.change(input, { target: { value: 'A valid title' } })
+}
+
+describe('useFormInputValidationHandler', () => {
+	test('keeps a server error on blur', async () => {
+		const { input, container } = await renderForm()
+
+		fireEvent.click(getByTestId(container, 'add-server-error'))
+		expect(errorsOf(container)).toBe('Title is already taken')
+
+		fireEvent.focus(input)
+		fireEvent.blur(input)
+
+		expect(errorsOf(container)).toBe('Title is already taken')
+	})
+
+	test('keeps a server error when the validity changes after blur', async () => {
+		const { input, container } = await renderForm()
+
+		makeInvalid(input, 'Title is required')
+		fireEvent.focus(input)
+		fireEvent.blur(input)
+		expect(errorsOf(container)).toBe('Title is required')
+
+		fireEvent.click(getByTestId(container, 'add-server-error'))
+		makeValid(input)
+
+		await waitFor(() => {
+			expect(errorsOf(container)).toBe('Title is already taken')
+		})
+	})
+
+	test('keeps a client error raised by other code on blur', async () => {
+		const { input, container } = await renderForm()
+
+		fireEvent.change(input, { target: { value: 'not json' } })
+		fireEvent.click(getByTestId(container, 'add-client-error'))
+		expect(errorsOf(container)).toBe('Invalid JSON')
+
+		fireEvent.focus(input)
+		fireEvent.blur(input)
+
+		expect(errorsOf(container)).toBe('Invalid JSON')
+	})
+
+	test('reports the HTML5 validation message on blur and clears it once valid', async () => {
+		const { input, container } = await renderForm()
+
+		makeInvalid(input, 'Title is required')
+		fireEvent.focus(input)
+		fireEvent.blur(input)
+
+		expect(errorsOf(container)).toBe('Title is required')
+
+		makeValid(input)
+
+		await waitFor(() => {
+			expect(errorsOf(container)).toBe('')
+		})
+	})
+})
diff --git a/packages/bindx-form/tests/jsonInput.test.tsx b/packages/bindx-form/tests/jsonInput.test.tsx
new file mode 100644
index 00000000..518e6936
--- /dev/null
+++ b/packages/bindx-form/tests/jsonInput.test.tsx
@@ -0,0 +1,278 @@
+import { describe, test, expect, afterEach } from 'bun:test'
+import { render, waitFor, act, cleanup, fireEvent } from '@testing-library/react'
+import React from 'react'
+import {
+	BindxProvider,
+	MockAdapter,
+	defineSchema,
+	entityDef,
+	scalar,
+	useEntity,
+	usePersist,
+} from '@contember/bindx-react'
+import {
+	FormFieldScope,
+	FormInput,
+	createJsonHandler,
+	type JsonHandlerOptions,
+	type JSONValue,
+} from '../src/index.js'
+import type { FieldError } from '@contember/bindx'
+import { getByTestId, queryByTestId } from './testUtils.js'
+
+afterEach(() => {
+	cleanup()
+})
+
+interface Settings {
+	id: string
+	name: string
+	payload: JSONValue | null
+}
+
+const settingsSchema = defineSchema<{ Settings: Settings }>({
+	entities: {
+		Settings: {
+			fields: {
+				id: scalar(),
+				name: scalar(),
+				payload: { type: 'scalar', columnType: 'Json' },
+			},
+		},
+	},
+})
+
+const settingsDef = entityDef<Settings>('Settings')
+
+/** Reads the field errors as the store holds them; the rendered span can lag behind. */
+let readFieldErrors: (() => readonly FieldError[]) | undefined
+
+interface JsonFormProps {
+	/** Omitted to let FormInput resolve the handler from the Json column type */
+	readonly handlerOptions?: JsonHandlerOptions
+}
+
+function JsonForm({ handlerOptions }: JsonFormProps): React.ReactNode {
+	const settings = useEntity(settingsDef, { by: { id: 'settings-1' } }, e => e.name().payload())
+	const { persist } = usePersist()
+	const [persistResult, setPersistResult] = React.useState('')
+	const handler = React.useMemo(
+		() => (handlerOptions === undefined ? undefined : createJsonHandler(handlerOptions)),
+		[handlerOptions],
+	)
+
+	if (settings.$isLoading) return <div>Loading...</div>
+	if (settings.$isError || settings.$isNotFound) return <div>Error</div>
+
+	readFieldErrors = () => settings.payload.errors
+
+	return (
+		<div>
+			<FormFieldScope field={settings.payload}>
+				<FormInput field={settings.payload} handler={handler}>
+					<textarea data-testid="input" />
+				</FormInput>
+			</FormFieldScope>
+			<span data-testid="value">{JSON.stringify(settings.payload.value)}</span>
+			<span data-testid="value-type">{typeof settings.payload.value}</span>
+			<span data-testid="errors">{settings.payload.errors.map(error => error.message).join('|')}</span>
+			<span data-testid="persist-result">{persistResult}</span>
+			<button
+				data-testid="persist"
+				onClick={() => {
+					void persist(settings.payload).then(result => setPersistResult(result.success ? 'saved' : 'blocked'))
+				}}
+			>
+				Persist
+			</button>
+		</div>
+	)
+}
+
+interface RenderedJsonForm {
+	readonly container: HTMLElement
+	readonly input: HTMLTextAreaElement
+	readonly store: Record<string, unknown>
+	readonly fieldErrors: () => readonly FieldError[]
+}
+
+async function renderJsonForm(
+	payload: JSONValue | null,
+	handlerOptions?: JsonHandlerOptions,
+): Promise<RenderedJsonForm> {
+	const store = { id: 'settings-1', name: 'Main', payload }
+	const adapter = new MockAdapter({ Settings: { 'settings-1': store } }, { delay: 0 })
+
+	const { container } = render(
+		<BindxProvider adapter={adapter} schema={settingsSchema}>
+			<JsonForm handlerOptions={handlerOptions} />
+		</BindxProvider>,
+	)
+
+	await waitFor(() => {
+		expect(queryByTestId(container, 'input')).not.toBeNull()
+	})
+
+	const input = getByTestId(container, 'input')
+	if (!(input instanceof HTMLTextAreaElement)) throw new Error('Expected a textarea')
+	return { container, input, store, fieldErrors: () => readFieldErrors?.() ?? [] }
+}
+
+function textOf(container: HTMLElement, testId: string): string {
+	return getByTestId(container, testId).textContent ?? ''
+}
+
+describe('Json form input', () => {
+	test('pretty-prints the stored value', async () => {
+		const { input } = await renderJsonForm({ theme: 'dark', tags: ['a', 'b'] }, {})
+
+		expect(input.value).toBe('{\n  "theme": "dark",\n  "tags": [\n    "a",\n    "b"\n  ]\n}')
+	})
+
+	test('writes parsed JSON to the accessor as a value, not a string', async () => {
+		const { container, input } = await renderJsonForm(null, {})
+
+		fireEvent.change(input, { target: { value: '{"theme":"light","count":2}' } })
+
+		expect(textOf(container, 'value')).toBe('{"theme":"light","count":2}')
+		expect(textOf(container, 'value-type')).toBe('object')
+		expect(textOf(container, 'errors')).toBe('')
+	})
+
+	test('resolves the handler from the Json column type', async () => {
+		const { container, input } = await renderJsonForm(null)
+
+		fireEvent.change(input, { target: { value: '{"theme":"light"}' } })
+
+		expect(textOf(container, 'value')).toBe('{"theme":"light"}')
+		expect(textOf(container, 'value-type')).toBe('object')
+	})
+
+	test('keeps the raw text instead of reformatting it while typing', async () => {
+		const { container, input } = await renderJsonForm(null, {})
+
+		fireEvent.change(input, { target: { value: '{"theme": ' } })
+		expect(getByTestId(container, 'input')).toHaveProperty('value', '{"theme": ')
+
+		fireEvent.change(input, { target: { value: '{"theme":"light"}' } })
+		expect(getByTestId(container, 'input')).toHaveProperty('value', '{"theme":"light"}')
+	})
+
+	test('shows an error and keeps the previous value when the JSON does not parse', async () => {
+		const { container, input } = await renderJsonForm({ theme: 'dark' }, {})
+
+		fireEvent.change(input, { target: { value: '{"theme":' } })
+
+		expect(textOf(container, 'errors')).toContain('Invalid JSON')
+		expect(textOf(container, 'value')).toBe('{"theme":"dark"}')
+		expect(input.hasAttribute('data-invalid')).toBe(true)
+	})
+
+	test('keeps the parse error after the input loses focus', async () => {
+		const { container, input } = await renderJsonForm({ theme: 'dark' }, {})
+
+		fireEvent.change(input, { target: { value: '{"theme":' } })
+		fireEvent.blur(input)
+
+		expect(textOf(container, 'errors')).toContain('Invalid JSON')
+	})
+
+	test('does not stack another copy of the error on every blur', async () => {
+		const { input, fieldErrors } = await renderJsonForm({ theme: 'dark' }, {})
+
+		fireEvent.change(input, { target: { value: '{"theme":' } })
+		fireEvent.blur(input)
+		fireEvent.blur(input)
+
+		expect(fieldErrors()).toHaveLength(1)
+	})
+
+	test('clears the error once the text parses again', async () => {
+		const { container, input } = await renderJsonForm({ theme: 'dark' }, {})
+
+		fireEvent.change(input, { target: { value: '{"theme":' } })
+		expect(textOf(container, 'errors')).toContain('Invalid JSON')
+
+		fireEvent.change(input, { target: { value: '{"theme":"light"}' } })
+
+		expect(textOf(container, 'errors')).toBe('')
+		expect(textOf(container, 'value')).toBe('{"theme":"light"}')
+		expect(input.hasAttribute('data-invalid')).toBe(false)
+	})
+
+	test('blocks persist while the JSON does not parse', async () => {
+		const { container, input, store } = await renderJsonForm({ theme: 'dark' }, {})
+
+		fireEvent.change(input, { target: { value: '{"theme":"light"}' } })
+		fireEvent.change(input, { target: { value: '{"theme":' } })
+
+		await act(async () => {
+			getByTestId(container, 'persist').dispatchEvent(new MouseEvent('click', { bubbles: true }))
+			await new Promise(resolve => setTimeout(resolve, 50))
+		})
+
+		expect(textOf(container, 'persist-result')).toBe('blocked')
+		expect(store['payload']).toEqual({ theme: 'dark' })
+
+		fireEvent.change(input, { target: { value: '{"theme":"light"}' } })
+
+		await act(async () => {
+			getByTestId(container, 'persist').dispatchEvent(new MouseEvent('click', { bubbles: true }))
+			await new Promise(resolve => setTimeout(resolve, 50))
+		})
+
+		expect(textOf(container, 'persist-result')).toBe('saved')
+		expect(store['payload']).toEqual({ theme: 'light' })
+	})
+
+	test('writes the default empty value for an empty input', async () => {
+		const { container, input } = await renderJsonForm({ theme: 'dark' }, {})
+
+		fireEvent.change(input, { target: { value: '   ' } })
+
+		expect(textOf(container, 'value')).toBe('null')
+		expect(textOf(container, 'errors')).toBe('')
+	})
+
+	test('writes a custom empty value for an empty input', async () => {
+		const { container, input } = await renderJsonForm({ theme: 'dark' }, { emptyValue: {} })
+
+		fireEvent.change(input, { target: { value: '' } })
+
+		expect(textOf(container, 'value')).toBe('{}')
+	})
+
+	test('reports a validate failure as a field error', async () => {
+		const isObject = (value: JSONValue): boolean => typeof value === 'object' && value !== null && !Array.isArray(value)
+		const { container, input } = await renderJsonForm(null, {
+			validate: value => (isObject(value) ? null : 'Expected an object'),
+		})
+
+		fireEvent.change(input, { target: { value: '42' } })
+		expect(textOf(container, 'errors')).toBe('Expected an object')
+		expect(textOf(container, 'value')).toBe('42')
+
+		fireEvent.change(input, { target: { value: '{"a":1}' } })
+		expect(textOf(container, 'errors')).toBe('')
+	})
+
+	test('pretty-prints on blur when formatOnBlur is set', async () => {
+		const { container, input } = await renderJsonForm(null, { formatOnBlur: true })
+
+		fireEvent.change(input, { target: { value: '{"a":1}' } })
+		expect(getByTestId(container, 'input')).toHaveProperty('value', '{"a":1}')
+
+		fireEvent.blur(input)
+
+		expect(getByTestId(container, 'input')).toHaveProperty('value', '{\n  "a": 1\n}')
+	})
+
+	test('leaves the raw input alone on blur without formatOnBlur', async () => {
+		const { container, input } = await renderJsonForm(null, {})
+
+		fireEvent.change(input, { target: { value: '{"a":1}' } })
+		fireEvent.blur(input)
+
+		expect(getByTestId(container, 'input')).toHaveProperty('value', '{"a":1}')
+	})
+})
diff --git a/packages/bindx-ui/src/datagrid/column-header.tsx b/packages/bindx-ui/src/datagrid/column-header.tsx
index bdc49fd2..3975ffa8 100644
--- a/packages/bindx-ui/src/datagrid/column-header.tsx
+++ b/packages/bindx-ui/src/datagrid/column-header.tsx
@@ -24,9 +24,10 @@ export interface DataGridColumnHeaderUIProps {
 	className?: string
 }
 
-function DataGridColumnFilterIcon({ filterName }: { filterName: string }): ReactElement | null {
+// Muted when idle so a filterable column advertises itself; blue keeps an active filter distinct.
+function DataGridColumnFilterIcon({ filterName }: { filterName: string }): ReactElement {
 	const [, , { isEmpty }] = useDataViewFilter(filterName)
-	return isEmpty ? null : <FilterIcon className="h-4 w-4 text-blue-600" />
+	return <FilterIcon className={cn('h-4 w-4', isEmpty ? 'text-muted-foreground/50' : 'text-blue-600')} />
 }
 
 export function DataGridColumnHeaderUI({
diff --git a/packages/bindx-ui/src/datagrid/grid.tsx b/packages/bindx-ui/src/datagrid/grid.tsx
index efe26eb7..b1525c39 100644
--- a/packages/bindx-ui/src/datagrid/grid.tsx
+++ b/packages/bindx-ui/src/datagrid/grid.tsx
@@ -6,6 +6,8 @@
 export { DefaultDataGrid, type DefaultDataGridProps, DefaultHasManyDataGrid, type DefaultHasManyDataGridProps } from '#bindx-ui/datagrid/datagrid'
 export { DefaultDataGridLayout, type DefaultDataGridLayoutProps } from '#bindx-ui/datagrid/layout'
 export { DataGridToolbarUI, type DataGridToolbarUIProps } from '#bindx-ui/datagrid/toolbar'
+// Custom toolbars need this to keep the mobile filters toggle working
+export { DataGridShowFiltersContext } from '#bindx-ui/datagrid/filters/mobile'
 export { DataGridPaginationUI, type DataGridPaginationUIProps, DataGridPerPageSelector } from '#bindx-ui/datagrid/pagination'
 export { DataGridColumnHeaderUI, type DataGridColumnHeaderUIProps } from '#bindx-ui/datagrid/column-header'
 export {
diff --git a/packages/bindx-ui/src/datagrid/toolbar.tsx b/packages/bindx-ui/src/datagrid/toolbar.tsx
index bcea3760..72cf9190 100644
--- a/packages/bindx-ui/src/datagrid/toolbar.tsx
+++ b/packages/bindx-ui/src/datagrid/toolbar.tsx
@@ -27,9 +27,11 @@ export interface DataGridToolbarUIProps {
 	children?: ReactNode
 	className?: string
 	sticky?: boolean
+	/** Export control. Default: `<DataGridAutoExport />`. Pass null to hide it. */
+	exportControl?: ReactNode | null
 }
 
-export function DataGridToolbarUI({ children, className, sticky }: DataGridToolbarUIProps): ReactElement {
+export function DataGridToolbarUI({ children, className, sticky, exportControl }: DataGridToolbarUIProps): ReactElement {
 	const [showFilters, setShowFilters] = useState(false)
 
 	return (
@@ -61,7 +63,7 @@ export function DataGridToolbarUI({ children, className, sticky }: DataGridToolb
 						</PopoverContent>
 					</Popover>
 
-					<DataGridAutoExport />
+					{exportControl === undefined ? <DataGridAutoExport /> : exportControl}
 					<DataViewReloadTrigger>
 						<Button variant="outline" size="sm" className="group gap-2">
 							<RefreshCcwIcon className="w-4 h-4 group-data-[state=refreshing]:animate-spin" />
diff --git a/packages/bindx-ui/src/datagrid/ui/label-ui.tsx b/packages/bindx-ui/src/datagrid/ui/label-ui.tsx
index 14f5f1f0..ab2a0385 100644
--- a/packages/bindx-ui/src/datagrid/ui/label-ui.tsx
+++ b/packages/bindx-ui/src/datagrid/ui/label-ui.tsx
@@ -1,5 +1,7 @@
 import { uic } from '../../utils/uic.js'
 
+// Focusable so the filter affordance and its tooltip are reachable without a mouse.
 export const DataGridTooltipLabel = uic('span', {
-	baseClass: 'cursor-pointer underline decoration-dashed decoration-gray-400 underline-offset-4 hover:decoration-gray-800',
+	defaultProps: { tabIndex: 0 },
+	baseClass: 'cursor-pointer underline decoration-dashed decoration-transparent underline-offset-4 transition-colors hover:decoration-gray-400 focus-visible:decoration-gray-800 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring rounded-xs',
 })
diff --git a/packages/bindx-ui/src/form/index.ts b/packages/bindx-ui/src/form/index.ts
index 9f19d43d..b22502d4 100644
--- a/packages/bindx-ui/src/form/index.ts
+++ b/packages/bindx-ui/src/form/index.ts
@@ -1,6 +1,7 @@
 export { FormContainer, type FormContainerProps } from '#bindx-ui/form/container'
 export { InputField, type InputFieldProps } from '#bindx-ui/form/input-field'
 export { TextareaField, type TextareaFieldProps } from '#bindx-ui/form/textarea-field'
+export { JsonField, type JsonFieldProps } from '#bindx-ui/form/json-field'
 export { CheckboxField, type CheckboxFieldProps } from '#bindx-ui/form/checkbox-field'
 export { RadioEnumField, type RadioEnumFieldProps } from '#bindx-ui/form/radio-enum-field'
 export { SelectEnumField, type SelectEnumFieldProps } from '#bindx-ui/form/select-enum-field'
diff --git a/packages/bindx-ui/src/form/json-field.tsx b/packages/bindx-ui/src/form/json-field.tsx
new file mode 100644
index 00000000..fa1a8d04
--- /dev/null
+++ b/packages/bindx-ui/src/form/json-field.tsx
@@ -0,0 +1,48 @@
+import { useMemo, type ComponentProps, type ReactNode } from 'react'
+import { TextareaAutosize } from '#bindx-ui/ui/textarea'
+import {
+	FormFieldScope,
+	FormInput,
+	createJsonHandler,
+	type JSONValue,
+} from '@contember/bindx-form'
+import type { FieldRef } from '@contember/bindx'
+import { FormContainer, type FormContainerProps } from '#bindx-ui/form/container'
+
+export interface JsonFieldProps extends Omit<FormContainerProps, 'children'> {
+	readonly field: FieldRef<JSONValue | null>
+	readonly required?: boolean
+	readonly inputProps?: ComponentProps<typeof TextareaAutosize>
+	/** Value written when the textarea is empty. Default `null`. */
+	readonly emptyValue?: JSONValue | null
+	/** Shape validation beyond JSON syntax. Returns an error message or null. */
+	readonly validate?: (value: JSONValue) => string | null
+	/** Pretty-print the input when the textarea loses focus. Default false. */
+	readonly formatOnBlur?: boolean
+}
+
+export const JsonField = ({
+	field,
+	label,
+	description,
+	inputProps,
+	required,
+	emptyValue = null,
+	validate,
+	formatOnBlur,
+}: JsonFieldProps): ReactNode => {
+	const handler = useMemo(
+		() => createJsonHandler({ emptyValue, validate, formatOnBlur }),
+		[emptyValue, validate, formatOnBlur],
+	)
+
+	return (
+		<FormFieldScope field={field}>
+			<FormContainer description={description} label={label} required={required}>
+				<FormInput field={field} handler={handler}>
+					<TextareaAutosize required={required} {...(inputProps ?? {})} />
+				</FormInput>
+			</FormContainer>
+		</FormFieldScope>
+	)
+}
diff --git a/packages/bindx-ui/src/index.ts b/packages/bindx-ui/src/index.ts
index c4344878..f18279d9 100644
--- a/packages/bindx-ui/src/index.ts
+++ b/packages/bindx-ui/src/index.ts
@@ -39,10 +39,12 @@ export {
 	type FormContainerProps,
 	InputField,
 	TextareaField,
+	JsonField,
 	CheckboxField,
 	RadioEnumField,
 	type InputFieldProps,
 	type TextareaFieldProps,
+	type JsonFieldProps,
 	type CheckboxFieldProps,
 	type RadioEnumFieldProps,
 	SelectEnumField,
diff --git a/packages/bindx-ui/src/ui/tooltip.tsx b/packages/bindx-ui/src/ui/tooltip.tsx
index 7e31eff3..fbad1018 100644
--- a/packages/bindx-ui/src/ui/tooltip.tsx
+++ b/packages/bindx-ui/src/ui/tooltip.tsx
@@ -27,6 +27,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(({
 			<div
 				className={cn(
 					'invisible opacity-0 group-hover/tooltip:visible group-hover/tooltip:opacity-100',
+					'group-focus-within/tooltip:visible group-focus-within/tooltip:opacity-100',
 					'transition-all duration-150 absolute z-50 left-1/2 -translate-x-1/2',
 					'rounded-md border border-gray-200 bg-white/90 backdrop-blur-sm shadow-md px-2 py-1.5',
 					'whitespace-nowrap',
diff --git a/packages/bindx-ui/tests/jsonField.test.tsx b/packages/bindx-ui/tests/jsonField.test.tsx
new file mode 100644
index 00000000..cacf4f9f
--- /dev/null
+++ b/packages/bindx-ui/tests/jsonField.test.tsx
@@ -0,0 +1,113 @@
+import '../../../tests/setup'
+import { describe, test, expect, afterEach } from 'bun:test'
+import { render, waitFor, cleanup, fireEvent } from '@testing-library/react'
+import React from 'react'
+import {
+	BindxProvider,
+	MockAdapter,
+	defineSchema,
+	entityDef,
+	scalar,
+	useEntity,
+} from '@contember/bindx-react'
+import type { JSONValue } from '@contember/bindx-form'
+import { JsonField } from '../src/form/json-field.js'
+
+afterEach(() => {
+	cleanup()
+})
+
+interface Settings {
+	id: string
+	name: string
+	payload: JSONValue | null
+}
+
+const settingsSchema = defineSchema<{ Settings: Settings }>({
+	entities: {
+		Settings: {
+			fields: {
+				id: scalar(),
+				name: scalar(),
+				payload: { type: 'scalar', columnType: 'Json' },
+			},
+		},
+	},
+})
+
+const settingsDef = entityDef<Settings>('Settings')
+
+function SettingsForm(): React.ReactNode {
+	const settings = useEntity(settingsDef, { by: { id: 'settings-1' } }, e => e.name().payload())
+
+	if (settings.$isLoading) return <div>Loading...</div>
+	if (settings.$isError || settings.$isNotFound) return <div>Error</div>
+
+	return (
+		<div>
+			<JsonField field={settings.payload} label="Payload" description="Raw JSON" />
+			<span data-testid="value">{JSON.stringify(settings.payload.value)}</span>
+		</div>
+	)
+}
+
+interface RenderedField {
+	readonly container: HTMLElement
+	readonly textarea: HTMLTextAreaElement
+}
+
+async function renderJsonField(payload: JSONValue | null): Promise<RenderedField> {
+	const adapter = new MockAdapter(
+		{ Settings: { 'settings-1': { id: 'settings-1', name: 'Main', payload } } },
+		{ delay: 0 },
+	)
+
+	const { container } = render(
+		<BindxProvider adapter={adapter} schema={settingsSchema}>
+			<SettingsForm />
+		</BindxProvider>,
+	)
+
+	await waitFor(() => {
+		expect(container.querySelector('textarea')).not.toBeNull()
+	})
+
+	const textarea = container.querySelector('textarea')
+	if (textarea === null) throw new Error('Expected a textarea')
+	return { container, textarea }
+}
+
+describe('JsonField', () => {
+	test('renders the label and the pretty-printed value', async () => {
+		const { container, textarea } = await renderJsonField({ theme: 'dark' })
+
+		expect(container.textContent).toContain('Payload')
+		expect(textarea.value).toBe('{\n  "theme": "dark"\n}')
+	})
+
+	test('round-trips edited JSON as a value', async () => {
+		const { container, textarea } = await renderJsonField({ theme: 'dark' })
+
+		fireEvent.change(textarea, { target: { value: '{"theme":"light"}' } })
+
+		expect(container.querySelector('[data-testid="value"]')?.textContent).toBe('{"theme":"light"}')
+	})
+
+	test('shows the parse error inline and keeps the previous value', async () => {
+		const { container, textarea } = await renderJsonField({ theme: 'dark' })
+
+		fireEvent.change(textarea, { target: { value: '{"theme":' } })
+
+		expect(container.textContent).toContain('Invalid JSON')
+		expect(container.querySelector('[data-testid="value"]')?.textContent).toBe('{"theme":"dark"}')
+		expect(textarea.hasAttribute('data-invalid')).toBe(true)
+	})
+
+	test('writes the empty value for an empty textarea', async () => {
+		const { container, textarea } = await renderJsonField({ theme: 'dark' })
+
+		fireEvent.change(textarea, { target: { value: '' } })
+
+		expect(container.querySelector('[data-testid="value"]')?.textContent).toBe('null')
+	})
+})
diff --git a/packages/bindx-uploader/src/components/MultiUploader.tsx b/packages/bindx-uploader/src/components/MultiUploader.tsx
index dd9e6b1e..7471f4fc 100644
--- a/packages/bindx-uploader/src/components/MultiUploader.tsx
+++ b/packages/bindx-uploader/src/components/MultiUploader.tsx
@@ -15,7 +15,7 @@ import { resolveAcceptingSingleType } from '../internal/utils/resolveAccept.js'
 import { executeExtractors } from '../internal/utils/executeExtractors.js'
 import { uploaderErrorHandler } from '../internal/utils/uploaderErrorHandler.js'
 
-export interface MultiUploaderProps<TEntity = Record<string, unknown>> {
+export interface MultiUploaderProps<TEntity = Record<string, unknown>> extends Partial<UploaderEvents> {
 	/**
 	 * The has-many relation to add uploaded files to.
 	 */
@@ -53,6 +53,7 @@ export function MultiUploader<TEntity extends Record<string, unknown>>({
 	field,
 	fileType,
 	children,
+	...events
 }: MultiUploaderProps<TEntity>): ReactNode {
 	const fieldAccessor = useHasMany(field)
 	// Map file ID -> entity ID
@@ -71,7 +72,7 @@ export function MultiUploader<TEntity extends Record<string, unknown>>({
 
 	// Create entity for file and track mapping
 	const useCreateRepeaterEntityEvents = useCallback(
-		(events: UploaderEvents): UploaderEvents => ({
+		(events: Partial<UploaderEvents>): Partial<UploaderEvents> => ({
 			...events,
 			onBeforeUpload: async event => {
 				if (!(await resolveAcceptingSingleType(event.file, fileType as FileType))) {
@@ -115,19 +116,10 @@ export function MultiUploader<TEntity extends Record<string, unknown>>({
 		[field, fileType, getEntityForFile],
 	)
 
-	const baseEvents: UploaderEvents = useMemo(
-		() => ({
-			onError: uploaderErrorHandler,
-			onStartUpload: () => {},
-			onBeforeUpload: async () => undefined,
-			onProgress: () => {},
-			onAfterUpload: async () => {},
-			onSuccess: () => {},
-		}),
-		[],
-	)
-
-	const fillEntityEvents = useCreateRepeaterEntityEvents(baseEvents)
+	const fillEntityEvents = useCreateRepeaterEntityEvents({
+		...events,
+		onError: events.onError ?? uploaderErrorHandler,
+	})
 	const { files, ...stateEvents } = useUploadState(fillEntityEvents)
 	const onDrop = useUploaderDoUpload(stateEvents)
 
diff --git a/packages/bindx-uploader/src/components/Uploader.tsx b/packages/bindx-uploader/src/components/Uploader.tsx
index a7842878..c4296f1a 100644
--- a/packages/bindx-uploader/src/components/Uploader.tsx
+++ b/packages/bindx-uploader/src/components/Uploader.tsx
@@ -1,8 +1,8 @@
 import { useMemo, type ReactNode } from 'react'
-import type { EntityRef, HasOneRef, SelectionFieldMeta, SelectionMeta } from '@contember/bindx'
+import type { SelectionFieldMeta, SelectionMeta } from '@contember/bindx'
 import { FIELD_REF_META } from '@contember/bindx'
 import { BINDX_COMPONENT, type SelectionProvider, createEmptySelection } from '@contember/bindx-react'
-import type { FileType } from '../types.js'
+import type { FileType, PrepareUploadTarget, UploaderEvents, UploaderFillTarget } from '../types.js'
 import {
 	UploaderOptionsContext,
 	UploaderStateContext,
@@ -13,25 +13,30 @@ import { useUploaderDoUpload } from '../internal/hooks/useUploaderDoUpload.js'
 import { useFillEntity } from '../internal/hooks/useFillEntity.js'
 import { uploaderErrorHandler } from '../internal/utils/uploaderErrorHandler.js'
 
-export interface UploaderProps<TEntity = Record<string, unknown>> {
+export interface UploaderProps<TEntity = Record<string, unknown>> extends Partial<UploaderEvents> {
 	/**
 	 * The entity to fill with uploaded file data.
 	 * Can be an EntityRef or HasOneRef.
 	 */
-	entity: EntityRef<TEntity> | HasOneRef<TEntity>
+	entity: UploaderFillTarget<TEntity>
 	/**
 	 * File type configuration defining accepted files and extractors.
 	 * Must be created with the same entity type as the entity prop.
 	 */
 	fileType: FileType<TEntity>
+	/**
+	 * Resolves the target of an upload batch: it runs once, after the files pass the accept
+	 * check and before the uploader disconnects or fills anything, and receives the accepted
+	 * files. A rejected batch never reaches it. Return another target to fork first
+	 * (copy-on-write); returning nothing keeps the entity prop.
+	 */
+	prepareTarget?: PrepareUploadTarget<UploaderFillTarget<TEntity>>
 	/**
 	 * Children to render within the uploader context.
 	 */
 	children?: ReactNode
 }
 
-const noop = (): Promise<undefined> => Promise.resolve(undefined)
-
 /**
  * Single file upload component for bindx.
  * Provides upload state and upload function to children via context.
@@ -63,25 +68,39 @@ const noop = (): Promise<undefined> => Promise.resolve(undefined)
  *   </UploaderEachFile>
  * </Uploader>
  * ```
+ *
+ * @example Copy-on-write: fork a shared asset so the upload lands on a fresh one
+ * ```tsx
+ * <Uploader
+ *   entity={block.asset.image}
+ *   fileType={imageFileType}
+ *   prepareTarget={() => {
+ *     block.asset.$disconnect()
+ *     block.asset.$create()
+ *     return block.asset.image
+ *   }}
+ * >
+ *   <DropZone />
+ * </Uploader>
+ * ```
  */
 export function Uploader<TEntity extends Record<string, unknown>>({
 	entity,
 	fileType,
+	prepareTarget,
 	children,
+	...events
 }: UploaderProps<TEntity>): ReactNode {
-	const fillEntityEvents = useFillEntity({
+	const { prepareUpload, ...fillEntityEvents } = useFillEntity({
 		entity,
 		fileType,
-		onError: uploaderErrorHandler,
-		onStartUpload: noop,
-		onBeforeUpload: noop,
-		onProgress: noop,
-		onAfterUpload: noop,
-		onSuccess: noop,
+		prepareTarget,
+		...events,
+		onError: events.onError ?? uploaderErrorHandler,
 	})
 
 	const { files, ...stateEvents } = useUploadState(fillEntityEvents)
-	const onDrop = useUploaderDoUpload(stateEvents)
+	const onDrop = useUploaderDoUpload({ ...stateEvents, onPrepareUpload: prepareUpload })
 
 	const options = useMemo(
 		() => ({
diff --git a/packages/bindx-uploader/src/index.ts b/packages/bindx-uploader/src/index.ts
index e3bf59f3..d61a4fa0 100644
--- a/packages/bindx-uploader/src/index.ts
+++ b/packages/bindx-uploader/src/index.ts
@@ -23,6 +23,9 @@ export type {
 	AfterUploadEvent,
 	ErrorEvent,
 	UploaderEvents,
+	// Upload target
+	UploaderFillTarget,
+	PrepareUploadTarget,
 	// Extractors
 	FileDataExtractor,
 	FileDataExtractorPopulator,
diff --git a/packages/bindx-uploader/src/internal/hooks/index.ts b/packages/bindx-uploader/src/internal/hooks/index.ts
index 221c60ec..88f1ed57 100644
--- a/packages/bindx-uploader/src/internal/hooks/index.ts
+++ b/packages/bindx-uploader/src/internal/hooks/index.ts
@@ -1,4 +1,4 @@
 export { useUploadState, type UseUploadStateResult } from './useUploadState.js'
-export { useUploaderDoUpload } from './useUploaderDoUpload.js'
+export { useUploaderDoUpload, type UseUploaderDoUploadArgs } from './useUploaderDoUpload.js'
 export { useGetPreviewUrls } from './useGetPreviewUrls.js'
-export { useFillEntity, type UseFillEntityArgs } from './useFillEntity.js'
+export { useFillEntity, type UseFillEntityArgs, type UseFillEntityResult } from './useFillEntity.js'
diff --git a/packages/bindx-uploader/src/internal/hooks/useFillEntity.ts b/packages/bindx-uploader/src/internal/hooks/useFillEntity.ts
index 3f6f0422..265c52d9 100644
--- a/packages/bindx-uploader/src/internal/hooks/useFillEntity.ts
+++ b/packages/bindx-uploader/src/internal/hooks/useFillEntity.ts
@@ -1,23 +1,33 @@
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import type { EntityRef, HasOneAccessor } from '@contember/bindx'
-import type { FileType, StartUploadEvent, UploaderEvents } from '../../types.js'
+import type { FileType, PrepareUploadTarget, StartUploadEvent, UploaderEvents } from '../../types.js'
 import { resolveAcceptingSingleType } from '../utils/resolveAccept.js'
 import { executeExtractors } from '../utils/executeExtractors.js'
 
-export interface UseFillEntityArgs<TEntity = Record<string, unknown>> extends UploaderEvents {
+type FillTarget<TEntity> = EntityRef<TEntity> | HasOneAccessor<TEntity>
+
+export interface UseFillEntityArgs<TEntity = Record<string, unknown>> extends Partial<UploaderEvents> {
 	/**
 	 * The entity to fill. Can be:
 	 * - EntityRef: fill the entity directly
 	 * - HasOneAccessor: fill the related entity (disconnect first on upload start)
 	 */
-	entity: EntityRef<TEntity> | HasOneAccessor<TEntity>
+	entity: FillTarget<TEntity>
 	fileType: FileType<TEntity>
+	/**
+	 * Resolves the target of a validated batch, before the upload disconnects or fills anything.
+	 */
+	prepareTarget?: PrepareUploadTarget<FillTarget<TEntity>>
+}
+
+export interface UseFillEntityResult extends Partial<UploaderEvents> {
+	prepareUpload: (files: File[]) => Promise<void>
 }
 
 /**
  * Checks if the entity is a HasOneRef (has $disconnect method)
  */
-const isHasOneAccessor = <TEntity>(entity: EntityRef<TEntity> | HasOneAccessor<TEntity>): entity is HasOneAccessor<TEntity> => {
+const isHasOneAccessor = <TEntity>(entity: FillTarget<TEntity>): entity is HasOneAccessor<TEntity> => {
 	return '$disconnect' in entity && typeof entity.$disconnect === 'function'
 }
 
@@ -25,7 +35,7 @@ const isHasOneAccessor = <TEntity>(entity: EntityRef<TEntity> | HasOneAccessor<T
  * Gets the target entity for filling.
  * For HasOneAccessor, returns the related entity. For EntityRef, returns the entity itself.
  */
-const getTargetEntity = <TEntity>(entity: EntityRef<TEntity> | HasOneAccessor<TEntity>): EntityRef<TEntity> => {
+const getTargetEntity = <TEntity>(entity: FillTarget<TEntity>): EntityRef<TEntity> => {
 	if (isHasOneAccessor(entity)) {
 		return entity.$entity
 	}
@@ -39,8 +49,20 @@ const getTargetEntity = <TEntity>(entity: EntityRef<TEntity> | HasOneAccessor<TE
 export const useFillEntity = <TEntity extends Record<string, unknown>>({
 	entity,
 	fileType,
+	prepareTarget,
 	...events
-}: UseFillEntityArgs<TEntity>): UploaderEvents => {
+}: UseFillEntityArgs<TEntity>): UseFillEntityResult => {
+	const preparedTargetRef = useRef<FillTarget<TEntity> | undefined>(undefined)
+
+	const prepareUpload = useCallback(
+		async (files: File[]): Promise<void> => {
+			preparedTargetRef.current = await prepareTarget?.(files)
+		},
+		[prepareTarget],
+	)
+
+	const getTarget = useCallback((): FillTarget<TEntity> => preparedTargetRef.current ?? entity, [entity])
+
 	const handleBeforeUpload = useCallback(
 		async (event: Parameters<UploaderEvents['onBeforeUpload']>[0]): Promise<FileType | undefined> => {
 			if (!(await resolveAcceptingSingleType(event.file, fileType as FileType))) {
@@ -54,19 +76,20 @@ export const useFillEntity = <TEntity extends Record<string, unknown>>({
 	const handleStartUpload = useCallback(
 		(event: StartUploadEvent) => {
 			// Disconnect existing relation before upload
-			if (isHasOneAccessor(entity)) {
-				entity.$disconnect()
+			const target = getTarget()
+			if (isHasOneAccessor(target)) {
+				target.$disconnect()
 			}
 			events.onStartUpload?.(event)
 		},
-		[entity, events],
+		[events, getTarget],
 	)
 
 	const handleAfterUpload = useCallback(
 		async (event: Parameters<UploaderEvents['onAfterUpload']>[0]) => {
 			await Promise.all([
 				(async () => {
-					const targetEntity = getTargetEntity(entity)
+					const targetEntity = getTargetEntity(getTarget())
 					const extractionResult = await executeExtractors({
 						fileType: fileType as FileType,
 						result: event.result,
@@ -77,11 +100,12 @@ export const useFillEntity = <TEntity extends Record<string, unknown>>({
 				events.onAfterUpload?.(event),
 			])
 		},
-		[entity, events, fileType],
+		[events, fileType, getTarget],
 	)
 
 	return {
 		...events,
+		prepareUpload,
 		onBeforeUpload: handleBeforeUpload,
 		onStartUpload: handleStartUpload,
 		onAfterUpload: handleAfterUpload,
diff --git a/packages/bindx-uploader/src/internal/hooks/useUploadState.ts b/packages/bindx-uploader/src/internal/hooks/useUploadState.ts
index 5f24a4eb..dcdaeea2 100644
--- a/packages/bindx-uploader/src/internal/hooks/useUploadState.ts
+++ b/packages/bindx-uploader/src/internal/hooks/useUploadState.ts
@@ -28,7 +28,7 @@ export const useUploadState = ({
 	onError,
 	onProgress,
 	onAfterUpload,
-}: UploaderEvents): UseUploadStateResult => {
+}: Partial<UploaderEvents>): UseUploadStateResult => {
 	const [files, setFiles] = useState<Record<string, UploaderFileState>>({})
 
 	const purgeFinal = useCallback(() => {
diff --git a/packages/bindx-uploader/src/internal/hooks/useUploaderDoUpload.ts b/packages/bindx-uploader/src/internal/hooks/useUploaderDoUpload.ts
index 19c5794c..5f8abca0 100644
--- a/packages/bindx-uploader/src/internal/hooks/useUploaderDoUpload.ts
+++ b/packages/bindx-uploader/src/internal/hooks/useUploaderDoUpload.ts
@@ -4,6 +4,14 @@ import { UploaderError } from '../../UploaderError.js'
 import { useUploaderClient } from '../../contexts.js'
 import { useGetPreviewUrls } from './useGetPreviewUrls.js'
 
+export interface UseUploaderDoUploadArgs extends Partial<UploaderEvents> {
+	/**
+	 * Runs once per batch with the files that passed validation, before any of them is
+	 * uploaded or written to the target. Skipped when no file passed.
+	 */
+	onPrepareUpload?: (files: File[]) => Promise<void> | void
+}
+
 /**
  * Hook that orchestrates the file upload process.
  * Handles file preparation, validation, and upload execution.
@@ -15,7 +23,8 @@ export const useUploaderDoUpload = ({
 	onSuccess,
 	onStartUpload,
 	onAfterUpload,
-}: UploaderEvents): ((files: File[]) => Promise<void>) => {
+	onPrepareUpload,
+}: UseUploaderDoUploadArgs): ((files: File[]) => Promise<void>) => {
 	const getPreviewUrl = useGetPreviewUrls()
 	const defaultUploader = useUploaderClient()
 
@@ -73,6 +82,19 @@ export const useUploaderDoUpload = ({
 				)
 				.map(p => p.value)
 
+			if (preparedFiles.length === 0) {
+				return
+			}
+
+			try {
+				await onPrepareUpload?.(preparedFiles.map(({ file }) => file.file))
+			} catch (error) {
+				for (const { file } of preparedFiles) {
+					onError?.({ file, error })
+				}
+				return
+			}
+
 			// Upload files
 			await Promise.allSettled(
 				preparedFiles.map(async ({ file, fileType }) => {
@@ -121,6 +143,7 @@ export const useUploaderDoUpload = ({
 			onAfterUpload,
 			onBeforeUpload,
 			onError,
+			onPrepareUpload,
 			onProgress,
 			onStartUpload,
 			onSuccess,
diff --git a/packages/bindx-uploader/src/types.ts b/packages/bindx-uploader/src/types.ts
index baab5cfe..7438506f 100644
--- a/packages/bindx-uploader/src/types.ts
+++ b/packages/bindx-uploader/src/types.ts
@@ -120,6 +120,17 @@ export interface ErrorEvent {
 	fileType?: FileType
 }
 
+/**
+ * Fill target of a single-file uploader: an entity, or a has-one relation pointing at one.
+ */
+export type UploaderFillTarget<TEntity = Record<string, unknown>> = EntityRef<TEntity> | HasOneRef<TEntity>
+
+/**
+ * Resolves the target of an upload batch after the files pass validation and before
+ * the target is written. Returning nothing keeps the target the uploader was given.
+ */
+export type PrepareUploadTarget<TTarget> = (files: File[]) => TTarget | undefined | Promise<TTarget | undefined>
+
 export interface UploaderEvents {
 	onBeforeUpload: (event: BeforeUploadEvent) => Promise<FileType | undefined>
 	onStartUpload: (event: StartUploadEvent) => void
diff --git a/packages/bindx-uploader/tests/uploader.test.tsx b/packages/bindx-uploader/tests/uploader.test.tsx
new file mode 100644
index 00000000..94954c20
--- /dev/null
+++ b/packages/bindx-uploader/tests/uploader.test.tsx
@@ -0,0 +1,518 @@
+import './setup'
+import { describe, test, expect, afterEach, mock } from 'bun:test'
+import { render, cleanup, waitFor, fireEvent, act } from '@testing-library/react'
+import React, { type ReactNode } from 'react'
+import {
+	BindxProvider,
+	MockAdapter,
+	defineSchema,
+	entityDef,
+	hasMany,
+	hasOne,
+	scalar,
+	useEntity,
+} from '@contember/bindx-react'
+import {
+	MultiUploader,
+	Uploader,
+	UploaderClientContext,
+	UploaderError,
+	getFileUrlDataExtractor,
+	useUploaderUploadFiles,
+	type ErrorEvent,
+	type FileType,
+	type UploadClient,
+} from '../src/index.js'
+
+afterEach(() => {
+	cleanup()
+})
+
+type Image = {
+	id: string
+	url: string | null
+}
+
+type Asset = {
+	id: string
+	title: string
+	image: Image | null
+}
+
+type Block = {
+	id: string
+	asset: Asset | null
+	gallery: Image[]
+}
+
+interface MediaSchema {
+	Block: Block
+	Asset: Asset
+	Image: Image
+}
+
+const mediaSchema = defineSchema<MediaSchema>({
+	entities: {
+		Block: {
+			fields: {
+				id: scalar(),
+				asset: hasOne('Asset', { nullable: true }),
+				gallery: hasMany('Image'),
+			},
+		},
+		Asset: {
+			fields: {
+				id: scalar(),
+				title: scalar(),
+				image: hasOne('Image', { nullable: true }),
+			},
+		},
+		Image: {
+			fields: {
+				id: scalar(),
+				url: scalar(),
+			},
+		},
+	},
+})
+
+const entityDefs = {
+	Block: entityDef<Block>('Block'),
+	Asset: entityDef<Asset>('Asset'),
+	Image: entityDef<Image>('Image'),
+} as const
+
+const ORIGINAL_URL = 'https://cdn.test/original.jpg'
+const UPLOADED_URL = 'https://cdn.test/uploaded.jpg'
+
+const createMediaData = (): Record<string, Record<string, unknown>> => ({
+	Block: {
+		'block-1': {
+			id: 'block-1',
+			asset: {
+				id: 'asset-1',
+				title: 'Shared asset',
+				image: { id: 'image-1', url: ORIGINAL_URL },
+			},
+			gallery: [],
+		},
+	},
+	Asset: {
+		'asset-1': {
+			id: 'asset-1',
+			title: 'Shared asset',
+			image: { id: 'image-1', url: ORIGINAL_URL },
+		},
+	},
+	Image: {
+		'image-1': { id: 'image-1', url: ORIGINAL_URL },
+	},
+})
+
+const imageFileType: FileType<Image> = {
+	extractors: [getFileUrlDataExtractor<Image>({ urlField: 'url' })],
+}
+
+const jpegOnlyFileType: FileType<Image> = {
+	accept: { 'image/jpeg': ['.jpg'] },
+	extractors: [getFileUrlDataExtractor<Image>({ urlField: 'url' })],
+}
+
+const uploadClient: UploadClient = {
+	upload: async () => ({ publicUrl: UPLOADED_URL }),
+}
+
+const createTestFile = (): File => new File(['binary'], 'photo.jpg', { type: 'image/jpeg' })
+
+const createTextFile = (): File => new File(['text'], 'notes.txt', { type: 'text/plain' })
+
+function getByTestId(container: Element, testId: string): Element {
+	const el = container.querySelector(`[data-testid="${testId}"]`)
+	if (!el) throw new Error(`Element with data-testid="${testId}" not found`)
+	return el
+}
+
+function UploadTrigger({ files }: { files: File[] }): ReactNode {
+	const uploadFiles = useUploaderUploadFiles()
+	return (
+		<button data-testid="upload" onClick={() => uploadFiles(files)}>
+			upload
+		</button>
+	)
+}
+
+/** Observes the shared asset through its own subscription, independently of the block. */
+function SharedAssetProbe(): ReactNode {
+	const asset = useEntity(entityDefs.Asset, { by: { id: 'asset-1' } }, e => e.id().title().image(i => i.id().url()))
+
+	if (asset.$isLoading || asset.$isError || asset.$isNotFound) {
+		return null
+	}
+
+	return (
+		<>
+			<span data-testid="shared-image-url">{asset.image.url.value ?? ''}</span>
+			<span data-testid="shared-image-id">{asset.image.$id}</span>
+		</>
+	)
+}
+
+interface ForkingUploaderProps {
+	fileType: FileType<Image>
+	files: File[]
+	onPrepare: () => void
+	onError?: (event: ErrorEvent) => void
+}
+
+/** Forks the shared asset in prepareTarget, so the upload must land on the fresh one. */
+function ForkingUploader({ fileType, files, onPrepare, onError }: ForkingUploaderProps): ReactNode {
+	const block = useEntity(entityDefs.Block, { by: { id: 'block-1' } }, e =>
+		e.id().asset(a => a.id().title().image(i => i.id().url())),
+	)
+
+	if (block.$isLoading || block.$isError || block.$isNotFound) {
+		return null
+	}
+
+	return (
+		<>
+			<Uploader
+				entity={block.asset.image}
+				fileType={fileType}
+				onError={onError}
+				prepareTarget={() => {
+					onPrepare()
+					block.asset.$disconnect()
+					block.asset.$create({ title: 'Forked asset' })
+					return block.asset.image
+				}}
+			>
+				<UploadTrigger files={files} />
+			</Uploader>
+			<span data-testid="block-image-url">{block.asset.image.url.value ?? ''}</span>
+			<span data-testid="block-image-id">{block.asset.image.$id}</span>
+			<span data-testid="block-asset-id">{block.asset.$id}</span>
+		</>
+	)
+}
+
+const uploadFile = async (container: Element): Promise<void> => {
+	await act(async () => {
+		fireEvent.click(getByTestId(container, 'upload'))
+	})
+}
+
+const renderMedia = async (children: ReactNode): Promise<{ container: Element }> => {
+	const adapter = new MockAdapter(createMediaData(), { delay: 0 })
+	const { container } = render(
+		<BindxProvider adapter={adapter} schema={mediaSchema}>
+			<UploaderClientContext.Provider value={uploadClient}>{children}</UploaderClientContext.Provider>
+		</BindxProvider>,
+	)
+
+	await waitFor(() => {
+		expect(container.querySelector('[data-testid="upload"]')).not.toBeNull()
+	})
+
+	return { container }
+}
+
+describe('Uploader events', () => {
+	test('a user onBeforeUpload can reject a file, and onError receives the rejection', async () => {
+		const onBeforeUpload = mock(async ({ reject }: { reject: (reason: string) => never }) => reject('file too large'))
+		const errors: ErrorEvent[] = []
+
+		function TestApp(): ReactNode {
+			const block = useEntity(entityDefs.Block, { by: { id: 'block-1' } }, e =>
+				e.id().asset(a => a.id().title().image(i => i.id().url())),
+			)
+
+			if (block.$isLoading || block.$isError || block.$isNotFound) {
+				return null
+			}
+
+			return (
+				<>
+					<Uploader
+						entity={block.asset.image}
+						fileType={imageFileType}
+						onBeforeUpload={onBeforeUpload}
+						onError={event => errors.push(event)}
+					>
+						<UploadTrigger files={[createTestFile()]} />
+					</Uploader>
+					<span data-testid="block-image-url">{block.asset.image.url.value ?? ''}</span>
+				</>
+			)
+		}
+
+		const { container } = await renderMedia(<TestApp />)
+		await uploadFile(container)
+
+		expect(onBeforeUpload).toHaveBeenCalledTimes(1)
+		expect(errors).toHaveLength(1)
+		expect(errors[0]?.error).toBeInstanceOf(UploaderError)
+		expect(getByTestId(container, 'block-image-url').textContent).toBe(ORIGINAL_URL)
+	})
+
+	test('user handlers compose with the internal fill instead of replacing it', async () => {
+		const calls: string[] = []
+
+		function TestApp(): ReactNode {
+			const block = useEntity(entityDefs.Block, { by: { id: 'block-1' } }, e =>
+				e.id().asset(a => a.id().title().image(i => i.id().url())),
+			)
+
+			if (block.$isLoading || block.$isError || block.$isNotFound) {
+				return null
+			}
+
+			return (
+				<>
+					<Uploader
+						entity={block.asset.image}
+						fileType={imageFileType}
+						onBeforeUpload={async () => {
+							calls.push('before')
+							return undefined
+						}}
+						onStartUpload={() => calls.push('start')}
+						onAfterUpload={() => {
+							calls.push('after')
+						}}
+						onSuccess={() => calls.push('success')}
+					>
+						<UploadTrigger files={[createTestFile()]} />
+					</Uploader>
+					<span data-testid="block-image-url">{block.asset.image.url.value ?? ''}</span>
+				</>
+			)
+		}
+
+		const { container } = await renderMedia(<TestApp />)
+		await uploadFile(container)
+
+		await waitFor(() => {
+			expect(getByTestId(container, 'block-image-url').textContent).toBe(UPLOADED_URL)
+		})
+		expect(calls).toEqual(['before', 'start', 'after', 'success'])
+	})
+
+	test('without event props the upload still fills the passed target', async () => {
+		function TestApp(): ReactNode {
+			const block = useEntity(entityDefs.Block, { by: { id: 'block-1' } }, e =>
+				e.id().asset(a => a.id().title().image(i => i.id().url())),
+			)
+
+			if (block.$isLoading || block.$isError || block.$isNotFound) {
+				return null
+			}
+
+			return (
+				<>
+					<Uploader entity={block.asset.image} fileType={imageFileType}>
+						<UploadTrigger files={[createTestFile()]} />
+					</Uploader>
+					<span data-testid="block-image-url">{block.asset.image.url.value ?? ''}</span>
+					<span data-testid="block-asset-id">{block.asset.$id}</span>
+				</>
+			)
+		}
+
+		const { container } = await renderMedia(<TestApp />)
+		await uploadFile(container)
+
+		await waitFor(() => {
+			expect(getByTestId(container, 'block-image-url').textContent).toBe(UPLOADED_URL)
+		})
+		expect(getByTestId(container, 'block-asset-id').textContent).toBe('asset-1')
+	})
+})
+
+describe('Uploader prepareTarget', () => {
+	test('fills the target returned by prepareTarget and leaves the original untouched', async () => {
+		function TestApp(): ReactNode {
+			const block = useEntity(entityDefs.Block, { by: { id: 'block-1' } }, e =>
+				e.id().asset(a => a.id().title().image(i => i.id().url())),
+			)
+
+			if (block.$isLoading || block.$isError || block.$isNotFound) {
+				return null
+			}
+
+			return (
+				<>
+					<Uploader
+						entity={block.asset.image}
+						fileType={imageFileType}
+						prepareTarget={() => {
+							block.asset.$disconnect()
+							block.asset.$create({ title: 'Forked asset' })
+							return block.asset.image
+						}}
+					>
+						<UploadTrigger files={[createTestFile()]} />
+					</Uploader>
+					<span data-testid="block-image-url">{block.asset.image.url.value ?? ''}</span>
+					<span data-testid="block-asset-id">{block.asset.$id}</span>
+					<span data-testid="block-asset-title">{block.asset.title.value ?? ''}</span>
+				</>
+			)
+		}
+
+		const { container } = await renderMedia(
+			<>
+				<TestApp />
+				<SharedAssetProbe />
+			</>,
+		)
+		await uploadFile(container)
+
+		await waitFor(() => {
+			expect(getByTestId(container, 'block-image-url').textContent).toBe(UPLOADED_URL)
+		})
+		expect(getByTestId(container, 'block-asset-title').textContent).toBe('Forked asset')
+		expect(getByTestId(container, 'block-asset-id').textContent).not.toBe('asset-1')
+
+		expect(getByTestId(container, 'shared-image-url').textContent).toBe(ORIGINAL_URL)
+		expect(getByTestId(container, 'shared-image-id').textContent).toBe('image-1')
+	})
+
+	test('prepareTarget runs after the accept check and before the target is written', async () => {
+		const order: string[] = []
+
+		function TestApp(): ReactNode {
+			const block = useEntity(entityDefs.Block, { by: { id: 'block-1' } }, e =>
+				e.id().asset(a => a.id().title().image(i => i.id().url())),
+			)
+
+			if (block.$isLoading || block.$isError || block.$isNotFound) {
+				return null
+			}
+
+			return (
+				<>
+					<Uploader
+						entity={block.asset.image}
+						fileType={imageFileType}
+						prepareTarget={async () => {
+							await Promise.resolve()
+							order.push('prepare')
+							return undefined
+						}}
+						onBeforeUpload={async () => {
+							order.push('before')
+							return undefined
+						}}
+						onStartUpload={() => order.push('start')}
+					>
+						<UploadTrigger files={[createTestFile()]} />
+					</Uploader>
+					<span data-testid="block-image-url">{block.asset.image.url.value ?? ''}</span>
+				</>
+			)
+		}
+
+		const { container } = await renderMedia(<TestApp />)
+		await uploadFile(container)
+
+		await waitFor(() => {
+			expect(getByTestId(container, 'block-image-url').textContent).toBe(UPLOADED_URL)
+		})
+		expect(order).toEqual(['before', 'prepare', 'start'])
+	})
+
+	test('a batch rejected by the accept check never forks the target', async () => {
+		const onPrepare = mock(() => {})
+		const errors: ErrorEvent[] = []
+
+		const { container } = await renderMedia(
+			<>
+				<ForkingUploader
+					fileType={jpegOnlyFileType}
+					files={[createTextFile()]}
+					onPrepare={onPrepare}
+					onError={event => errors.push(event)}
+				/>
+				<SharedAssetProbe />
+			</>,
+		)
+		await uploadFile(container)
+
+		expect(errors).toHaveLength(1)
+		expect(errors[0]?.error).toBeInstanceOf(UploaderError)
+		expect(onPrepare).toHaveBeenCalledTimes(0)
+		expect(getByTestId(container, 'block-asset-id').textContent).toBe('asset-1')
+		expect(getByTestId(container, 'block-image-id').textContent).toBe('image-1')
+		expect(getByTestId(container, 'block-image-url').textContent).toBe(ORIGINAL_URL)
+		expect(getByTestId(container, 'shared-image-url').textContent).toBe(ORIGINAL_URL)
+	})
+
+	test('a mixed batch forks once and lands the accepted file on the prepared target', async () => {
+		const onPrepare = mock(() => {})
+		const errors: ErrorEvent[] = []
+
+		const { container } = await renderMedia(
+			<>
+				<ForkingUploader
+					fileType={jpegOnlyFileType}
+					files={[createTestFile(), createTextFile()]}
+					onPrepare={onPrepare}
+					onError={event => errors.push(event)}
+				/>
+				<SharedAssetProbe />
+			</>,
+		)
+		await uploadFile(container)
+
+		await waitFor(() => {
+			expect(getByTestId(container, 'block-image-url').textContent).toBe(UPLOADED_URL)
+		})
+		expect(errors).toHaveLength(1)
+		expect(onPrepare).toHaveBeenCalledTimes(1)
+		expect(getByTestId(container, 'block-asset-id').textContent).not.toBe('asset-1')
+		expect(getByTestId(container, 'shared-image-url').textContent).toBe(ORIGINAL_URL)
+		expect(getByTestId(container, 'shared-image-id').textContent).toBe('image-1')
+	})
+})
+
+describe('MultiUploader events', () => {
+	test('forwards user handlers while still creating and filling an item', async () => {
+		const calls: string[] = []
+
+		function TestApp(): ReactNode {
+			const block = useEntity(entityDefs.Block, { by: { id: 'block-1' } }, e =>
+				e.id().gallery(g => g.id().url()),
+			)
+
+			if (block.$isLoading || block.$isError || block.$isNotFound) {
+				return null
+			}
+
+			return (
+				<>
+					<MultiUploader
+						field={block.gallery}
+						fileType={imageFileType}
+						onStartUpload={() => calls.push('start')}
+						onAfterUpload={() => {
+							calls.push('after')
+						}}
+						onSuccess={() => calls.push('success')}
+					>
+						<UploadTrigger files={[createTestFile()]} />
+					</MultiUploader>
+					<span data-testid="gallery-urls">{block.gallery.items.map(it => it.url.value ?? '').join(',')}</span>
+				</>
+			)
+		}
+
+		const { container } = await renderMedia(<TestApp />)
+		await uploadFile(container)
+
+		await waitFor(() => {
+			expect(getByTestId(container, 'gallery-urls').textContent).toBe(UPLOADED_URL)
+		})
+		expect(calls).toEqual(['start', 'after', 'success'])
+	})
+})
diff --git a/packages/bindx/src/core/ActionDispatcher.ts b/packages/bindx/src/core/ActionDispatcher.ts
index 83eeeddc..7945d6ce 100644
--- a/packages/bindx/src/core/ActionDispatcher.ts
+++ b/packages/bindx/src/core/ActionDispatcher.ts
@@ -407,7 +407,7 @@ export class ActionDispatcher {
 					action.entityType,
 					action.entityId,
 					action.fieldName,
-					action.source,
+					action.filter,
 				)
 				break
 
diff --git a/packages/bindx/src/core/actions.ts b/packages/bindx/src/core/actions.ts
index f3c31a1c..d48da813 100644
--- a/packages/bindx/src/core/actions.ts
+++ b/packages/bindx/src/core/actions.ts
@@ -1,5 +1,5 @@
 import type { HasOneRelationState } from '../handles/types.js'
-import type { FieldError } from '../errors/types.js'
+import type { FieldError, FieldErrorFilter } from '../errors/types.js'
 
 /**
  * Action types for the ActionDispatcher.
@@ -231,7 +231,7 @@ export interface ClearFieldErrorsAction {
 	readonly entityType: string
 	readonly entityId: string
 	readonly fieldName: string
-	readonly source?: 'client' | 'server'
+	readonly filter?: FieldErrorFilter
 }
 
 /**
@@ -471,9 +471,9 @@ export function clearFieldErrors(
 	entityType: string,
 	entityId: string,
 	fieldName: string,
-	source?: 'client' | 'server',
+	filter?: FieldErrorFilter,
 ): ClearFieldErrorsAction {
-	return { type: 'CLEAR_FIELD_ERRORS', entityType, entityId, fieldName, source }
+	return { type: 'CLEAR_FIELD_ERRORS', entityType, entityId, fieldName, filter }
 }
 
 /**
diff --git a/packages/bindx/src/errors/index.ts b/packages/bindx/src/errors/index.ts
index 966d5001..b40aaac6 100644
--- a/packages/bindx/src/errors/index.ts
+++ b/packages/bindx/src/errors/index.ts
@@ -8,6 +8,8 @@ export {
 	type FieldError,
 	type ErrorState,
 	type ErrorInput,
+	type FieldErrorFilter,
+	matchesErrorFilter,
 	ExecutionErrorTypes,
 	isExecutionErrorType,
 	classifyError,
diff --git a/packages/bindx/src/errors/types.ts b/packages/bindx/src/errors/types.ts
index b3a4d914..fa9ea8c7 100644
--- a/packages/bindx/src/errors/types.ts
+++ b/packages/bindx/src/errors/types.ts
@@ -125,6 +125,23 @@ export interface LoadError extends BindxError {
  */
 export type FieldError = ClientError | ServerError | LoadError
 
+/**
+ * Selects which errors a clear operation removes. An omitted key matches any error.
+ */
+export interface FieldErrorFilter {
+	readonly source?: FieldError['source']
+	readonly code?: string
+}
+
+/**
+ * Checks whether an error matches every key present in the filter.
+ */
+export function matchesErrorFilter(error: FieldError, filter: FieldErrorFilter): boolean {
+	if (filter.source !== undefined && error.source !== filter.source) return false
+	if (filter.code !== undefined && error.code !== filter.code) return false
+	return true
+}
+
 /**
  * Error state stored in the SnapshotStore.
  */
diff --git a/packages/bindx/src/handles/FieldHandle.ts b/packages/bindx/src/handles/FieldHandle.ts
index 5ad3346c..a522d5a5 100644
--- a/packages/bindx/src/handles/FieldHandle.ts
+++ b/packages/bindx/src/handles/FieldHandle.ts
@@ -4,7 +4,7 @@ import type { SnapshotStore } from '../store/SnapshotStore.js'
 import { addFieldError, clearFieldErrors, setField } from '../core/actions.js'
 import { FIELD_REF_META, type FieldAccessor, type FieldRefMeta, type InputProps, type Unsubscribe } from './types.js'
 import { deepEqual } from '../utils/deepEqual.js'
-import { createClientError, type ErrorInput, type FieldError } from '../errors/types.js'
+import { createClientError, type ErrorInput, type FieldError, type FieldErrorFilter } from '../errors/types.js'
 import type {
 	FieldChangedEvent,
 	FieldChangingEvent,
@@ -186,11 +186,11 @@ export class FieldHandle<T = unknown> extends EntityRelatedHandle {
 	}
 
 	/**
-	 * Clears all errors from this field.
+	 * Clears errors from this field, or only those matching the filter.
 	 */
-	clearErrors(): void {
+	clearErrors(filter?: FieldErrorFilter): void {
 		this.dispatcher.dispatch(
-			clearFieldErrors(this.entityType, this.entityId, this.fieldName),
+			clearFieldErrors(this.entityType, this.entityId, this.fieldName, filter),
 		)
 	}
 
diff --git a/packages/bindx/src/handles/types.ts b/packages/bindx/src/handles/types.ts
index 8c200bac..8698a7ec 100644
--- a/packages/bindx/src/handles/types.ts
+++ b/packages/bindx/src/handles/types.ts
@@ -23,7 +23,7 @@ export type HasOneRelationState =
 	| 'creating'
 
 import type { ComponentBrand, AnyBrand } from '../brand/ComponentBrand.js'
-import type { FieldError, ErrorInput } from '../errors/types.js'
+import type { FieldError, FieldErrorFilter, ErrorInput } from '../errors/types.js'
 import type {
 	FieldChangedEvent,
 	FieldChangingEvent,
@@ -143,7 +143,7 @@ export interface FieldRef<T> {
 	readonly errors: readonly FieldError[]
 	readonly hasError: boolean
 	addError(error: ErrorInput): void
-	clearErrors(): void
+	clearErrors(filter?: FieldErrorFilter): void
 	onChange(listener: EventListener<FieldChangedEvent>): UnsubscribeType
 	onChanging(interceptor: Interceptor<FieldChangingEvent>): UnsubscribeType
 }
diff --git a/packages/bindx/src/index.ts b/packages/bindx/src/index.ts
index f2b012cf..9134d66e 100644
--- a/packages/bindx/src/index.ts
+++ b/packages/bindx/src/index.ts
@@ -317,6 +317,7 @@ export type {
 	ServerError,
 	LoadError,
 	FieldError,
+	FieldErrorFilter,
 	ErrorState,
 	ErrorInput,
 	PathElement,
@@ -341,6 +342,7 @@ export {
 	isLoadError,
 	filterErrorsBySource,
 	filterStickyErrors,
+	matchesErrorFilter,
 	UnfetchedFieldError,
 	resolveErrorPath,
 	resolveAllErrors,
diff --git a/packages/bindx/src/store/ErrorStore.ts b/packages/bindx/src/store/ErrorStore.ts
index ca8759a3..692905f7 100644
--- a/packages/bindx/src/store/ErrorStore.ts
+++ b/packages/bindx/src/store/ErrorStore.ts
@@ -1,5 +1,5 @@
-import type { ErrorState, FieldError } from '../errors/types.js'
-import { filterStickyErrors } from '../errors/types.js'
+import type { ErrorState, FieldError, FieldErrorFilter } from '../errors/types.js'
+import { filterStickyErrors, matchesErrorFilter } from '../errors/types.js'
 import type { RekeyContext, Rekeyable } from './RekeyOrchestrator.js'
 
 /**
@@ -39,21 +39,24 @@ export class ErrorStore implements Rekeyable {
 	}
 
 	/**
-	 * Clears field errors, optionally filtering by source.
+	 * Clears field errors, optionally narrowed to those matching the filter.
 	 */
-	clearFieldErrors(fieldKey: string, source?: 'client' | 'server'): void {
+	clearFieldErrors(fieldKey: string, filter?: FieldErrorFilter): void {
 		const existing = this.fieldErrors.get(fieldKey)
 		if (!existing) return
 
-		if (source === undefined) {
+		if (filter === undefined) {
+			this.fieldErrors.delete(fieldKey)
+			return
+		}
+
+		const filtered = existing.errors.filter(e => !matchesErrorFilter(e, filter))
+		if (filtered.length === existing.errors.length) return
+
+		if (filtered.length === 0) {
 			this.fieldErrors.delete(fieldKey)
 		} else {
-			const filtered = existing.errors.filter(e => e.source !== source)
-			if (filtered.length === 0) {
-				this.fieldErrors.delete(fieldKey)
-			} else {
-				this.fieldErrors.set(fieldKey, { errors: filtered, version: existing.version + 1 })
-			}
+			this.fieldErrors.set(fieldKey, { errors: filtered, version: existing.version + 1 })
 		}
 	}
 
@@ -162,7 +165,7 @@ export class ErrorStore implements Rekeyable {
 
 		for (const key of this.fieldErrors.keys()) {
 			if (key.startsWith(keyPrefix)) {
-				this.clearFieldErrors(key, 'server')
+				this.clearFieldErrors(key, { source: 'server' })
 			}
 		}
 
diff --git a/packages/bindx/src/store/SnapshotStore.ts b/packages/bindx/src/store/SnapshotStore.ts
index 118557b4..b903273b 100644
--- a/packages/bindx/src/store/SnapshotStore.ts
+++ b/packages/bindx/src/store/SnapshotStore.ts
@@ -1,6 +1,6 @@
 import type { EntitySnapshot, LoadStatus } from './snapshots.js'
 import { createEntitySnapshot } from './snapshots.js'
-import type { FieldError } from '../errors/types.js'
+import type { FieldError, FieldErrorFilter } from '../errors/types.js'
 import { SubscriptionManager, type SnapshotVersionBumper } from './SubscriptionManager.js'
 import { ErrorStore } from './ErrorStore.js'
 import {
@@ -823,10 +823,10 @@ export class SnapshotStore implements SnapshotVersionBumper, JournalTarget {
 		entityType: string,
 		id: string,
 		fieldName: string,
-		source?: 'client' | 'server',
+		filter?: FieldErrorFilter,
 	): void {
 		const key = this.getRelationKey(entityType, id, fieldName)
-		this.errors.clearFieldErrors(key, source)
+		this.errors.clearFieldErrors(key, filter)
 		this.notifyEntitySubscribers(this.getEntityKey(entityType, id))
 	}
 
diff --git a/tests/react/dataview/exportIgnoresStaticFilter.test.tsx b/tests/react/dataview/exportIgnoresStaticFilter.test.tsx
new file mode 100644
index 00000000..8553e009
--- /dev/null
+++ b/tests/react/dataview/exportIgnoresStaticFilter.test.tsx
@@ -0,0 +1,236 @@
+// Regression test for https://github.com/contember/bindx/issues/67
+//
+// `DataViewExportTrigger` builds its unpaged export query from
+// `filtering.resolvedWhere` only. The grid's static `filter` prop — which
+// scopes every row the operator actually sees — never reaches the export
+// query, so the exported file contains rows from OUTSIDE the grid's scope
+// (a data leak on grids like "sessions of this program" or "non-archived
+// contacts"). The same gap makes HasManyDataGrid exports query the whole
+// target table unscoped to the parent record.
+import '../../setup'
+import { describe, test, expect, afterEach } from 'bun:test'
+import { render, waitFor, cleanup, act, fireEvent } from '@testing-library/react'
+import React from 'react'
+import {
+	BindxProvider,
+	Entity,
+	MockAdapter,
+	defineSchema,
+	hasMany,
+	scalar,
+} from '@contember/bindx-react'
+import { entityDef, type GetQuery, type ListQuery, type Query } from '@contember/bindx'
+import {
+	DataGrid,
+	DataGridTextColumn,
+	DataViewExportTrigger,
+	HasManyDataGrid,
+	type ExportFactory,
+	type ExportFactoryArgs,
+	type ExportResult,
+} from '@contember/bindx-dataview'
+import { queryByTestId, TestTable } from './helpers.js'
+
+afterEach(() => {
+	cleanup()
+})
+
+interface Article {
+	id: string
+	title: string
+	status: string
+}
+
+interface Author {
+	id: string
+	name: string
+	articles: Article[]
+}
+
+interface TestSchema {
+	Article: Article
+	Author: Author
+}
+
+const localSchema = defineSchema<TestSchema>({
+	entities: {
+		Article: {
+			fields: {
+				id: scalar(),
+				title: scalar(),
+				status: scalar(),
+			},
+		},
+		Author: {
+			fields: {
+				id: scalar(),
+				name: scalar(),
+				articles: hasMany('Article'),
+			},
+		},
+	},
+})
+
+const articleDef = entityDef<Article>('Article')
+const authorDef = entityDef<Author>('Author')
+
+const ownArticles = [
+	{ id: 'a1', title: 'Published article', status: 'published' },
+	{ id: 'a2', title: 'Draft article', status: 'draft' },
+]
+
+const mockData = {
+	Article: {
+		'a1': ownArticles[0]!,
+		'a2': ownArticles[1]!,
+		'b1': { id: 'b1', title: 'Foreign article', status: 'published' },
+	},
+	Author: {
+		'author-1': { id: 'author-1', name: 'Own author', articles: ownArticles },
+		'author-2': { id: 'author-2', name: 'Other author', articles: [{ id: 'b1', title: 'Foreign article', status: 'published' }] },
+	},
+}
+
+class QuerySpyAdapter extends MockAdapter {
+	readonly queries: Query[] = []
+
+	override async query(queries: readonly Query[]): Promise<Awaited<ReturnType<MockAdapter['query']>>> {
+		this.queries.push(...queries)
+		return super.query(queries)
+	}
+
+	get listQueries(): ListQuery[] {
+		return this.queries.filter((q): q is ListQuery => q.type === 'list')
+	}
+
+	get getQueries(): GetQuery[] {
+		return this.queries.filter((q): q is GetQuery => q.type === 'get')
+	}
+}
+
+class CapturingExportFactory implements ExportFactory {
+	readonly exports: ExportFactoryArgs[] = []
+
+	create(args: ExportFactoryArgs): ExportResult {
+		this.exports.push(args)
+		return { blob: new Blob([]), extension: 'csv' }
+	}
+}
+
+describe('DataViewExportTrigger with a static grid filter', () => {
+	test('should constrain the export query by the static filter', async () => {
+		const adapter = new QuerySpyAdapter(mockData, { delay: 0 })
+		const staticFilter = { status: { eq: 'published' } }
+
+		const originalCreateObjectURL = URL.createObjectURL
+		const originalRevokeObjectURL = URL.revokeObjectURL
+		URL.createObjectURL = () => 'blob:test'
+		URL.revokeObjectURL = () => {}
+
+		try {
+			const { container, getByTestId } = render(
+				<BindxProvider adapter={adapter} schema={localSchema}>
+					<DataGrid entity={articleDef} filter={staticFilter}>
+						{it => (
+							<>
+								<DataGridTextColumn field={it.title} header="Title" />
+								<DataViewExportTrigger>
+									<button type="button" data-testid="export-trigger">Export</button>
+								</DataViewExportTrigger>
+								<TestTable />
+							</>
+						)}
+					</DataGrid>
+				</BindxProvider>,
+			)
+
+			await waitFor(() => {
+				expect(queryByTestId(container, 'datagrid-loading')).toBeNull()
+			})
+
+			// Sanity: the grid's own data load IS scoped by the static filter.
+			const dataQuery = adapter.listQueries.find(q => q.limit !== undefined)
+			expect(JSON.stringify(dataQuery?.filter ?? {})).toContain('published')
+
+			const before = adapter.listQueries.length
+			await act(async () => {
+				fireEvent.click(getByTestId('export-trigger'))
+			})
+			await waitFor(() => {
+				expect(adapter.listQueries.length).toBeGreaterThan(before)
+			})
+
+			const exportQuery = adapter.listQueries[adapter.listQueries.length - 1]!
+			// The export must not reach rows the grid never shows — its query has
+			// to carry the same static scope as the data load above.
+			expect(JSON.stringify(exportQuery.filter ?? {})).toContain('published')
+		} finally {
+			URL.createObjectURL = originalCreateObjectURL
+			URL.revokeObjectURL = originalRevokeObjectURL
+		}
+	})
+})
+
+describe('DataViewExportTrigger in a HasManyDataGrid', () => {
+	test('should export through the parent record instead of the whole target table', async () => {
+		const adapter = new QuerySpyAdapter(mockData, { delay: 0 })
+		const exportFactory = new CapturingExportFactory()
+
+		const originalCreateObjectURL = URL.createObjectURL
+		const originalRevokeObjectURL = URL.revokeObjectURL
+		URL.createObjectURL = () => 'blob:test'
+		URL.revokeObjectURL = () => {}
+
+		try {
+			const { container, getByTestId } = render(
+				<BindxProvider adapter={adapter} schema={localSchema}>
+					<Entity entity={authorDef} by={{ id: 'author-1' }}>
+						{author => (
+							<HasManyDataGrid field={author.articles} filter={{ status: { eq: 'published' } }}>
+								{it => (
+									<>
+										<DataGridTextColumn field={it.title} header="Title" />
+										<DataViewExportTrigger exportFactory={exportFactory}>
+											<button type="button" data-testid="export-trigger">Export</button>
+										</DataViewExportTrigger>
+										<TestTable />
+									</>
+								)}
+							</HasManyDataGrid>
+						)}
+					</Entity>
+				</BindxProvider>,
+			)
+
+			await waitFor(() => {
+				expect(queryByTestId(container, 'datagrid-loading')).toBeNull()
+			})
+
+			await act(async () => {
+				fireEvent.click(getByTestId('export-trigger'))
+			})
+			await waitFor(() => {
+				expect(exportFactory.exports.length).toBe(1)
+			})
+
+			// A root list query would reach every article in the table, including
+			// the ones belonging to another author.
+			expect(adapter.listQueries).toHaveLength(0)
+
+			const exportQuery = adapter.getQueries[adapter.getQueries.length - 1]!
+			expect(exportQuery.entityType).toBe('Author')
+			expect(exportQuery.by).toEqual({ id: 'author-1' })
+
+			const relationField = exportQuery.spec.fields.find(f => f.sourcePath[0] === 'articles')!
+			expect(relationField.limit).toBeUndefined()
+			expect(relationField.offset).toBeUndefined()
+			expect(JSON.stringify(relationField.filter ?? {})).toContain('published')
+
+			const exportedTitles = exportFactory.exports[0]!.data.map(row => row['title'])
+			expect(exportedTitles).toEqual(['Published article'])
+		} finally {
+			URL.createObjectURL = originalCreateObjectURL
+			URL.revokeObjectURL = originalRevokeObjectURL
+		}
+	})
+})
diff --git a/tests/unit/store/snapshotStore.test.ts b/tests/unit/store/snapshotStore.test.ts
index 0dc3b190..e83adcf4 100644
--- a/tests/unit/store/snapshotStore.test.ts
+++ b/tests/unit/store/snapshotStore.test.ts
@@ -805,13 +805,25 @@ describe('SnapshotStore', () => {
 				store.addFieldError('Article', 'a-1', 'title', { message: 'Client error', source: 'client' })
 				store.addFieldError('Article', 'a-1', 'title', createServerError('Server error'))
 
-				store.clearFieldErrors('Article', 'a-1', 'title', 'client')
+				store.clearFieldErrors('Article', 'a-1', 'title', { source: 'client' })
 
 				const errors = store.getFieldErrors('Article', 'a-1', 'title')
 				expect(errors.length).toBe(1)
 				expect(errors[0]?.source).toBe('server')
 			})
 
+			test('should clear errors by code', () => {
+				store.setEntityData('Article', 'a-1', { id: 'a-1', title: 'Test' }, true)
+				store.addFieldError('Article', 'a-1', 'title', { message: 'Own error', source: 'client', code: 'own' })
+				store.addFieldError('Article', 'a-1', 'title', { message: 'Foreign error', source: 'client', code: 'foreign' })
+				store.addFieldError('Article', 'a-1', 'title', { message: 'Untagged error', source: 'client' })
+
+				store.clearFieldErrors('Article', 'a-1', 'title', { source: 'client', code: 'own' })
+
+				const errors = store.getFieldErrors('Article', 'a-1', 'title')
+				expect(errors.map(e => e.message)).toEqual(['Foreign error', 'Untagged error'])
+			})
+
 			test('should clear non-sticky errors', () => {
 				store.setEntityData('Article', 'a-1', { id: 'a-1', title: 'Test' }, true)
 				store.addFieldError('Article', 'a-1', 'title', { message: 'Non-sticky', source: 'client' })