docs: add event example for radio and checkbox group (#962)

Co-authored-by: Thomas Allmer <thomas.allmer@ing.com>

packages/checkbox-group/README.md

@@ -209,3 +209,28 @@ export const helpText = () => html`
   </lion-checkbox-group>
 `;
 ```
+
+### Event
+
+You can listen to the `model-value-changed` event whenever the value of the checkbox group is changed.
+
+```js preview-story
+export const event = () => html`
+  <lion-checkbox-group
+    name="scientists[]"
+    label="Favorite scientists"
+    @model-value-changed=${e =>
+      (document.getElementById('selectedDinosaur').innerText = JSON.stringify(
+        e.target.modelValue,
+        null,
+        4,
+      ))}
+  >
+    <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+    <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
+    <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+  </lion-checkbox-group>
+  <br />
+  <span>Selected scientists: <strong id="selectedDinosaur">N/A</strong></span>
+`;
+```

packages/radio-group/README.md

@@ -206,3 +206,24 @@ export const helpText = () => html`
   </lion-radio-group>
 `;
 ```
+
+### Event
+
+You can listen to the `model-value-changed` event whenever the value of the radio group is changed.
+
+```js preview-story
+export const event = () => html`
+  <lion-radio-group
+    name="dinosTwo"
+    label="Favourite dinosaur"
+    @model-value-changed=${e =>
+      (document.getElementById('selectedDinosaur').innerText = e.target.modelValue)}
+  >
+    <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+    <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+    <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+  </lion-radio-group>
+  <br />
+  <span>Selected dinosaur: <strong id="selectedDinosaur">N/A</strong></span>
+`;
+```