docs: updates usage documentation for invalid radio groups (#2104)

Author: jnjosh

components/radio/metadata/radio.yml

@@ -3,8 +3,8 @@ status: Verified
 SpectrumSiteSlug: https://spectrum.adobe.com/page/radio-button/
 description: |
   - Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
-  - Invalid radio buttons are signified by alert [HelpText](helptext.html) and [Icon](icon.html) included in [FieldGroup](fieldgroup.html).
   - Radio buttons should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html).
+  - Invalid radio buttons are signified by including [HelpText](helptext.html) in a [FieldGroup](fieldgroup.html). Sample usage for an invalid radio state is included in the [FieldGroup](fieldgroup.html#invalid) documentation.
 
 sections:
   - name: Custom Properties API
@@ -21,7 +21,7 @@ sections:
       - Read-only radio buttons do not have a focus ring, but the button should be focusable.]
 
       ### Invalid/Error State
-      - Invalid radio buttons are signified by alert [HelpText](helptext.html) and [Icon](icon.html) included in [FieldGroup](fieldgroup.html).
+      - Invalid radio buttons are signified by including [HelpText](helptext.html) in a [FieldGroup](fieldgroup.html).
 
       ### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
@@ -131,25 +131,6 @@ examples:
 
         </div>
 
-        <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
-
-          <form>
-            <div class="spectrum-Radio is-invalid">
-              <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-10">
-              <span class="spectrum-Radio-button"></span>
-              <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
-            </div>
-            <br>
-            <div class="spectrum-Radio is-invalid">
-              <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-11" checked>
-              <span class="spectrum-Radio-button"></span>
-              <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
-            </div>
-          </form>
-
-        </div>
-
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
@@ -212,25 +193,6 @@ examples:
 
         </div>
 
-        <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
-
-          <form>
-            <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized is-invalid">
-              <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-18">
-              <span class="spectrum-Radio-button"></span>
-              <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
-            </div>
-            <br>
-            <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized is-invalid">
-              <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-19" checked>
-              <span class="spectrum-Radio-button"></span>
-              <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
-            </div>
-          </form>
-
-        </div>
-
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>