diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
index 7c3ec7184e..274b34825e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
@@ -1,10 +1,8 @@
 import { UMB_DOCUMENT_TYPE_WORKSPACE_CONTEXT } from './document-type-workspace.context-token.js';
+import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components';
 import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
-import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_MODAL_MANAGER_CONTEXT, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
-import { generateAlias } from '@umbraco-cms/backoffice/utils';
 @customElement('umb-document-type-workspace-editor')
 export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
@@ -13,9 +11,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _alias?: string;
 
-	@state()
-	private _aliasLocked = true;
-
 	@state()
 	private _icon?: string;
 
@@ -37,42 +32,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 		this.observe(this.#workspaceContext.icon, (icon) => (this._icon = icon), '_observeIcon');
 	}
 
-	// TODO. find a way where we don't have to do this for all workspaces.
-	#onNameChange(event: UUIInputEvent) {
-		if (event instanceof UUIInputEvent) {
-			const target = event.composedPath()[0] as UUIInputElement;
-
-			if (typeof target?.value === 'string') {
-				const oldName = this._name;
-				const oldAlias = this._alias;
-				const newName = event.target.value.toString();
-				if (this._aliasLocked) {
-					const expectedOldAlias = generateAlias(oldName ?? '');
-					// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
-					if (expectedOldAlias === oldAlias) {
-						this.#workspaceContext?.setAlias(generateAlias(newName));
-					}
-				}
-				this.#workspaceContext?.setName(target.value);
-			}
-		}
-	}
-
-	// TODO. find a way where we don't have to do this for all workspaces.
-	#onAliasChange(event: UUIInputEvent) {
-		if (event instanceof UUIInputEvent) {
-			const target = event.composedPath()[0] as UUIInputElement;
-			if (typeof target?.value === 'string') {
-				this.#workspaceContext?.setAlias(target.value);
-			}
-		}
-		event.stopPropagation();
-	}
-
-	#onToggleAliasLock() {
-		this._aliasLocked = !this._aliasLocked;
-	}
-
 	private async _handleIconClick() {
 		const [alias, color] = this._icon?.replace('color-', '')?.split(' ') ?? [];
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
@@ -92,6 +51,11 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 		});
 	}
 
+	#onNameAndAliasChange(event: InputEvent & { target: UmbInputWithAliasElement }) {
+		this.#workspaceContext?.setName(event.target.value ?? '');
+		this.#workspaceContext?.setAlias(event.target.alias ?? '');
+	}
+
 	render() {
 		return html`
 			<umb-workspace-editor alias="Umb.Workspace.DocumentType">
@@ -100,22 +64,12 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 						<umb-icon name=${ifDefined(this._icon)}></umb-icon>
 					</uui-button>
 
-					<uui-input id="name" label="name" .value=${this._name} @input="${this.#onNameChange}" ${umbFocus()}>
-						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
-						<uui-input
-							name="alias"
-							slot="append"
-							label="alias"
-							@input=${this.#onAliasChange}
-							.value=${this._alias}
-							placeholder="Enter alias..."
-							?disabled=${this._aliasLocked}>
-							<!-- TODO: validation for bad characters -->
-							<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-								<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
-							</div>
-						</uui-input>
-					</uui-input>
+					<umb-input-with-alias
+						id="name"
+						label="name"
+						value=${this._name}
+						alias=${this._alias}
+						@change="${this.#onNameAndAliasChange}"></umb-input-with-alias>
 				</div>
 			</umb-workspace-editor>
 		`;
@@ -136,18 +90,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 
 			#name {
 				width: 100%;
-				flex: 1 1 auto;
-				align-items: center;
-			}
-
-			#alias-lock {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				cursor: pointer;
-			}
-			#alias-lock uui-icon {
-				margin-bottom: 2px;
 			}
 
 			#icon {