diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts
index 8137a605bc..9367e5ac76 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts
@@ -1,8 +1,8 @@
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-toggle')
 export class UmbInputToggleElement extends UmbFormControlMixin(UmbLitElement, '') {
@@ -46,9 +46,6 @@ export class UmbInputToggleElement extends UmbFormControlMixin(UmbLitElement, ''
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
 
-	@state()
-	private _currentLabel?: string;
-
 	protected override firstUpdated(): void {
 		this.addFormControlElement(this.shadowRoot!.querySelector('uui-toggle')!);
 	}
@@ -60,16 +57,18 @@ export class UmbInputToggleElement extends UmbFormControlMixin(UmbLitElement, ''
 	}
 
 	override render() {
-		const label = this.showLabels ? (this.checked ? this.labelOn : this.labelOff) : '';
-		return html`<uui-toggle
-			.checked=${this.#checked}
-			.label=${this.ariaLabel}
-			?required=${this.required}
-			.requiredMessage=${this.requiredMessage}
-			@change=${this.#onChange}
-			?readonly=${this.readonly}
-			><span>${label}</span>
-		</uui-toggle>`;
+		const label = this.checked ? this.labelOn : this.labelOff;
+		return html`
+			<uui-toggle
+				.checked=${this.#checked}
+				.label=${this.ariaLabel ?? label ?? ''}
+				.requiredMessage=${this.requiredMessage}
+				?readonly=${this.readonly}
+				?required=${this.required}
+				@change=${this.#onChange}>
+				${when(this.showLabels, () => html`<span>${label}</span>`)}
+			</uui-toggle>
+		`;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
index 91dd6d35fa..8dd696f268 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
@@ -1,12 +1,12 @@
 import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import type {
 	UmbPropertyEditorConfigCollection,
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-property-editor-ui-number')
 export class UmbPropertyEditorUINumberElement
@@ -51,7 +51,7 @@ export class UmbPropertyEditorUINumberElement
 		this._min = this.#parseNumber(config.getValueByAlias('min'));
 		this._max = this.#parseNumber(config.getValueByAlias('max'));
 		this._step = this.#parseNumber(config.getValueByAlias('step'));
-		this._placeholder = config.getValueByAlias('placeholder');
+		this._placeholder = this.localize.string(config.getValueByAlias<string>('placeholder') ?? '');
 	}
 
 	constructor() {
@@ -110,12 +110,12 @@ export class UmbPropertyEditorUINumberElement
 				min=${ifDefined(this._min)}
 				max=${ifDefined(this._max)}
 				step=${ifDefined(this._step)}
-				placeholder=${ifDefined(this._placeholder)}
 				value=${this.value?.toString() ?? ''}
-				@change=${this.#onChange}
-				?required=${this.mandatory}
+				.placeholder=${this._placeholder ?? ''}
 				.requiredMessage=${this.mandatoryMessage}
-				?readonly=${this.readonly}>
+				?required=${this.mandatory}
+				?readonly=${this.readonly}
+				@change=${this.#onChange}>
 			</uui-input>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts
index 8d58a2f68e..ffc989c078 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts
@@ -1,15 +1,16 @@
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state, ifDefined, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import type {
+	InputMode as UUIInputMode,
+	InputType as UUIInputType,
+	UUIInputElement,
+} from '@umbraco-cms/backoffice/external/uui';
 import type {
 	UmbPropertyEditorUiElement,
 	UmbPropertyEditorConfigCollection,
 } from '@umbraco-cms/backoffice/property-editor';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
-import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-
-type UuiInputTypeType = typeof UUIInputElement.prototype.type;
 
 @customElement('umb-property-editor-ui-text-box')
 export class UmbPropertyEditorUITextBoxElement
@@ -41,13 +42,15 @@ export class UmbPropertyEditorUITextBoxElement
 	@property({ type: String })
 	name?: string;
 
-	#defaultType: UuiInputTypeType = 'text';
+	#defaultType: UUIInputType = 'text';
+
+	#defaultInputMode: UUIInputMode = 'text';
 
 	@state()
-	private _type: UuiInputTypeType = this.#defaultType;
+	private _type: UUIInputType = this.#defaultType;
 
 	@state()
-	private _inputMode?: string;
+	private _inputMode: UUIInputMode = this.#defaultInputMode;
 
 	@state()
 	private _maxChars?: number;
@@ -56,10 +59,12 @@ export class UmbPropertyEditorUITextBoxElement
 	private _placeholder?: string;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		this._type = config?.getValueByAlias<UuiInputTypeType>('inputType') ?? this.#defaultType;
-		this._inputMode = config?.getValueByAlias('inputMode');
-		this._maxChars = config?.getValueByAlias('maxChars');
-		this._placeholder = config?.getValueByAlias('placeholder');
+		if (!config) return;
+
+		this._type = config.getValueByAlias<UUIInputType>('inputType') ?? this.#defaultType;
+		this._inputMode = config.getValueByAlias<UUIInputMode>('inputMode') || this.#defaultInputMode;
+		this._maxChars = this.#parseNumber(config.getValueByAlias('maxChars'));
+		this._placeholder = this.localize.string(config.getValueByAlias<string>('placeholder') ?? '');
 	}
 
 	protected override firstUpdated(): void {
@@ -70,6 +75,15 @@ export class UmbPropertyEditorUITextBoxElement
 		return this.shadowRoot?.querySelector<UUIInputElement>('uui-input')?.focus();
 	}
 
+	#parseNumber(input: unknown): number | undefined {
+		const num = Number(input);
+		return Number.isFinite(num) ? num : undefined;
+	}
+
+	#getMaxLengthMessage(max: number, current: number) {
+		return this.localize.term('textbox_characters_exceed', max, current);
+	}
+
 	#onInput(e: InputEvent) {
 		const newValue = (e.target as HTMLInputElement).value;
 		if (newValue === this.value) return;
@@ -78,25 +92,24 @@ export class UmbPropertyEditorUITextBoxElement
 	}
 
 	override render() {
-		return html`<uui-input
-			.label=${this.localize.term('general_fieldFor', [this.name])}
-			.value=${this.value ?? ''}
-			.type=${this._type}
-			placeholder=${ifDefined(this._placeholder)}
-			inputMode=${ifDefined(this._inputMode)}
-			maxlength=${ifDefined(this._maxChars)}
-			@input=${this.#onInput}
-			?required=${this.mandatory}
-			.requiredMessage=${this.mandatoryMessage}
-			.maxlengthMessage=${() => {
-				const exceeded = (this.value?.length ?? 0) - (this._maxChars ?? 0);
-				return this.localize.term('textbox_characters_exceed', this._maxChars, exceeded);
-			}}
-			?readonly=${this.readonly}></uui-input>`;
+		return html`
+			<uui-input
+				.inputMode=${this._inputMode}
+				.label=${this.localize.term('general_fieldFor', [this.name])}
+				.maxlength=${this._maxChars}
+				.maxlengthMessage=${this.#getMaxLengthMessage.bind(this)}
+				.placeholder=${this._placeholder ?? ''}
+				.requiredMessage=${this.mandatoryMessage}
+				.type=${this._type}
+				.value=${this.value ?? ''}
+				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				@input=${this.#onInput}>
+			</uui-input>
+		`;
 	}
 
 	static override styles = [
-		UmbTextStyles,
 		css`
 			uui-input {
 				width: 100%;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts
index 121d06c9f5..e699e204a1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts
@@ -1,13 +1,13 @@
 import type { UmbTogglePropertyEditorUiValue } from './types.js';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import type { UmbInputToggleElement } from '@umbraco-cms/backoffice/components';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbFormControlMixin, UMB_VALIDATION_FALSE_LOCALIZATION_KEY } from '@umbraco-cms/backoffice/validation';
+import type { UmbInputToggleElement } from '@umbraco-cms/backoffice/components';
 import type {
 	UmbPropertyEditorConfigCollection,
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_VALIDATION_FALSE_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-property-editor-ui-toggle')
 export class UmbPropertyEditorUIToggleElement
@@ -48,10 +48,14 @@ export class UmbPropertyEditorUIToggleElement
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
-		this._labelOff = config.getValueByAlias('labelOff');
-		this._labelOn = config.getValueByAlias('labelOn');
+
 		this._showLabels = Boolean(config.getValueByAlias('showLabels'));
-		this._ariaLabel = config.getValueByAlias('ariaLabel');
+		this._labelOn = this.localize.string(config.getValueByAlias<string>('labelOn') ?? '');
+		this._labelOff = this.localize.string(config.getValueByAlias<string>('labelOff') ?? '');
+
+		this._ariaLabel =
+			this.localize.string(config.getValueByAlias<string>('ariaLabel')) ||
+			this.localize.term('general_toggleFor', [this.name]);
 	}
 
 	protected override firstUpdated(): void {
@@ -67,17 +71,15 @@ export class UmbPropertyEditorUIToggleElement
 	override render() {
 		return html`
 			<umb-input-toggle
-				.ariaLabel=${this._ariaLabel
-					? this.localize.string(this._ariaLabel)
-					: this.localize.term('general_toggleFor', [this.name])}
+				.ariaLabel=${this._ariaLabel ?? null}
 				.labelOn=${this._labelOn}
 				.labelOff=${this._labelOff}
-				?checked=${this.value}
-				?showLabels=${this._showLabels}
-				?required=${this.mandatory}
 				.requiredMessage=${this.mandatoryMessage}
-				@change=${this.#onChange}
-				?readonly=${this.readonly}>
+				.showLabels=${this._showLabels}
+				?checked=${this.value}
+				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				@change=${this.#onChange}>
 			</umb-input-toggle>
 		`;
 	}