diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts
index 026f4c35450..dde0d02f3f7 100644
--- a/checkbox/internal/checkbox.ts
+++ b/checkbox/internal/checkbox.ts
@@ -127,6 +127,9 @@ export class Checkbox extends LitElement {
   @state() private prevDisabled = false;
   @state() private prevIndeterminate = false;
   @query('input') private readonly input!: HTMLInputElement|null;
+  // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+  // Replace with this.internals.validity.customError when resolved.
+  private hasCustomValidityError = false;
   private readonly internals =
       (this as HTMLElement /* needed for closure */).attachInternals();
 
@@ -188,6 +191,7 @@ export class Checkbox extends LitElement {
    * @param error The error message to display.
    */
   setCustomValidity(error: string) {
+    this.hasCustomValidityError = !!error;
     this.internals.setValidity({customError: !!error}, error, this.getInput());
   }
 
@@ -273,7 +277,7 @@ export class Checkbox extends LitElement {
     // Sync the internal <input>'s validity and the host's ElementInternals
     // validity. We do this to re-use native `<input>` validation messages.
     const input = this.getInput();
-    if (this.internals.validity.customError) {
+    if (this.hasCustomValidityError) {
       input.setCustomValidity(this.internals.validationMessage);
     } else {
       input.setCustomValidity('');
diff --git a/switch/internal/switch.ts b/switch/internal/switch.ts
index 8579b7317b2..5f18dbe954b 100644
--- a/switch/internal/switch.ts
+++ b/switch/internal/switch.ts
@@ -129,6 +129,9 @@ export class Switch extends LitElement {
   }
 
   @query('input') private readonly input!: HTMLInputElement|null;
+  // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+  // Replace with this.internals.validity.customError when resolved.
+  private hasCustomValidityError = false;
   private readonly internals =
       (this as HTMLElement /* needed for closure */).attachInternals();
 
@@ -190,6 +193,7 @@ export class Switch extends LitElement {
    * @param error The error message to display.
    */
   setCustomValidity(error: string) {
+    this.hasCustomValidityError = !!error;
     this.internals.setValidity({customError: !!error}, error, this.getInput());
   }
 
@@ -303,7 +307,7 @@ export class Switch extends LitElement {
     // Sync the internal <input>'s validity and the host's ElementInternals
     // validity. We do this to re-use native `<input>` validation messages.
     const input = this.getInput();
-    if (this.internals.validity.customError) {
+    if (this.hasCustomValidityError) {
       input.setCustomValidity(this.internals.validationMessage);
     } else {
       input.setCustomValidity('');
diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
index 07317ce61df..42d4aaaa067 100644
--- a/textfield/internal/text-field.ts
+++ b/textfield/internal/text-field.ts
@@ -347,6 +347,9 @@ export abstract class TextField extends LitElement {
   private readonly leadingIcons!: Element[];
   @queryAssignedElements({slot: 'trailing-icon'})
   private readonly trailingIcons!: Element[];
+  // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+  // Replace with this.internals.validity.customError when resolved.
+  private hasCustomValidityError = false;
   private readonly internals =
       (this as HTMLElement /* needed for closure */).attachInternals();
 
@@ -426,6 +429,7 @@ export abstract class TextField extends LitElement {
    * @param error The error message to display.
    */
   setCustomValidity(error: string) {
+    this.hasCustomValidityError = !!error;
     this.internals.setValidity(
         {customError: !!error}, error, this.getInputOrTextarea());
   }
@@ -750,7 +754,7 @@ export abstract class TextField extends LitElement {
     // Sync the internal <input>'s validity and the host's ElementInternals
     // validity. We do this to re-use native `<input>` validation messages.
     const input = this.getInputOrTextarea();
-    if (this.internals.validity.customError) {
+    if (this.hasCustomValidityError) {
       input.setCustomValidity(this.internals.validationMessage);
     } else {
       input.setCustomValidity('');