diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.element.ts
index 911868952d..a493fcc943 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.element.ts
@@ -1,8 +1,12 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import {
+	UmbPropertyEditorConfigCollection,
+	UmbPropertyValueChangeEvent,
+} from '@umbraco-cms/backoffice/property-editor';
+import { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  * @element umb-property-editor-ui-order-direction
@@ -10,16 +14,33 @@ import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/prope
 @customElement('umb-property-editor-ui-order-direction')
 export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property()
-	value = '';
+	value = 'asc';
 
 	@property({ attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
-	render() {
-		return html`<div>umb-property-editor-ui-order-direction</div>`;
+	#onChange(e: UUIBooleanInputEvent) {
+		this.value = e.target.value;
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	static styles = [UmbTextStyles];
+	render() {
+		return html`<uui-radio-group @input=${this.#onChange}>
+			<uui-radio name="order" label="Ascending [a-z]" ?checked=${this.value === 'asc'} value="asc"></uui-radio>
+			<uui-radio name="order" label="Descending [z-a]" ?checked=${this.value === 'desc'} value="desc"></uui-radio>
+		</uui-radio-group>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			uui-radio-group {
+				display: flex;
+				flex-direction: row;
+				gap: var(--uui-size-6);
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUIOrderDirectionElement;