From ef1a82f64afedd494eb6b03168b56166b2a8313b Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartin.dev>
Date: Fri, 2 Apr 2021 12:58:59 -0400
Subject: [PATCH] docs(alert): add input handler to usage examples (#23131)

---
 core/src/components/alert/readme.md           | 261 +++++++++++++++---
 core/src/components/alert/usage/angular.md    |  56 +++-
 core/src/components/alert/usage/javascript.md |  56 +++-
 core/src/components/alert/usage/react.md      |  56 +++-
 core/src/components/alert/usage/stencil.md    |  57 +++-
 core/src/components/alert/usage/vue.md        |  36 +++
 6 files changed, 440 insertions(+), 82 deletions(-)

diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index 28f0cd6089..6a1eba65e8 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -204,37 +204,55 @@ export class AlertExample {
           type: 'radio',
           label: 'Radio 1',
           value: 'value1',
+          handler: () => {
+            console.log('Radio 1 selected');
+          },
           checked: true
         },
         {
           name: 'radio2',
           type: 'radio',
           label: 'Radio 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Radio 2 selected');
+          }
         },
         {
           name: 'radio3',
           type: 'radio',
           label: 'Radio 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Radio 3 selected');
+          }
         },
         {
           name: 'radio4',
           type: 'radio',
           label: 'Radio 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Radio 4 selected');
+          }
         },
         {
           name: 'radio5',
           type: 'radio',
           label: 'Radio 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Radio 5 selected');
+          }
         },
         {
           name: 'radio6',
           type: 'radio',
           label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Radio 6 selected');
+          }
         }
       ],
       buttons: [
@@ -267,6 +285,9 @@ export class AlertExample {
           type: 'checkbox',
           label: 'Checkbox 1',
           value: 'value1',
+          handler: () => {
+            console.log('Checkbox 1 selected');
+          },
           checked: true
         },
 
@@ -274,35 +295,50 @@ export class AlertExample {
           name: 'checkbox2',
           type: 'checkbox',
           label: 'Checkbox 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Checkbox 2 selected');
+          }
         },
 
         {
           name: 'checkbox3',
           type: 'checkbox',
           label: 'Checkbox 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Checkbox 3 selected');
+          }
         },
 
         {
           name: 'checkbox4',
           type: 'checkbox',
           label: 'Checkbox 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Checkbox 4 selected');
+          }
         },
 
         {
           name: 'checkbox5',
           type: 'checkbox',
           label: 'Checkbox 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Checkbox 5 selected');
