prevent form submission

docs/components/radio-group.md

@@ -116,7 +116,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   // Handle form submit
   form.addEventListener('submit', event => {
     event.preventDefault();
-    // alert('All fields are valid!');
+    alert('All fields are valid!');
   });
 </script>
 ```

src/components/radio-group/radio-group.ts

@@ -61,6 +61,7 @@ export default class SlRadioGroup extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.preventInvalidSubmit();
   }
 
   setCustomValidity(message: string) {
@@ -103,6 +104,16 @@ export default class SlRadioGroup extends LitElement {
     }
   }
 
+  private preventInvalidSubmit() {
+    this.closest('form')?.addEventListener('submit', (e) => {
+      if(this.isInvalid) {
+        this.showNativeErrorMessage();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    })
+  }
+
   private showNativeErrorMessage() {
     this.input.hidden = false;
     this.input.reportValidity();