diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
index b5f25b1e52..7b5abf0a2e 100644
--- a/packages/components/src/components/checkbox/checkbox.tsx
+++ b/packages/components/src/components/checkbox/checkbox.tsx
@@ -188,7 +188,7 @@ export class Checkbox {
           indeterminate={this.indeterminate}
           aria-label={this.ariaLabelCheckbox}
           aria-checked={this.indeterminate ? 'mixed' : false}
-          aria-invalid={this.status === 'error' || this.invalid}
+          aria-invalid={this.status === 'error' || this.invalid ? 'true' : null}
           aria-describedBy={helperText.id}
           disabled={this.disabled}
           required={this.required}
diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx
index c9c2dfcbda..ffd36e0bba 100644
--- a/packages/components/src/components/dropdown/dropdown.tsx
+++ b/packages/components/src/components/dropdown/dropdown.tsx
@@ -240,7 +240,7 @@ export class Dropdown {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 
diff --git a/packages/components/src/components/input/__snapshots__/input.spec.ts.snap b/packages/components/src/components/input/__snapshots__/input.spec.ts.snap
index 94cf6a0567..628b40bb66 100644
--- a/packages/components/src/components/input/__snapshots__/input.spec.ts.snap
+++ b/packages/components/src/components/input/__snapshots__/input.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`Input props should reflect attributes 1`] = `
       label
     </label>
     <div class="input__select-wrapper">
-      <select aria-describedby="helper-message-13" aria-invalid="" class="input__select" id="input-13" name="name" required="" value=""></select>
+      <select aria-describedby="helper-message-13" aria-invalid="true" class="input__select" id="input-13" name="name" required="" value=""></select>
     </div>
     <div aria-live="polite" aria-relevant="additions removals" class="input__meta" id="helper-message-13">
       <div class="input__helper-text">
diff --git a/packages/components/src/components/input/input.tsx b/packages/components/src/components/input/input.tsx
index ab9873a325..e875b8117f 100644
--- a/packages/components/src/components/input/input.tsx
+++ b/packages/components/src/components/input/input.tsx
@@ -307,7 +307,7 @@ export class Input {
     const Tag = this.type === 'textarea' ? 'textarea' : 'input';
 
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 
diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
index 0dab024edf..42e84849b1 100644
--- a/packages/components/src/components/radio-button/radio-button.tsx
+++ b/packages/components/src/components/radio-button/radio-button.tsx
@@ -122,7 +122,7 @@ export class RadioButton {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 
diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
index 393b721b4b..4408dcb8be 100644
--- a/packages/components/src/components/text-field/text-field.tsx
+++ b/packages/components/src/components/text-field/text-field.tsx
@@ -229,7 +229,7 @@ export class TextField {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
     const ariaDetailedById = { 'aria-details': this.ariaDetailedId };
diff --git a/packages/components/src/components/textarea/__snapshots__/textarea.spec.ts.snap b/packages/components/src/components/textarea/__snapshots__/textarea.spec.ts.snap
index 95672508ef..368d057a41 100644
--- a/packages/components/src/components/textarea/__snapshots__/textarea.spec.ts.snap
+++ b/packages/components/src/components/textarea/__snapshots__/textarea.spec.ts.snap
@@ -19,7 +19,7 @@ exports[`Textarea should match snapshot -> helpertext 1`] = `
 <scale-textarea helper-text="helpertext" invalid="true">
   <div class="textarea textarea--status-error textarea--variant-informational">
     <div class="textarea__wrapper">
-      <label class="textarea__label" htmlfor="input-textarea-1"></label><textarea aria-describedby="helper-message-1" aria-invalid="" class="textarea__control" id="input-textarea-1" value=""></textarea>
+      <label class="textarea__label" htmlfor="input-textarea-1"></label><textarea aria-describedby="helper-message-1" aria-invalid="true" class="textarea__control" id="input-textarea-1" value=""></textarea>
     </div>
     <div aria-live="polite" aria-relevant="additions removals" class="textarea__meta" id="helper-message-1">
       <scale-helper-text helpertext="helpertext" variant="danger"></scale-helper-text>
diff --git a/packages/components/src/components/textarea/textarea.tsx b/packages/components/src/components/textarea/textarea.tsx
index 637b499a64..3405e05c51 100644
--- a/packages/components/src/components/textarea/textarea.tsx
+++ b/packages/components/src/components/textarea/textarea.tsx
@@ -171,7 +171,7 @@ export class Textarea {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
     const readonlyAttr = this.readonly ? { readonly: 'readonly' } : {};