From 35efc9c49ef87e9ee44aa267855dba6c71d7ec3a Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Tue, 29 Sep 2020 12:13:34 +0200
Subject: [PATCH] docs: add event example for radio and checkbox group (#962)

Co-authored-by: Thomas Allmer <thomas.allmer@ing.com>
---
 packages/checkbox-group/README.md | 25 +++++++++++++++++++++++++
 packages/radio-group/README.md    | 21 +++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md
index 23ba3451d..d69e439fb 100644
--- a/packages/checkbox-group/README.md
+++ b/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>
+`;
+```
diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md
index d26d73f06..2d1791cc4 100644
--- a/packages/radio-group/README.md
+++ b/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>
+`;
+```