diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
index 6d5f5a62b3..f253fe3b9e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
@@ -21,10 +21,21 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
align-items: center;
margin-bottom: var(--uui-size-space-3);
gap: var(--uui-size-space-3);
+ border: 1px solid transparent;
+ }
+
+ :host(:not([pristine]):invalid),
+ /* polyfill support */
+ :host(:not([pristine])[internals-invalid]) {
+ border-color: var(--uui-color-danger);
+ }
+
+ #validation-message {
+ flex: 1;
}
#input {
- flex: 1;
+ width: 100%;
}
`,
];
@@ -108,14 +119,18 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
render() {
return html`
${this.disabled || this.readonly ? nothing : html``}
-
+
+
+
${this.readonly
? nothing
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
index 43f841ee20..40863e5406 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
@@ -168,14 +168,17 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
this._items,
(item, index) => index,
(item, index) =>
- html` this.#onInput(event, index)}
- @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
- ?disabled=${this.disabled}
- ?readonly=${this.readonly}
- required
- required-message="Item ${index + 1} is missing a value">`
+ html`
+ this.#onInput(event, index)}
+ @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
+ ?disabled=${this.disabled}
+ ?readonly=${this.readonly}
+ required
+ required-message="Item ${index + 1} is missing a value">
+ `
)}
`;
}