diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
index a2c2fe8526..1c0cf7565a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { UmbVariantId } from '../../variants/variant-id.class';
 import { UmbWorkspacePropertyContext } from './workspace-property.context';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
 import type { ManifestPropertyEditorUI, ManifestTypes } from '@umbraco-cms/models';
@@ -131,6 +132,20 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
 		this._propertyContext.setConfig(value);
 	}
 
+	/**
+	 * VariantId. A Variant Configuration to identify which variant its value is stored on.
+	 * @public
+	 * @type {UmbVariantId}
+	 * @attr
+	 * @default null
+	 */
+	@property({ type: Object, attribute: false })
+	public set variantId(value: UmbVariantId | undefined) {
+		this._propertyContext.setVariantId(value);
+	}
+
+	// TODO: property for setting variantId.
+
 	// TODO: make interface for UMBPropertyEditorElement
 	@state()
 	private _element?: { value?: any; config?: any } & HTMLElement; // TODO: invent interface for propertyEditorUI.