diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-list-base/input-list-base.ts
similarity index 71%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-list-base/input-list-base.ts
index 825e1a989f..905f3f4a35 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-list-base/input-list-base.ts
@@ -1,21 +1,18 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-// import { UmbModalService, UmbModalType } from '../../../core/services/modal';
+import { UmbPickerData } from '../../../core/services/modal/layouts/modal-layout-picker-base';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 
 //TODO: These should probably be imported dynamically.
-import './picker-layout-section.element';
-import './picker-layout-user-group.element';
-import './picker-layout-user.element';
+import '../input-section/picker-layout-section.element';
+import '../input-user-group/picker-layout-user-group.element';
+import '../input-user/picker-layout-user.element';
 import { UmbModalService, UmbModalType } from '@umbraco-cms/services';
 
-export interface UmbPickerData {
-	multiple: boolean;
-	selection: Array<string>;
-}
+/** TODO: Make use of UUI FORM Mixin, to make it easily take part of a form. */
+export class UmbInputListBase extends UmbContextConsumerMixin(LitElement) {
 
-export class UmbPicker extends UmbContextConsumerMixin(LitElement) {
 	@property({ type: Array })
 	public value: Array<string> = [];
 
@@ -23,10 +20,10 @@ export class UmbPicker extends UmbContextConsumerMixin(LitElement) {
 	public multiple = true;
 
 	@property({ type: String })
-	public type: UmbModalType = 'sidebar';
+	public modalType: UmbModalType = 'sidebar';
 
 	@property({ type: String })
-	public size: UUIModalSidebarSize = 'small';
+	public modalSize: UUIModalSidebarSize = 'small';
 
 	protected pickerLayout?: string;
 	private _modalService?: UmbModalService;
@@ -42,14 +39,14 @@ export class UmbPicker extends UmbContextConsumerMixin(LitElement) {
 		if (!this.pickerLayout) return;
 
 		const modalHandler = this._modalService?.open(this.pickerLayout, {
-			type: this.type,
-			size: this.size,
+			type: this.modalType,
+			size: this.modalSize,
 			data: {
 				multiple: this.multiple,
 				selection: this.value,
 			},
 		});
-		modalHandler?.onClose().then((data: UmbPickerData) => {
+		modalHandler?.onClose().then((data: UmbPickerData<string>) => {
 			if (data) {
 				this.value = data.selection;
 				this.selectionUpdated();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/input-section.element.ts
similarity index 89%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/input-section.element.ts
index 342dc0ba8f..b068e5473a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/input-section.element.ts
@@ -1,12 +1,12 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPicker } from './picker';
+import { UmbInputListBase } from '../input-list-base/input-list-base';
 import type { ManifestSection } from '@umbraco-cms/models';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 
-@customElement('umb-picker-section')
-export class UmbPickerSectionElement extends UmbPicker {
+@customElement('umb-input-section')
+export class UmbInputPickerSectionElement extends UmbInputListBase {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -85,6 +85,6 @@ export class UmbPickerSectionElement extends UmbPicker {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-picker-section': UmbPickerSectionElement;
+		'umb-input-section': UmbInputPickerSectionElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/input-section.test.ts
similarity index 89%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.test.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/input-section.test.ts
index c17eeb3e9f..dc5e319cbb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-section.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/input-section.test.ts
@@ -6,7 +6,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 // describe('UmbPickerSectionElement', () => {
 // 	let element: UmbPickerSectionElement;
 // 	beforeEach(async () => {
-// 		element = await fixture(html`<umb-picker-section></umb-picker-section>`);
+// 		element = await fixture(html`<umb-input-section></umb-input-section>`);
 // 	});
 
 // 	it('is defined with its own instance', () => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/picker-layout-section.element.ts
similarity index 94%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/picker-layout-section.element.ts
index ab9b65c442..afc5b35c2f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/picker-layout-section.element.ts
@@ -1,14 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerLayout } from './picker-layout';
+import { UmbPickerLayoutBase } from '../../../core/services/modal/layouts/modal-layout-picker-base';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 import type { ManifestSection } from '@umbraco-cms/models';
 
 @customElement('umb-picker-layout-section')
-export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayout)) {
+export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutBase)) {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/picker-layout-section.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-section.test.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-section/picker-layout-section.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/input-user-group.element.ts
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/input-user-group.element.ts
index 7e1cec76b0..042c73f187 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/input-user-group.element.ts
@@ -1,13 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPicker } from './picker';
+import { UmbInputListBase } from '../input-list-base';
 import type { UserGroupEntity } from '@umbraco-cms/models';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { UmbUserGroupStore } from '@umbraco-cms/stores/user/user-group.store';
 
-@customElement('umb-picker-user-group')
-export class UmbPickerUserGroupElement extends UmbObserverMixin(UmbPicker) {
+@customElement('umb-input-user-group')
+export class UmbInputPickerUserGroupElement extends UmbObserverMixin(UmbInputListBase) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -95,6 +95,6 @@ export class UmbPickerUserGroupElement extends UmbObserverMixin(UmbPicker) {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-picker-user-group': UmbPickerUserGroupElement;
+		'umb-input-user-group': UmbInputPickerUserGroupElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/input-user-group.test.ts
similarity index 89%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.test.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/input-user-group.test.ts
index 1238d516b0..20550a4780 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user-group.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/input-user-group.test.ts
@@ -6,7 +6,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 // describe('UmbPickerLayoutUserGroupElement', () => {
 // 	let element: UmbPickerUserGroupElement;
 // 	beforeEach(async () => {
-// 		element = await fixture(html`<umb-picker-user-group></umb-picker-user-group>`);
+// 		element = await fixture(html`<umb-input-user-group></umb-input-user-group>`);
 // 	});
 
 // 	it('is defined with its own instance', () => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/picker-layout-user-group.element.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/picker-layout-user-group.element.ts
index c83ad02308..e8e922a4e4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/picker-layout-user-group.element.ts
@@ -1,14 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerLayout } from './picker-layout';
+import { UmbPickerLayoutBase } from '../../../core/services/modal/layouts/modal-layout-picker-base';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import type { UserGroupDetails } from '@umbraco-cms/models';
 import { UmbUserGroupStore } from '@umbraco-cms/stores/user/user-group.store';
 
 @customElement('umb-picker-layout-user-group')
-export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayout)) {
+export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutBase)) {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/picker-layout-user-group.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user-group.test.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user-group/picker-layout-user-group.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/input-user.element.ts
similarity index 91%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/input-user.element.ts
index 710309490b..b11f7dbe89 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/input-user.element.ts
@@ -1,13 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing, PropertyValueMap } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPicker } from './picker';
+import { UmbInputListBase } from '../input-list-base';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import type { UserEntity } from '@umbraco-cms/models';
 import { UmbUserStore } from '@umbraco-cms/stores/user/user.store';
 
-@customElement('umb-picker-user')
-export class UmbPickerUserElement extends UmbObserverMixin(UmbPicker) {
+@customElement('umb-input-user')
+export class UmbPickerUserElement extends UmbObserverMixin(UmbInputListBase) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -89,6 +89,6 @@ export class UmbPickerUserElement extends UmbObserverMixin(UmbPicker) {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-picker-user': UmbPickerUserElement;
+		'umb-input-user': UmbPickerUserElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/input-user.test.ts
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.test.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/input-user.test.ts
index b1720a8b11..483a865475 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-user.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/input-user.test.ts
@@ -6,7 +6,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 // describe('UmbPickerUserElement', () => {
 // 	let element: UmbPickerUserElement;
 // 	beforeEach(async () => {
-// 		element = await fixture(html`<umb-picker-user></umb-picker-user>`);
+// 		element = await fixture(html`<umb-input-user></umb-input-user>`);
 // 	});
 
 // 	it('is defined with its own instance', () => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/picker-layout-user.element.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/picker-layout-user.element.ts
index d098641eaf..9963051058 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/picker-layout-user.element.ts
@@ -1,14 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerLayout } from './picker-layout';
+import { UmbPickerLayoutBase } from '../../../core/services/modal/layouts/modal-layout-picker-base';
 import type { UserDetails } from '@umbraco-cms/models';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { UmbUserStore } from '@umbraco-cms/stores/user/user.store';
 
 @customElement('umb-picker-layout-user')
-export class UmbPickerLayoutUserElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayout)) {
+export class UmbPickerLayoutUserElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutBase)) {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/picker-layout-user.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout-user.test.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/components/input-user/picker-layout-user.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts
index 33f5166006..4ae2c5a5ab 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts
@@ -5,8 +5,8 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UmbUserGroupContext } from './user-group.context';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
-import '@umbraco-cms/sections/users/picker-user.element';
-import '@umbraco-cms/sections/users/picker-section.element';
+import '@umbraco-cms/components/input-user/input-user.element';
+import '@umbraco-cms/components/input-section/input-section.element';
 import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
 import type { ManifestEditorAction, ManifestWithLoader, UserDetails, UserGroupDetails } from '@umbraco-cms/models';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@@ -299,10 +299,10 @@ export class UmbEditorUserGroupElement extends UmbContextProviderMixin(
 		return html` <uui-box>
 				<div slot="headline">Assign access</div>
 				<umb-editor-property-layout label="Sections" description="Add sections to give users access">
-					<umb-picker-section
+					<umb-input-section
 						slot="editor"
 						.value=${this._userGroup.sections}
-						@change=${(e: any) => this._updateProperty('sections', e.target.value)}></umb-picker-section>
+						@change=${(e: any) => this._updateProperty('sections', e.target.value)}></umb-input-section>
 				</umb-editor-property-layout>
 				<umb-editor-property-layout
 					label="Content start node"
@@ -360,9 +360,9 @@ export class UmbEditorUserGroupElement extends UmbContextProviderMixin(
 	private renderRightColumn() {
 		return html`<uui-box>
 			<div slot="headline">Users</div>
-			<umb-picker-user
+			<umb-input-user
 				@change=${(e: Event) => this._updateUserKeys((e.target as any).value)}
-				.value=${this._userKeys || []}></umb-picker-user>
+				.value=${this._userKeys || []}></umb-input-user>
 		</uui-box>`;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts
index bbeb4fffe2..8605ad1f14 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts
@@ -5,17 +5,17 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
+import { UmbUserStore } from '@umbraco-cms/stores/user';
 import { getTagLookAndColor } from '../../sections/users/user-extensions';
 import { UmbUserContext } from './user.context';
 
-import { UmbUserStore } from '@umbraco-cms/stores/user';
 import { UmbContextProviderMixin, UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 import type { ManifestEditorAction, ManifestWithLoader, UserDetails } from '@umbraco-cms/models';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 
 import '../../property-editor-uis/content-picker/property-editor-ui-content-picker.element';
-import '@umbraco-cms/sections/users/picker-user-group.element';
+import '@umbraco-cms/components/input-user-group/input-user-group.element';
 
 
 @customElement('umb-editor-user')
@@ -226,10 +226,10 @@ export class UmbEditorUserElement extends UmbContextProviderMixin(
 				<div slot="headline">Assign access</div>
 				<div id="assign-access">
 					<umb-editor-property-layout label="Groups" description="Add groups to assign access and permissions">
-						<umb-picker-user-group
+						<umb-input-user-group
 							slot="editor"
 							.value=${this._user.userGroups}
-							@change=${(e: any) => this._updateProperty('userGroups', e.target.value)}></umb-picker-user-group>
+							@change=${(e: any) => this._updateProperty('userGroups', e.target.value)}></umb-input-user-group>
 					</umb-editor-property-layout>
 					<umb-editor-property-layout
 						label="Content start node"
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-create.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-create.element.ts
index 75e9dd1d39..341bd4bec3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-create.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-create.element.ts
@@ -2,7 +2,7 @@ import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query, state } from 'lit/decorators.js';
 import { UUIInputPasswordElement } from '@umbraco-ui/uui';
-import { UmbPickerUserGroupElement } from '../../picker-user-group.element';
+import { UmbInputPickerUserGroupElement } from '@umbraco-cms/components/input-user-group/input-user-group.element';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import type { UserDetails } from '@umbraco-cms/models';
 import { UmbModalLayoutElement, UmbNotificationDefaultData, UmbNotificationService } from '@umbraco-cms/services';
@@ -84,7 +84,7 @@ export class UmbEditorViewUsersCreateElement extends UmbContextConsumerMixin(Umb
 		const name = formData.get('name') as string;
 		const email = formData.get('email') as string;
 		//TODO: How should we handle pickers forms?
-		const userGroupPicker = form.querySelector('#userGroups') as UmbPickerUserGroupElement;
+		const userGroupPicker = form.querySelector('#userGroups') as UmbInputPickerUserGroupElement;
 		const userGroups = userGroupPicker?.value || [];
 
 		this._userStore?.invite(name, email, '', userGroups).then((user) => {
@@ -141,7 +141,7 @@ export class UmbEditorViewUsersCreateElement extends UmbContextConsumerMixin(Umb
 					<uui-form-layout-item>
 						<uui-label id="userGroupsLabel" slot="label" for="userGroups" required>User group</uui-label>
 						<span slot="description">Add groups to assign access and permissions</span>
-						<umb-picker-user-group id="userGroups" name="userGroups"></umb-picker-user-group>
+						<umb-input-user-group id="userGroups" name="userGroups"></umb-input-user-group>
 					</uui-form-layout-item>
 				</form>
 			</uui-form>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-invite.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-invite.element.ts
index bee280bef3..2a93b875e8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-invite.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-invite.element.ts
@@ -1,7 +1,7 @@
 import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query, state } from 'lit/decorators.js';
-import { UmbPickerUserGroupElement } from '../../picker-user-group.element';
+import { UmbInputPickerUserGroupElement } from '@umbraco-cms/components/input-user-group/input-user-group.element';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import type { UserDetails } from '@umbraco-cms/models';
 import { UmbModalLayoutElement } from '@umbraco-cms/services';
@@ -78,7 +78,7 @@ export class UmbEditorViewUsersInviteElement extends UmbContextConsumerMixin(Umb
 		const name = formData.get('name') as string;
 		const email = formData.get('email') as string;
 		//TODO: How should we handle pickers forms?
-		const userGroupPicker = form.querySelector('#userGroups') as UmbPickerUserGroupElement;
+		const userGroupPicker = form.querySelector('#userGroups') as UmbInputPickerUserGroupElement;
 		const userGroups = userGroupPicker?.value || [];
 
 		const message = formData.get('message') as string;
@@ -128,7 +128,7 @@ export class UmbEditorViewUsersInviteElement extends UmbContextConsumerMixin(Umb
 					<uui-form-layout-item>
 						<uui-label id="userGroupsLabel" slot="label" for="userGroups" required>User group</uui-label>
 						<span slot="description">Add groups to assign access and permissions</span>
-						<umb-picker-user-group id="userGroups" name="userGroups"></umb-picker-user-group>
+						<umb-input-user-group id="userGroups" name="userGroups"></umb-input-user-group>
 					</uui-form-layout-item>
 					<uui-form-layout-item>
 						<uui-label id="messageLabel" slot="label" for="message" required>Message</uui-label>
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts
index 1c60ce0cb9..c7ea96da39 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts
@@ -11,6 +11,7 @@ export interface UmbModalContentPickerData {
 import '../../../../../backoffice/trees/documents/tree-documents.element';
 import { UmbTreeElement } from '../../../../../backoffice/trees/shared/tree.element';
 
+// TODO: make use of UmbPickerLayoutBase
 @customElement('umb-modal-layout-content-picker')
 export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<UmbModalContentPickerData> {
 	static styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
index 79e4a32ba2..b5d9ab7666 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
@@ -8,6 +8,7 @@ export interface UmbModalIconPickerData {
 	selection: string[];
 }
 
+// TODO: Make use of UmbPickerLayoutBase
 @customElement('umb-modal-layout-icon-picker')
 export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbModalIconPickerData> {
 	static styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout-picker-base.ts
similarity index 50%
rename from src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.ts
rename to src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout-picker-base.ts
index c58a8d17dd..6449933df1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/picker-layout.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout-picker-base.ts
@@ -1,10 +1,15 @@
 import { state } from 'lit/decorators.js';
-import { UmbPickerData } from './picker';
 import { UmbModalLayoutElement } from '@umbraco-cms/services';
 
-export class UmbPickerLayout extends UmbModalLayoutElement<UmbPickerData> {
+export interface UmbPickerData<selectType = string> {
+	multiple: boolean;
+	selection: Array<selectType>;
+}
+
+export class UmbPickerLayoutBase<selectType> extends UmbModalLayoutElement<UmbPickerData<selectType>> {
+	
 	@state()
-	private _selection: Array<string> = [];
+	private _selection: Array<selectType> = [];
 
 	connectedCallback(): void {
 		super.connectedCallback();
@@ -19,27 +24,27 @@ export class UmbPickerLayout extends UmbModalLayoutElement<UmbPickerData> {
 		this.modalHandler?.close();
 	}
 
-	protected _handleKeydown(e: KeyboardEvent, key: string) {
+	protected _handleKeydown(e: KeyboardEvent, key: selectType) {
 		if (e.key === 'Enter') {
 			this._handleItemClick(key);
 		}
 	}
 
-	protected _handleItemClick(clickedKey: string) {
+	protected _handleItemClick(key: selectType) {
 		if (this.data?.multiple) {
-			if (this._isSelected(clickedKey)) {
-				this._selection = this._selection.filter((key) => key !== clickedKey);
+			if (this._isSelected(key)) {
+				this._selection = this._selection.filter((key) => key !== key);
 			} else {
-				this._selection.push(clickedKey);
+				this._selection.push(key);
 			}
 		} else {
-			this._selection = [clickedKey];
+			this._selection = [key];
 		}
 
 		this.requestUpdate('_selection');
 	}
 
-	protected _isSelected(key: string): boolean {
+	protected _isSelected(key: selectType): boolean {
 		return this._selection.includes(key);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
index efaa0a4e9b..289f4a84a5 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
@@ -19,6 +19,7 @@ interface GroupedPropertyEditorUIs {
 	[key: string]: Array<ManifestPropertyEditorUI>;
 }
 
+// TODO: make use of UmbPickerLayoutBase
 @customElement('umb-modal-layout-property-editor-ui-picker')
 export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
 	static styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts
index c97f3ebd9b..556a92e607 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts
@@ -22,6 +22,7 @@ export class UmbModalHandler {
 		this.size = options?.size || 'small';
 		this.element = this._createElement(element, options);
 
+		// TODO: Consider if its right to use Promises, or use another event based system? Would we need to be able to cancel an event, to then prevent the closing..?
 		this._closePromise = new Promise((resolve) => {
 			this._closeResolver = resolve;
 		});