diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 490b0e6a1f..47261ec112 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -1,11 +1,11 @@
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import { UmbDynamicRootRepository } from '@umbraco-cms/backoffice/dynamic-root';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+import type { UmbInputTreeElement } from '@umbraco-cms/backoffice/tree';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import type { UmbInputTreeElement } from '@umbraco-cms/backoffice/tree';
 import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 
 /**
@@ -26,7 +26,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	min = 0;
 
 	@state()
-	max = 0;
+	max = Infinity;
 
 	@state()
 	allowedContentTypeIds?: string | null;
@@ -42,20 +42,21 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	#dynamicRootRepository = new UmbDynamicRootRepository(this);
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		const startNode: UmbTreePickerSource | undefined = config?.getValueByAlias('startNode');
+		if (!config) return;
+
+		const startNode = config.getValueByAlias<UmbTreePickerSource>('startNode');
 		if (startNode) {
 			this.type = startNode.type;
 			this.startNodeId = startNode.id;
 			this.#dynamicRoot = startNode.dynamicRoot;
 		}
 
-		this.min = Number(config?.getValueByAlias('minNumber')) || 0;
-		this.max = Number(config?.getValueByAlias('maxNumber')) || 0;
+		this.min = Number(config.getValueByAlias('minNumber')) || 0;
+		this.max = Number(config.getValueByAlias('maxNumber')) || Infinity;
 
-		this.type = config?.getValueByAlias('type') ?? 'content';
-		this.allowedContentTypeIds = config?.getValueByAlias('filter');
-		this.showOpenButton = config?.getValueByAlias('showOpenButton');
-		this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
+		this.allowedContentTypeIds = config.getValueByAlias('filter');
+		this.showOpenButton = config.getValueByAlias('showOpenButton');
+		this.ignoreUserStartNodes = config.getValueByAlias('ignoreUserStartNodes');
 	}
 
 	connectedCallback() {
@@ -79,9 +80,8 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 		}
 	}
 
-	#onChange(e: CustomEvent) {
-		const input = e.target as UmbInputTreeElement;
-		this.value = input.items;
+	#onChange(event: CustomEvent & { target: UmbInputTreeElement }) {
+		this.value = event.target.items;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
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 d80c9524ed..04da0829b0 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
@@ -1,18 +1,18 @@
-import type { UmbDocumentTreeItemModel } from '../../tree/types.js';
 import { UmbDocumentPickerContext } from './input-document.context.js';
-import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
-import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbDocumentItemModel } from '@umbraco-cms/backoffice/document';
 
 @customElement('umb-input-document')
 export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
-			return element.getAttribute('detail');
+			return element.id;
 		},
 		getUniqueOfModel: (modelEntry) => {
 			return modelEntry;
@@ -22,6 +22,7 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
 		containerSelector: 'uui-ref-list',
 		onChange: ({ model }) => {
 			this.selection = model;
+			this.dispatchEvent(new UmbChangeEvent());
 		},
 	});
 
@@ -93,7 +94,6 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
 
 	@property()
 	public set value(idsString: string) {
-		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
 		this.selection = splitStringToArray(idsString);
 	}
 	public get value() {
@@ -144,7 +144,7 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
 		return undefined;
 	}
 
-	#pickableFilter: (item: UmbDocumentTreeItemModel) => boolean = (item) => {
+	#pickableFilter: (item: UmbDocumentItemModel) => boolean = (item) => {
 		if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
 			return this.allowedContentTypeIds.includes(item.documentType.unique);
 		}
@@ -155,49 +155,50 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
 		// TODO: Configure the content picker, with `startNodeId` and `ignoreUserStartNodes` [LK]
 		this.#pickerContext.openPicker({
 			hideTreeRoot: true,
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
 			pickableFilter: this.#pickableFilter,
 		});
 	}
 
+	#removeItem(item: UmbDocumentItemModel) {
+		this.#pickerContext.requestRemoveItem(item.unique);
+	}
+
 	render() {
 		return html`${this.#renderItems()} ${this.#renderAddButton()}`;
 	}
 
-	#renderItems() {
-		if (!this._items?.length) return;
-		return html`<uui-ref-list>
-			${repeat(
-				this._items,
-				(item) => item.unique,
-				(item) => this.#renderItem(item),
-			)}
-		</uui-ref-list>`;
-	}
-
 	#renderAddButton() {
 		if (this.max === 1 && this.selection.length >= this.max) return;
-		return html`<uui-button
-			id="add-button"
-			look="placeholder"
-			@click=${this.#openPicker}
-			label=${this.localize.term('general_choose')}></uui-button>`;
+		return html`
+			<uui-button
+				id="btn-add"
+				look="placeholder"
+				@click=${this.#openPicker}
+				label=${this.localize.term('general_choose')}></uui-button>
+		`;
+	}
+
+	#renderItems() {
+		if (!this._items) return;
+		return html`
+			<uui-ref-list>
+				${repeat(
+					this._items,
+					(item) => item.unique,
+					(item) => this.#renderItem(item),
+				)}
+			</uui-ref-list>
+		`;
 	}
 
 	#renderItem(item: UmbDocumentItemModel) {
 		if (!item.unique) return;
-		// TODO: get correct variant name
-		const name = item.variants[0]?.name;
-
 		return html`
-			<uui-ref-node name=${name}>
+			<uui-ref-node name=${item.name} id=${item.unique}>
 				${this.#renderIcon(item)} ${this.#renderIsTrashed(item)}
 				<uui-action-bar slot="actions">
 					${this.#renderOpenButton(item)}
-					<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.unique)} label="Remove document ${name}"
-						>${this.localize.term('general_remove')}</uui-button
-					>
+					<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
 				</uui-action-bar>
 			</uui-ref-node>
 		`;
@@ -215,14 +216,10 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
 
 	#renderOpenButton(item: UmbDocumentItemModel) {
 		if (!this.showOpenButton) return;
-
-		// TODO: get correct variant name
-		const name = item.variants[0]?.name;
-
 		return html`
 			<uui-button
 				href="${this._editDocumentPath}edit/${item.unique}"
-				label="${this.localize.term('general_open')} ${name}">
+				label="${this.localize.term('general_open')} ${item.name}">
 				${this.localize.term('general_open')}
 			</uui-button>
 		`;
@@ -230,7 +227,7 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
 
 	static styles = [
 		css`
-			#add-button {
+			#btn-add {
 				width: 100%;
 			}
 
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 bb8cd1c0f7..816770d679 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
@@ -1,11 +1,10 @@
 import type { UmbInputDocumentElement } from '../../components/input-document/input-document.element.js';
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import {
-	UmbPropertyValueChangeEvent,
-	type UmbPropertyEditorConfigCollection,
-} from '@umbraco-cms/backoffice/property-editor';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-property-editor-ui-document-picker')
 export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@@ -13,34 +12,47 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 	public value?: string;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		const validationLimit = config?.find((x) => x.alias === 'validationLimit');
+		if (!config) return;
 
-		this._limitMin = (validationLimit?.value as any)?.min;
-		this._limitMax = (validationLimit?.value as any)?.max;
-	}
-	public get config() {
-		return undefined;
+		const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
+		this.min = minMax?.min ?? 0;
+		this.max = minMax?.max ?? Infinity;
+
+		this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
+		this.startNodeId = config?.getValueByAlias('startNodeId');
+		this.showOpenButton = config?.getValueByAlias('showOpenButton');
 	}
 
 	@state()
-	private _limitMin?: number;
-	@state()
-	private _limitMax?: number;
+	min = 0;
 
-	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputDocumentElement).selection.join(',');
+	@state()
+	max = Infinity;
+
+	@state()
+	startNodeId?: string;
+
+	@state()
+	showOpenButton?: boolean;
+
+	@state()
+	ignoreUserStartNodes?: boolean;
+
+	#onChange(event: CustomEvent & { target: UmbInputDocumentElement }) {
+		this.value = event.target.selection.join(',');
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	// TODO: Implement mandatory?
 	render() {
 		return html`
 			<umb-input-document
-				@change=${this._onChange}
+				.min=${this.min}
+				.max=${this.max}
+				.startNodeId=${this.startNodeId ?? ''}
 				.value=${this.value ?? ''}
-				.min=${this._limitMin ?? 0}
-				.max=${this._limitMax ?? Infinity}>
-				<umb-localize key="general_add">Add</umb-localize>
+				?showOpenButton=${this.showOpenButton}
+				?ignoreUserStartNodes=${this.ignoreUserStartNodes}
+				@change=${this.#onChange}>
 			</umb-input-document>
 		`;
 	}