diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
index 1fc431baa0..6999f724b4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -6,12 +6,14 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbDocumentItemModel } from '@umbraco-cms/backoffice/document';
 import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-document')
-export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
@@ -91,12 +93,12 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
 	@property({ type: Boolean })
 	showOpenButton?: boolean;
 
-	@property()
-	public set value(idsString: string) {
-		this.selection = splitStringToArray(idsString);
+	@property({ type: String })
+	public set value(selectionString: string | undefined) {
+		this.selection = splitStringToArray(selectionString);
 	}
-	public get value() {
-		return this.selection.join(',');
+	public get value(): string | undefined {
+		return this.selection.length > 0 ? this.selection.join(',') : undefined;
 	}
 
 	@state()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts
index a3028968ee..e2ac6a1ffc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts
@@ -203,7 +203,7 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 					<umb-localize key="publicAccess_paLoginPageHelp"> Choose the page that contains the login form </umb-localize>
 				</small>
 				<umb-input-document
-					.value=${this._loginDocumentId ? this._loginDocumentId : ''}
+					.value=${this._loginDocumentId}
 					max="1"
 					@change=${this.#onChangeLoginPage}></umb-input-document>
 			</div>
@@ -216,7 +216,7 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 					</umb-localize>
 				</small>
 				<umb-input-document
-					.value=${this._errorDocumentId ? this._errorDocumentId : ''}
+					.value=${this._errorDocumentId}
 					max="1"
 					@change=${this.#onChangeErrorPage}></umb-input-document>
 			</div>`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
index 9a6a311b0f..803719309d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
@@ -41,7 +41,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 	private _showOpenButton?: boolean;
 
 	#onChange(event: CustomEvent & { target: UmbInputDocumentElement }) {
-		this.value = event.target.selection.join(',');
+		this.value = event.target.value;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
@@ -55,7 +55,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 				.min=${this._min}
 				.max=${this._max}
 				.startNode=${startNode}
-				.value=${this.value ?? ''}
+				.value=${this.value}
 				?showOpenButton=${this._showOpenButton}
 				@change=${this.#onChange}>
 			</umb-input-document>