+          }
         },
 
         {
           name: 'checkbox6',
           type: 'checkbox',
           label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Checkbox 6 selected');
+          }
         }
       ],
       buttons: [
@@ -474,32 +510,50 @@ function presentAlertRadio() {
       type: 'radio',
       label: 'Radio 1',
       value: 'value1',
+      handler: () => {
+        console.log('Radio 1 selected');
+      },
       checked: true
     },
     {
       type: 'radio',
       label: 'Radio 2',
-      value: 'value2'
+      value: 'value2',
+      handler: () => {
+        console.log('Radio 2 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 3',
-      value: 'value3'
+      value: 'value3',
+      handler: () => {
+        console.log('Radio 3 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 4',
-      value: 'value4'
+      value: 'value4',
+      handler: () => {
+        console.log('Radio 4 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 5',
-      value: 'value5'
+      value: 'value5',
+      handler: () => {
+        console.log('Radio 5 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-      value: 'value6'
+      value: 'value6',
+      handler: () => {
+        console.log('Radio 6 selected');
+      }
     }
   ];
   alert.buttons = [
@@ -530,37 +584,55 @@ function presentAlertCheckbox() {
       type: 'checkbox',
       label: 'Checkbox 1',
       value: 'value1',
+      handler: () => {
+        console.log('Checkbox 1 selected');
+      },
       checked: true
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 2',
-      value: 'value2'
+      value: 'value2',
+      handler: () => {
+        console.log('Checkbox 2 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 3',
-      value: 'value3'
+      value: 'value3',
+      handler: () => {
+        console.log('Checkbox 3 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 4',
-      value: 'value4'
+      value: 'value4',
+      handler: () => {
+        console.log('Checkbox 4 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 5',
-      value: 'value5'
+      value: 'value5',
+      handler: () => {
+        console.log('Checkbox 5 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-      value: 'value6'
+      value: 'value6',
+      handler: () => {
+        console.log('Checkbox 6 selected');
+      }
     }
   ];
   alert.buttons = [
@@ -780,37 +852,55 @@ export const AlertExample: React.FC = () => {
               type: 'radio',
               label: 'Radio 1',
               value: 'value1',
+              handler: () => {
+                console.log('Radio 1 selected');
+              },
               checked: true
             },
             {
               name: 'radio2',
               type: 'radio',
               label: 'Radio 2',
-              value: 'value2'
+              value: 'value2',
+              handler: () => {
+                console.log('Radio 2 selected');
+              }
             },
             {
               name: 'radio3',
               type: 'radio',
               label: 'Radio 3',
-              value: 'value3'
+              value: 'value3',
+              handler: () => {
+                console.log('Radio 3 selected');
+              }
             },
             {
               name: 'radio4',
               type: 'radio',
               label: 'Radio 4',
-              value: 'value4'
+              value: 'value4',
+              handler: () => {
+                console.log('Radio 4 selected');
+              }
             },
             {
               name: 'radio5',
               type: 'radio',
               label: 'Radio 5',
-              value: 'value5'
+              value: 'value5',
+              handler: () => {
+                console.log('Radio 5 selected');
+              }
             },
             {
               name: 'radio6',
               type: 'radio',
               label: 'Radio 6',
-              value: 'value6'
+              value: 'value6',
+              handler: () => {
+                console.log('Radio 6 selected');
+              }
             }
           ]}
           buttons={[
@@ -842,37 +932,55 @@ export const AlertExample: React.FC = () => {
               type: 'checkbox',
               label: 'Checkbox 1',
               value: 'value1',
+              handler: () => {
+                console.log('Checkbox 1 selected');
+              },
               checked: true
             },
             {
               name: 'checkbox2',
               type: 'checkbox',
               label: 'Checkbox 2',
-              value: 'value2'
+              value: 'value2',
+              handler: () => {
+                console.log('Checkbox 2 selected');
+              }
             },
             {
               name: 'checkbox3',
               type: 'checkbox',
               label: 'Checkbox 3',
-              value: 'value3'
+              value: 'value3',
+              handler: () => {
+                console.log('Checkbox 3 selected');
+              }
             },
             {
               name: 'checkbox4',
               type: 'checkbox',
               label: 'Checkbox 4',
-              value: 'value4'
+              value: 'value4',
+              handler: () => {
+                console.log('Checkbox 4 selected');
+              }
             },
             {
               name: 'checkbox5',
               type: 'checkbox',
               label: 'Checkbox 5',
-              value: 'value5'
+              value: 'value5',
+              handler: () => {
+                console.log('Checkbox 5 selected');
+              }
             },
             {
               name: 'checkbox6',
               type: 'checkbox',
               label: 'Checkbox 6',
-              value: 'value6'
+              value: 'value6',
+              handler: () => {
+                console.log('Checkbox 6 selected');
+              }
             }
           ]}
           buttons={[
@@ -1055,37 +1163,55 @@ export class AlertExample {
           type: 'radio',
           label: 'Radio 1',
           value: 'value1',
+          handler: () => {
+            console.log('Radio 1 selected');
+          },
           checked: true
         },
         {
           name: 'radio2',
           type: 'radio',
           label: 'Radio 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Radio 2 selected');
+          }
         },
         {
           name: 'radio3',
           type: 'radio',
           label: 'Radio 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Radio 3 selected');
+          }
         },
         {
           name: 'radio4',
           type: 'radio',
           label: 'Radio 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Radio 4 selected');
+          }
         },
         {
           name: 'radio5',
           type: 'radio',
           label: 'Radio 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Radio 5 selected');
+          }
         },
         {
           name: 'radio6',
           type: 'radio',
           label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Radio 6 selected');
+          }
         }
       ],
       buttons: [
@@ -1118,42 +1244,59 @@ export class AlertExample {
           type: 'checkbox',
           label: 'Checkbox 1',
           value: 'value1',
+          handler: () => {
+            console.log('Checkbox 1 selected');
+          },
           checked: true
         },
-
         {
           name: 'checkbox2',
           type: 'checkbox',
           label: 'Checkbox 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Checkbox 2 selected');
+          }
         },
 
         {
           name: 'checkbox3',
           type: 'checkbox',
           label: 'Checkbox 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Checkbox 3 selected');
+          }
         },
 
         {
           name: 'checkbox4',
           type: 'checkbox',
           label: 'Checkbox 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Checkbox 4 selected');
+          }
         },
 
         {
           name: 'checkbox5',
           type: 'checkbox',
           label: 'Checkbox 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Checkbox 5 selected');
+          }
         },
 
         {
           name: 'checkbox6',
           type: 'checkbox',
           label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Checkbox 6 selected');
+          }
         }
       ],
       buttons: [
@@ -1346,32 +1489,50 @@ export default defineComponent({
               type: 'radio',
               label: 'Radio 1',
               value: 'value1',
+              handler: () => {
+                console.log('Radio 1 selected');
+              },
               checked: true,
             },
             {
               type: 'radio',
               label: 'Radio 2',
               value: 'value2',
+              handler: () => {
+                console.log('Radio 2 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 3',
               value: 'value3',
+              handler: () => {
+                console.log('Radio 3 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 4',
               value: 'value4',
+              handler: () => {
+                console.log('Radio 4 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 5',
               value: 'value5',
+              handler: () => {
+                console.log('Radio 5 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 6',
               value: 'value6',
+              handler: () => {
+                console.log('Radio 6 selected');
+              }
             },
           ],
           buttons: [
@@ -1404,6 +1565,9 @@ export default defineComponent({
               type: 'checkbox',
               label: 'Checkbox 1',
               value: 'value1',
+              handler: () => {
+                console.log('Checkbox 1 selected');
+              },
               checked: true,
             },
 
@@ -1411,30 +1575,45 @@ export default defineComponent({
               type: 'checkbox',
               label: 'Checkbox 2',
               value: 'value2',
+              handler: () => {
+                console.log('Checkbox 2 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 3',
               value: 'value3',
+              handler: () => {
+                console.log('Checkbox 3 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 4',
               value: 'value4',
+              handler: () => {
+                console.log('Checkbox 4 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 5',
               value: 'value5',
+              handler: () => {
+                console.log('Checkbox 5 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 6',
               value: 'value6',
+              handler: () => {
+                console.log('Checkbox 6 selected');
+              }
             },
           ],
           buttons: [
diff --git a/core/src/components/alert/usage/angular.md b/core/src/components/alert/usage/angular.md
index 848aef2aa7..63cc4dcad9 100644
--- a/core/src/components/alert/usage/angular.md
+++ b/core/src/components/alert/usage/angular.md
@@ -153,37 +153,55 @@ export class AlertExample {
           type: 'radio',
           label: 'Radio 1',
           value: 'value1',
+          handler: () => {
+            console.log('Radio 1 selected');
+          },
           checked: true
         },
         {
           name: 'radio2',
           type: 'radio',
           label: 'Radio 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Radio 2 selected');
+          }
         },
         {
           name: 'radio3',
           type: 'radio',
           label: 'Radio 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Radio 3 selected');
+          }
         },
         {
           name: 'radio4',
           type: 'radio',
           label: 'Radio 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Radio 4 selected');
+          }
         },
         {
           name: 'radio5',
           type: 'radio',
           label: 'Radio 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Radio 5 selected');
+          }
         },
         {
           name: 'radio6',
           type: 'radio',
           label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Radio 6 selected');
+          }
         }
       ],
       buttons: [
@@ -216,6 +234,9 @@ export class AlertExample {
           type: 'checkbox',
           label: 'Checkbox 1',
           value: 'value1',
+          handler: () => {
+            console.log('Checkbox 1 selected');
+          },
           checked: true
         },
 
@@ -223,35 +244,50 @@ export class AlertExample {
           name: 'checkbox2',
           type: 'checkbox',
           label: 'Checkbox 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Checkbox 2 selected');
+          }
         },
 
         {
           name: 'checkbox3',
           type: 'checkbox',
           label: 'Checkbox 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Checkbox 3 selected');
+          }
         },
 
         {
           name: 'checkbox4',
           type: 'checkbox',
           label: 'Checkbox 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Checkbox 4 selected');
+          }
         },
 
         {
           name: 'checkbox5',
           type: 'checkbox',
           label: 'Checkbox 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Checkbox 5 selected');
+          }
         },
 
         {
           name: 'checkbox6',
           type: 'checkbox',
           label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Checkbox 6 selected');
+          }
         }
       ],
       buttons: [
diff --git a/core/src/components/alert/usage/javascript.md b/core/src/components/alert/usage/javascript.md
index 007f7beb4e..f3204b4464 100644
--- a/core/src/components/alert/usage/javascript.md
+++ b/core/src/components/alert/usage/javascript.md
@@ -137,32 +137,50 @@ function presentAlertRadio() {
       type: 'radio',
       label: 'Radio 1',
       value: 'value1',
+      handler: () => {
+        console.log('Radio 1 selected');
+      },
       checked: true
     },
     {
       type: 'radio',
       label: 'Radio 2',
-      value: 'value2'
+      value: 'value2',
+      handler: () => {
+        console.log('Radio 2 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 3',
-      value: 'value3'
+      value: 'value3',
+      handler: () => {
+        console.log('Radio 3 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 4',
-      value: 'value4'
+      value: 'value4',
+      handler: () => {
+        console.log('Radio 4 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 5',
-      value: 'value5'
+      value: 'value5',
+      handler: () => {
+        console.log('Radio 5 selected');
+      }
     },
     {
       type: 'radio',
       label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-      value: 'value6'
+      value: 'value6',
+      handler: () => {
+        console.log('Radio 6 selected');
+      }
     }
   ];
   alert.buttons = [
@@ -193,37 +211,55 @@ function presentAlertCheckbox() {
       type: 'checkbox',
       label: 'Checkbox 1',
       value: 'value1',
+      handler: () => {
+        console.log('Checkbox 1 selected');
+      },
       checked: true
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 2',
-      value: 'value2'
+      value: 'value2',
+      handler: () => {
+        console.log('Checkbox 2 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 3',
-      value: 'value3'
+      value: 'value3',
+      handler: () => {
+        console.log('Checkbox 3 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 4',
-      value: 'value4'
+      value: 'value4',
+      handler: () => {
+        console.log('Checkbox 4 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 5',
-      value: 'value5'
+      value: 'value5',
+      handler: () => {
+        console.log('Checkbox 5 selected');
+      }
     },
 
     {
       type: 'checkbox',
       label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-      value: 'value6'
+      value: 'value6',
+      handler: () => {
+        console.log('Checkbox 6 selected');
+      }
     }
   ];
   alert.buttons = [
diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md
index 17a365d434..6849a2b873 100644
--- a/core/src/components/alert/usage/react.md
+++ b/core/src/components/alert/usage/react.md
@@ -191,37 +191,55 @@ export const AlertExample: React.FC = () => {
               type: 'radio',
               label: 'Radio 1',
               value: 'value1',
+              handler: () => {
+                console.log('Radio 1 selected');
+              },
               checked: true
             },
             {
               name: 'radio2',
               type: 'radio',
               label: 'Radio 2',
-              value: 'value2'
+              value: 'value2',
+              handler: () => {
+                console.log('Radio 2 selected');
+              }
             },
             {
               name: 'radio3',
               type: 'radio',
               label: 'Radio 3',
-              value: 'value3'
+              value: 'value3',
+              handler: () => {
+                console.log('Radio 3 selected');
+              }
             },
             {
               name: 'radio4',
               type: 'radio',
               label: 'Radio 4',
-              value: 'value4'
+              value: 'value4',
+              handler: () => {
+                console.log('Radio 4 selected');
+              }
             },
             {
               name: 'radio5',
               type: 'radio',
               label: 'Radio 5',
-              value: 'value5'
+              value: 'value5',
+              handler: () => {
+                console.log('Radio 5 selected');
+              }
             },
             {
               name: 'radio6',
               type: 'radio',
               label: 'Radio 6',
-              value: 'value6'
+              value: 'value6',
+              handler: () => {
+                console.log('Radio 6 selected');
+              }
             }
           ]}
           buttons={[
@@ -253,37 +271,55 @@ export const AlertExample: React.FC = () => {
               type: 'checkbox',
               label: 'Checkbox 1',
               value: 'value1',
+              handler: () => {
+                console.log('Checkbox 1 selected');
+              },
               checked: true
             },
             {
               name: 'checkbox2',
               type: 'checkbox',
               label: 'Checkbox 2',
-              value: 'value2'
+              value: 'value2',
+              handler: () => {
+                console.log('Checkbox 2 selected');
+              }
             },
             {
               name: 'checkbox3',
               type: 'checkbox',
               label: 'Checkbox 3',
-              value: 'value3'
+              value: 'value3',
+              handler: () => {
+                console.log('Checkbox 3 selected');
+              }
             },
             {
               name: 'checkbox4',
               type: 'checkbox',
               label: 'Checkbox 4',
-              value: 'value4'
+              value: 'value4',
+              handler: () => {
+                console.log('Checkbox 4 selected');
+              }
             },
             {
               name: 'checkbox5',
               type: 'checkbox',
               label: 'Checkbox 5',
-              value: 'value5'
+              value: 'value5',
+              handler: () => {
+                console.log('Checkbox 5 selected');
+              }
             },
             {
               name: 'checkbox6',
               type: 'checkbox',
               label: 'Checkbox 6',
-              value: 'value6'
+              value: 'value6',
+              handler: () => {
+                console.log('Checkbox 6 selected');
+              }
             }
           ]}
           buttons={[
diff --git a/core/src/components/alert/usage/stencil.md b/core/src/components/alert/usage/stencil.md
index b768af4575..64f5c9ce75 100644
--- a/core/src/components/alert/usage/stencil.md
+++ b/core/src/components/alert/usage/stencil.md
@@ -150,37 +150,55 @@ export class AlertExample {
           type: 'radio',
           label: 'Radio 1',
           value: 'value1',
+          handler: () => {
+            console.log('Radio 1 selected');
+          },
           checked: true
         },
         {
           name: 'radio2',
           type: 'radio',
           label: 'Radio 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Radio 2 selected');
+          }
         },
         {
           name: 'radio3',
           type: 'radio',
           label: 'Radio 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Radio 3 selected');
+          }
         },
         {
           name: 'radio4',
           type: 'radio',
           label: 'Radio 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Radio 4 selected');
+          }
         },
         {
           name: 'radio5',
           type: 'radio',
           label: 'Radio 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Radio 5 selected');
+          }
         },
         {
           name: 'radio6',
           type: 'radio',
           label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Radio 6 selected');
+          }
         }
       ],
       buttons: [
@@ -213,42 +231,59 @@ export class AlertExample {
           type: 'checkbox',
           label: 'Checkbox 1',
           value: 'value1',
+          handler: () => {
+            console.log('Checkbox 1 selected');
+          },
           checked: true
         },
-
         {
           name: 'checkbox2',
           type: 'checkbox',
           label: 'Checkbox 2',
-          value: 'value2'
+          value: 'value2',
+          handler: () => {
+            console.log('Checkbox 2 selected');
+          }
         },
 
         {
           name: 'checkbox3',
           type: 'checkbox',
           label: 'Checkbox 3',
-          value: 'value3'
+          value: 'value3',
+          handler: () => {
+            console.log('Checkbox 3 selected');
+          }
         },
 
         {
           name: 'checkbox4',
           type: 'checkbox',
           label: 'Checkbox 4',
-          value: 'value4'
+          value: 'value4',
+          handler: () => {
+            console.log('Checkbox 4 selected');
+          }
         },
 
         {
           name: 'checkbox5',
           type: 'checkbox',
           label: 'Checkbox 5',
-          value: 'value5'
+          value: 'value5',
+          handler: () => {
+            console.log('Checkbox 5 selected');
+          }
         },
 
         {
           name: 'checkbox6',
           type: 'checkbox',
           label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-          value: 'value6'
+          value: 'value6',
+          handler: () => {
+            console.log('Checkbox 6 selected');
+          }
         }
       ],
       buttons: [
diff --git a/core/src/components/alert/usage/vue.md b/core/src/components/alert/usage/vue.md
index c1cb7990cf..61ca1b1fc7 100644
--- a/core/src/components/alert/usage/vue.md
+++ b/core/src/components/alert/usage/vue.md
@@ -149,32 +149,50 @@ export default defineComponent({
               type: 'radio',
               label: 'Radio 1',
               value: 'value1',
+              handler: () => {
+                console.log('Radio 1 selected');
+              },
               checked: true,
             },
             {
               type: 'radio',
               label: 'Radio 2',
               value: 'value2',
+              handler: () => {
+                console.log('Radio 2 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 3',
               value: 'value3',
+              handler: () => {
+                console.log('Radio 3 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 4',
               value: 'value4',
+              handler: () => {
+                console.log('Radio 4 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 5',
               value: 'value5',
+              handler: () => {
+                console.log('Radio 5 selected');
+              }
             },
             {
               type: 'radio',
               label: 'Radio 6',
               value: 'value6',
+              handler: () => {
+                console.log('Radio 6 selected');
+              }
             },
           ],
           buttons: [
@@ -207,6 +225,9 @@ export default defineComponent({
               type: 'checkbox',
               label: 'Checkbox 1',
               value: 'value1',
+              handler: () => {
+                console.log('Checkbox 1 selected');
+              },
               checked: true,
             },
 
@@ -214,30 +235,45 @@ export default defineComponent({
               type: 'checkbox',
               label: 'Checkbox 2',
               value: 'value2',
+              handler: () => {
+                console.log('Checkbox 2 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 3',
               value: 'value3',
+              handler: () => {
+                console.log('Checkbox 3 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 4',
               value: 'value4',
+              handler: () => {
+                console.log('Checkbox 4 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 5',
               value: 'value5',
+              handler: () => {
+                console.log('Checkbox 5 selected');
+              }
             },
 
             {
               type: 'checkbox',
               label: 'Checkbox 6',
               value: 'value6',
+              handler: () => {
+                console.log('Checkbox 6 selected');
+              }
             },
           ],
           buttons: [