fix(radio): update usage documentation for invalid radio groups

Author: jnjosh

components/radio/metadata/radio.yml

@@ -3,8 +3,9 @@ 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 alert [HelpText](helptext.html) and [Icon](icon.html) included in [FieldGroup](fieldgroup.html). Sample usage for an invalid radio state is included in the [FieldGroup](fieldgroup.html#invalid) documentation.
+
 
 sections:
   - name: Custom Properties API
@@ -131,25 +132,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 +194,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>