diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts
index d0e3e2cad3..be24cd45e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts
@@ -1 +1 @@
-import './document-type-input/document-type-input.element.js';
+import './input-document-type/input-document-type.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
index 0b90f912a7..bdbdeabd1d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
@@ -14,8 +14,8 @@ import {
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
-@customElement('umb-document-type-input')
-export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-document-type')
+export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) {
 	// TODO: do we need both selectedIds and value? If we just use value we follow the same pattern as native form controls.
 	private _selectedIds: Array<string> = [];
 	@property({ type: Array })
@@ -130,10 +130,10 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement)
 	];
 }
 
-export default UmbDocumentTypeInputElement;
+export default UmbInputDocumentTypeElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-document-type-input': UmbDocumentTypeInputElement;
+		'umb-input-document-type': UmbInputDocumentTypeElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
index c48749f0b9..66abc25720 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
@@ -1,5 +1,5 @@
 import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
-import type { UmbDocumentTypeInputElement } from '../../../components/document-type-input/document-type-input.element.js';
+import type { UmbInputDocumentTypeElement } from '../../../components/input-document-type/input-document-type.element.js';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
@@ -62,10 +62,10 @@ export class UmbDocumentTypeWorkspaceViewStructureElement
 					</div>
 					<div slot="editor">
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
-						<umb-document-type-input
+						<umb-input-document-type
 							.selectedIds=${this._allowedContentTypeIDs}
 							@change="${(e: CustomEvent) => {
-								const sortedContentTypesList = (e.target as UmbDocumentTypeInputElement).selectedIds.map(
+								const sortedContentTypesList = (e.target as UmbInputDocumentTypeElement).selectedIds.map(
 									(id, index) => ({
 										id: id,
 										sortOrder: index,
@@ -73,7 +73,7 @@ export class UmbDocumentTypeWorkspaceViewStructureElement
 								);
 								this.#workspaceContext?.setAllowedContentTypes(sortedContentTypesList);
 							}}">
-						</umb-document-type-input>
+						</umb-input-document-type>
 					</div>
 				</umb-workspace-property-layout>
 			</uui-box>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.stories.ts
deleted file mode 100644
index 042ffe2ec6..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-import './document-input.element.js';
-import type { UmbDocumentInputElement } from './document-input.element.js';
-
-const meta: Meta<UmbDocumentInputElement> = {
-	title: 'Components/Inputs/Document',
-	component: 'umb-document-Input',
-};
-
-export default meta;
-type Story = StoryObj<UmbDocumentInputElement>;
-
-export const Overview: Story = {
-	args: {},
-};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
index de42ba54f9..339d030d1d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
@@ -1 +1 @@
-export * from './document-input/document-input.element.js';
+export * from './input-document/input-document.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
similarity index 96%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
index eb599cca1a..5467763560 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -12,8 +12,8 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
-@customElement('umb-document-input')
-export class UmbDocumentInputElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-document')
+export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -174,10 +174,10 @@ export class UmbDocumentInputElement extends FormControlMixin(UmbLitElement) {
 	];
 }
 
-export default UmbDocumentInputElement;
+export default UmbInputDocumentElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-document-input': UmbDocumentInputElement;
+		'umb-input-document': UmbInputDocumentElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.stories.ts
new file mode 100644
index 0000000000..fecf4787e4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './input-document.element.js';
+import type { UmbInputDocumentElement } from './input-document.element.js';
+
+const meta: Meta<UmbInputDocumentElement> = {
+	title: 'Components/Inputs/Document',
+	component: 'umb-input-document',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputDocumentElement>;
+export const Overview: Story = {
+	args: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.test.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.test.ts
similarity index 54%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.test.ts
index 59601860ef..de1bd824d5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/document-input/document-input.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.test.ts
@@ -1,15 +1,15 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import { UmbDocumentInputElement } from './document-input.element.js';
+import { UmbInputDocumentElement } from './input-document.element.js';
 import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
-describe('UmbDocumentInputElement', () => {
-	let element: UmbDocumentInputElement;
+describe('UmbInputDocumentElement', () => {
+	let element: UmbInputDocumentElement;
 
 	beforeEach(async () => {
-		element = await fixture(html` <umb-document-input></umb-document-input> `);
+		element = await fixture(html` <umb-input-document></umb-input-document> `);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbDocumentInputElement);
+		expect(element).to.be.instanceOf(UmbInputDocumentElement);
 	});
 
 	it('passes the a11y audit', async () => {
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 8d67c36eb1..3c810524f2 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,4 +1,4 @@
-import type { UmbDocumentInputElement } from '../../components/document-input/document-input.element.js';
+import type { UmbInputDocumentElement } from '../../components/input-document/input-document.element.js';
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -33,19 +33,19 @@ export class UmbPropertyEditorUIContentPickerElement
 	private _limitMax?: number;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbDocumentInputElement).selectedIds;
+		this.value = (event.target as UmbInputDocumentElement).selectedIds;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	// TODO: Implement mandatory?
 	render() {
 		return html`
-			<umb-document-input
+			<umb-input-document
 				@change=${this._onChange}
 				.selectedIds=${this._value}
 				.min=${this._limitMin}
 				.max=${this._limitMax}
-				>Add</umb-document-input
+				>Add</umb-input-document
 			>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
index 8f3a61e4ab..9b30060ca1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
@@ -1,4 +1,4 @@
-import type { UmbDocumentInputElement } from '../../../documents/documents/components/document-input/document-input.element.js';
+import type { UmbInputDocumentElement } from '../../../documents/documents/components/input-document/input-document.element.js';
 import type { UmbMediaInputElement } from '../../../media/media/components/media-input/media-input.element.js';
 import type { UmbInputLanguagePickerElement } from '../../../settings/languages/components/input-language-picker/input-language-picker.element.js';
 import {
@@ -184,12 +184,12 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 	#renderContentSection() {
 		return html`
 			<div slot="editor">
-				<umb-document-input
+				<umb-input-document
 					.value=${this._package.contentNodeId ?? ''}
 					max="1"
 					@change="${(e: CustomEvent) =>
-						(this._package.contentNodeId = (e.target as UmbDocumentInputElement).selectedIds[0])}">
-				</umb-document-input>
+						(this._package.contentNodeId = (e.target as UmbInputDocumentElement).selectedIds[0])}">
+				</umb-input-document>
 				<uui-checkbox
 					label="Include child nodes"
 					.checked="${this._package.contentLoadChildNodes ?? false}"