diff --git a/docs/example/Menu/demos/Event.tsx b/docs/example/Menu/demos/Event.tsx
index af1f82b7..eb80cff2 100644
--- a/docs/example/Menu/demos/Event.tsx
+++ b/docs/example/Menu/demos/Event.tsx
@@ -7,9 +7,12 @@ import { Divider, Menu, MenuItem } from '@banana-ui/react';
 import React from 'react';
 
 export default function BasicUsage() {
-  const onSelect = (event: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    console.log(event.detail.item.value);
+  const onSelect = (
+    event: CustomEvent<{
+      item: string;
+    }>,
+  ) => {
+    console.log(event.detail.item);
   };
 
   return (
diff --git a/docs/example/Stepper/demos/stepChange.tsx b/docs/example/Stepper/demos/stepChange.tsx
index 51d515a8..2e38c405 100644
--- a/docs/example/Stepper/demos/stepChange.tsx
+++ b/docs/example/Stepper/demos/stepChange.tsx
@@ -15,7 +15,7 @@ export default function StepChange() {
         controlled
         onChange={(e) => {
           if (e.composedPath()[0] === stepper.current) {
-            const event = e as CustomEvent<{ value: string }>;
+            const event = e;
 
             Message.info({ content: `current stepper value：${event.detail.value}` });
             setValue(Number(event.detail.value));
diff --git a/packages/banana-cli/templates/banana-react/index.js b/packages/banana-cli/templates/banana-react/index.js
index 4023102b..2ae17112 100644
--- a/packages/banana-cli/templates/banana-react/index.js
+++ b/packages/banana-cli/templates/banana-react/index.js
@@ -6,17 +6,13 @@ const teamplete = (componentName, formField) => `import { createComponent } from
 import { B${toCamelCase(componentName)} } from '@banana-ui/banana';
 import * as React from 'react';
 
+const events = ${formField ? "{onChange: 'change'}" : '{}'}
+
 export const ${toCamelCase(componentName)} = createComponent({
   tagName: 'b-${componentName}',
   react: React,
   elementClass: B${toCamelCase(componentName)},
-  ${
-    formField
-      ? `events: {
-    onChange: 'change',
-  },`
-      : ''
-  }
+  events
 });`;
 
 module.exports = teamplete;
diff --git a/packages/banana-react/src/carousel/index.ts b/packages/banana-react/src/carousel/index.ts
index a81df168..f2541945 100644
--- a/packages/banana-react/src/carousel/index.ts
+++ b/packages/banana-react/src/carousel/index.ts
@@ -1,12 +1,18 @@
 import { BCarousel } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      currentIndex: number;
+    }>
+  >,
+};
+
 export const Carousel = createComponent({
   tagName: 'b-carousel',
   react: React,
   elementClass: BCarousel,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/checkbox/index.ts b/packages/banana-react/src/checkbox/index.ts
index e8842b35..09f0ce7a 100644
--- a/packages/banana-react/src/checkbox/index.ts
+++ b/packages/banana-react/src/checkbox/index.ts
@@ -1,12 +1,18 @@
 import { BCheckbox } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      checked: boolean;
+    }>
+  >,
+};
+
 export const Checkbox = createComponent({
   tagName: 'b-checkbox',
   react: React,
   elementClass: BCheckbox,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/collapse/index.ts b/packages/banana-react/src/collapse/index.ts
index 14a6341f..c9725325 100644
--- a/packages/banana-react/src/collapse/index.ts
+++ b/packages/banana-react/src/collapse/index.ts
@@ -2,14 +2,16 @@ import { BCollapse } from '@banana-ui/banana';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onShow: 'show',
+  onAfterShow: 'afterShow',
+  onHide: 'hide',
+  onAfterHide: 'afterHide',
+};
+
 export const Collapse = createComponent({
   tagName: 'b-collapse',
   react: React,
   elementClass: BCollapse,
-  events: {
-    onShow: 'show',
-    onAfterShow: 'afterShow',
-    onHide: 'hide',
-    onAfterHide: 'afterHide',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/countdown/index.ts b/packages/banana-react/src/countdown/index.ts
index 9ad5cb5e..0fb17ee3 100644
--- a/packages/banana-react/src/countdown/index.ts
+++ b/packages/banana-react/src/countdown/index.ts
@@ -1,13 +1,19 @@
 import { BCountdown } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      timeLeft: number;
+    }>
+  >,
+  onFinish: 'finish',
+};
+
 export const Countdown = createComponent({
   tagName: 'b-countdown',
   react: React,
   elementClass: BCountdown,
-  events: {
-    onChange: 'change',
-    onFinish: 'finish',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/input/index.ts b/packages/banana-react/src/input/index.ts
index 5787756c..9966390c 100644
--- a/packages/banana-react/src/input/index.ts
+++ b/packages/banana-react/src/input/index.ts
@@ -1,12 +1,18 @@
 import { BInput } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: string;
+    }>
+  >,
+};
+
 export const Input = createComponent({
   tagName: 'b-input',
   react: React,
   elementClass: BInput,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/menu/index.ts b/packages/banana-react/src/menu/index.ts
index c2623e98..cc3b1c91 100644
--- a/packages/banana-react/src/menu/index.ts
+++ b/packages/banana-react/src/menu/index.ts
@@ -1,12 +1,18 @@
 import { BMenu } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onSelect: 'select' as EventName<
+    CustomEvent<{
+      item: string;
+    }>
+  >,
+};
+
 export const Menu = createComponent({
   tagName: 'b-menu',
   react: React,
   elementClass: BMenu,
-  events: {
-    onSelect: 'select',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/modal/index.ts b/packages/banana-react/src/modal/index.ts
index 0d40ab2d..9654d485 100644
--- a/packages/banana-react/src/modal/index.ts
+++ b/packages/banana-react/src/modal/index.ts
@@ -2,12 +2,14 @@ import { BModal } from '@banana-ui/banana';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onCancel: 'cancel',
+  onOk: 'ok',
+};
+
 export const Modal = createComponent({
   tagName: 'b-modal',
   react: React,
   elementClass: BModal,
-  events: {
-    onCancel: 'cancel',
-    onOk: 'ok',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/overlay/index.ts b/packages/banana-react/src/overlay/index.ts
index fdc9f668..99d8d0ff 100644
--- a/packages/banana-react/src/overlay/index.ts
+++ b/packages/banana-react/src/overlay/index.ts
@@ -2,11 +2,13 @@ import { BOverlay } from '@banana-ui/banana';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onClose: 'close',
+};
+
 export const Overlay = createComponent({
   react: React,
   tagName: 'b-overlay',
   elementClass: BOverlay,
-  events: {
-    onClose: 'close',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/radio-group/index.ts b/packages/banana-react/src/radio-group/index.ts
index e97aff3e..e45118d9 100644
--- a/packages/banana-react/src/radio-group/index.ts
+++ b/packages/banana-react/src/radio-group/index.ts
@@ -1,12 +1,18 @@
 import { BRadioGroup } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: string;
+    }>
+  >,
+};
+
 export const RadioGroup = createComponent({
   tagName: 'b-radio-group',
   react: React,
   elementClass: BRadioGroup,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/rating/index.ts b/packages/banana-react/src/rating/index.ts
index eb5a4962..c5a6272a 100644
--- a/packages/banana-react/src/rating/index.ts
+++ b/packages/banana-react/src/rating/index.ts
@@ -1,12 +1,18 @@
 import { BRating } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: number;
+    }>
+  >,
+};
+
 export const Rating = createComponent({
   tagName: 'b-rating',
   react: React,
   elementClass: BRating,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/select/index.ts b/packages/banana-react/src/select/index.ts
index d2a917f0..50a18957 100644
--- a/packages/banana-react/src/select/index.ts
+++ b/packages/banana-react/src/select/index.ts
@@ -1,12 +1,18 @@
 import { BSelect } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: string | string[];
+    }>
+  >,
+};
+
 export const Select = createComponent({
   tagName: 'b-select',
   react: React,
   elementClass: BSelect,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });
diff --git a/packages/banana-react/src/stepper/index.ts b/packages/banana-react/src/stepper/index.ts
index 1466c69c..990c2808 100644
--- a/packages/banana-react/src/stepper/index.ts
+++ b/packages/banana-react/src/stepper/index.ts
@@ -1,12 +1,18 @@
 import { BStepper } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: number;
+    }>
+  >,
+};
+
 export const Stepper = createComponent({
   tagName: 'b-stepper',
   react: React,
   elementClass: BStepper,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });
diff --git a/packages/banana/src/menu/index.ts b/packages/banana/src/menu/index.ts
index b2e243e2..22f97a9f 100644
--- a/packages/banana/src/menu/index.ts
+++ b/packages/banana/src/menu/index.ts
@@ -25,7 +25,7 @@ export default class BMenu extends LitElement {
       return;
     }
 
-    this.dispatchEvent(new CustomEvent('select', { detail: { item } }));
+    this.dispatchEvent(new CustomEvent('select', { detail: { item: item.value } }));
   }
 
   // todo...
diff --git a/packages/banana/src/stepper/index.ts b/packages/banana/src/stepper/index.ts
index e78d3ed0..4c01fbae 100644
--- a/packages/banana/src/stepper/index.ts
+++ b/packages/banana/src/stepper/index.ts
@@ -116,7 +116,7 @@ export default class BStepper extends LitElement implements BananaFormElement {
     }
 
     const eventOptions = { bubbles: false, cancelable: false, composed: true, detail: { value: result } };
-    this.dispatchEvent(new CustomEvent('change', eventOptions));
+    this.dispatchEvent(new CustomEvent<{ value: number }>('change', eventOptions));
   }
 
   plus() {