@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.3

package/components/checkbox/demo/api.md

@@ -10,7 +10,7 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.
 | Property                        | Attribute                       | Type      | Default     | Description                                      |
 |---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
 | [disabled](#disabled)                      | `disabled`                      | `boolean` | "undefined" |                                                  |
-| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets the validity message to the attribute value. |
 | [horizontal](#horizontal)                    | `horizontal`                    | `Boolean` | false       | If set, checkboxes will be aligned horizontally. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
 | [required](#required)                      | `required`                      | `Boolean` | false       | Populates the `required` attribute on the element. Used for client-side validation. |
@@ -54,7 +54,7 @@ Custom element for the purpose of allowing users to select one or more options o
 | [error](#error)    | `error`    | `Boolean` | false   | If set to true, sets an error state on the checkbox. |
 | [id](#id)       | `id`       | `String`  |         | Sets the individual `id` per element.            |
 | [name](#name)     | `name`     | `String`  |         | Accepts any string, `DOMString` representing the value of the input. |
-| [value](#value)    | `value`    | `String`  |         | Sets the element's input value.                  |
+| [value](#value)    | `value`    | `String`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods
 
@@ -90,10 +90,10 @@ Custom element for the purpose of allowing users to select one or more options o
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-checkbox-group>
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -105,10 +105,10 @@ Custom element for the purpose of allowing users to select one or more options o
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -127,10 +127,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
   <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
   <auro-checkbox-group disabled>
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -142,10 +142,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 ```html
 <auro-checkbox-group disabled>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -160,10 +160,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
   <auro-checkbox-group>
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -175,10 +175,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -199,10 +199,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
   <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="checked option" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox Option" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox Option" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox Option" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -214,10 +214,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
 ```html
 <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="checked option" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox Option" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox Option" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox Option" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -225,17 +225,19 @@ When present, the `required` attribute specifies that at least one or more `<aur
 
 #### Error
 
-The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.
+Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
+
+A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorGroup.html) -->
   <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
   <auro-checkbox-group error="custom error">
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -247,10 +249,10 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
 ```html
 <auro-checkbox-group error="custom error">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -269,10 +271,10 @@ Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `val
   <br/><br/>
   <auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -286,10 +288,10 @@ Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `val
 <br/><br/>
 <auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/checkbox/demo/api.min.js

@@ -141,7 +141,7 @@ class AuroLibraryRuntimeUtils {
  * @attr {Boolean} error - If set to true, sets an error state on the checkbox.
  * @attr {String} id - Sets the individual `id` per element.
  * @attr {String} name - Accepts any string, `DOMString` representing the value of the input.
- * @attr {String} value - Sets the element's input value.
+ * @attr {String} value - Sets the element's input value. Must be unique within an auro-checkbox-group element.
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -354,20 +354,20 @@ class AuroFormValidation {
       const pattern = new RegExp(`^${elem.pattern}$`, 'u');
 
       if (!pattern.test(elem.value)) {
-        elem.validity = 'badInput';
-        elem.setCustomValidity = elem.setCustomValidityBadInput || '';
+        elem.validity = 'patternMismatch';
+        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
       }
     }
 
     // Length > 0 is required to prevent the error message from showing when the input is empty
     if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
-      elem.setCustomValidity = elem.setCustomValidityTooShort || '';
+      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
     }
     
     if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
-      elem.setCustomValidity = elem.setCustomValidityTooLong || '';
+      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
     }
   }
 
@@ -383,33 +383,32 @@ class AuroFormValidation {
         const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
 
         if (!elem.value.match(emailRegex)) {
-          elem.validity = 'badInput';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'credit-card') {
         if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
         }
 
-        if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
+        if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
           elem.validity = 'rangeUnderflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-
       } else if (elem.type === 'month-day-year' ||
                  elem.type === 'month-year' ||
                  elem.type === 'month-fullYear' ||
                  elem.type === 'year-month-day'
       ) {
-        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         } else {
           const valueDate = new Date(elem.value);
 
@@ -419,7 +418,7 @@ class AuroFormValidation {
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
             }
           }
 
@@ -429,7 +428,7 @@ class AuroFormValidation {
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
             }
           }
         }
@@ -452,10 +451,10 @@ class AuroFormValidation {
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
-      elem.setCustomValidity = elem.error;
+      elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
     } else if (validationShouldRun) {
       elem.validity = 'valid';
-      elem.setCustomValidity = '';
+      elem.errorMessage = '';
 
       /**
        * Only validate once we interact with the datepicker
@@ -467,7 +466,7 @@ class AuroFormValidation {
       let hasValue = elem.value && elem.value.length > 0;
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements && this.auroInputElements.length === 2) {
+      if (this.auroInputElements?.length === 2) {
         if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
           hasValue = false;
         }
@@ -475,31 +474,27 @@ class AuroFormValidation {
 
       if (!hasValue && elem.required) {
         elem.validity = 'valueMissing';
-        elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateAttributes(elem);
       }
     }
 
-    if (this.auroInputElements && this.auroInputElements.length > 0) {
+    if (this.auroInputElements?.length > 0) {
       elem.validity = this.auroInputElements[0].validity;
-      elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
+      elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid') {
-        if (this.auroInputElements.length > 1) {
-          elem.validity = this.auroInputElements[1].validity;
-          elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
-        }
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+        elem.validity = this.auroInputElements[1].validity;
+        elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
     }
 
     if (validationShouldRun || elem.hasAttribute('error')) {
-      if (elem.validity && elem.validity !== 'valid') {
-        // Use the validity message override if it is declared
-        if (elem.ValidityMessageOverride) {
-          elem.setCustomValidity = elem.ValidityMessageOverride;
-        }
+      // Use the validity message override if it is declared
+      if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
+        elem.errorMessage = elem.ValidityMessageOverride;
       }
 
       this.getErrorMessage(elem);
@@ -545,18 +540,18 @@ class AuroFormValidation {
     if (elem.validity !== 'valid') {
       if (elem.setCustomValidity) {
         elem.errorMessage = elem.setCustomValidity;
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
-      } else if (this.inputElements && this.inputElements.length > 0) {
+      } else if (this.inputElements?.length > 0  && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 
         if (firstInput.validationMessage.length > 0) {
           elem.errorMessage = firstInput.validationMessage;
-        } else if (this.inputElements.length === 2) {
+        } else if (this.inputElements?.length === 2) {
           const secondInput = this.inputElements[1];
 
           if (secondInput.validationMessage.length > 0) {
@@ -585,7 +580,7 @@ var colorCss = i$4`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([d
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
  * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
  * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validity message to the attribute value.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
  * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
  * @attr {Boolean} horizontal - If set, checkboxes will be aligned horizontally.
@@ -885,7 +880,7 @@ class AuroCheckboxGroup extends r {
           </p>`
         : x`
           <p class="checkboxGroupElement-helpText" role="alert" aria-live="assertive" part="helpText">
-            ${this.setCustomValidity}
+            ${this.errorMessage}
           </p>`
       }
     `;