diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index c7f9790..9bda937 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -164,7 +164,7 @@
     },
     select(value: unknown) {
       if (disabled) return;
-      dispatch("updateValue", { value });
+      dispatch("change", value);
     },
   });
   setContext(LISTBOX_CONTEXT_NAME, api);
diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
index cd8992f..38b5422 100644
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -70,7 +70,7 @@
         (option) => option.propsRef.value === nextValue
       )?.propsRef;
       if (nextOption?.disabled) return false;
-      dispatch("updateValue", nextValue);
+      dispatch("change", nextValue);
       return true;
     },
     registerOption(action: Option) {
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
index c3ef102..2094dfb 100644
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -18,7 +18,7 @@
   $: switchStore = $api?.switchStore;
 
   function toggle() {
-    dispatch("updateValue", !checked);
+    dispatch("change", !checked);
   }
 
   function handleClick(event: MouseEvent) {
diff --git a/src/lib/components/tabs/TabGroup.svelte b/src/lib/components/tabs/TabGroup.svelte
index f79707a..b83cf9b 100644
--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -61,7 +61,7 @@
     setSelectedIndex(index: number) {
       if (selectedIndex === index) return;
       selectedIndex = index;
-      dispatch("updateValue", index);
+      dispatch("change", index);
     },
     registerTab(tab: typeof tabs[number]) {
       if (!tabs.includes(tab)) tabs = [...tabs, tab];
diff --git a/src/routes/listbox/_PeopleList.svelte b/src/routes/listbox/_PeopleList.svelte
index 5a0cb1d..4f0edea 100644
--- a/src/routes/listbox/_PeopleList.svelte
+++ b/src/routes/listbox/_PeopleList.svelte
@@ -36,9 +36,9 @@
   <div class="space-y-1">
     <Listbox
       value={active}
-      on:updateValue={(event) => {
-        console.log("value:", event.detail.value);
-        active = event.detail.value;
+      on:change={(event) => {
+        console.log("value:", event.detail);
+        active = event.detail;
       }}
     >
       <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">
diff --git a/src/routes/listbox/listbox-with-pure-tailwind.svelte b/src/routes/listbox/listbox-with-pure-tailwind.svelte
index 615afeb..60b68f2 100644
--- a/src/routes/listbox/listbox-with-pure-tailwind.svelte
+++ b/src/routes/listbox/listbox-with-pure-tailwind.svelte
@@ -7,8 +7,6 @@
     ListboxOptions,
   } from "$lib";
 
-  import { onMount } from "svelte";
-
   function classNames(
     ...classes: (false | null | undefined | string)[]
   ): string {
@@ -36,8 +34,8 @@
     <div class="space-y-1">
       <Listbox
         value={active}
-        on:updateValue={(event) => {
-          active = event.detail.value;
+        on:change={(event) => {
+          active = event.detail;
         }}
       >
         <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">
diff --git a/src/routes/radio-group/radio-group.svelte b/src/routes/radio-group/radio-group.svelte
index 400c292..7ab9146 100644
--- a/src/routes/radio-group/radio-group.svelte
+++ b/src/routes/radio-group/radio-group.svelte
@@ -20,15 +20,12 @@
       description: "You are the only one able to access this project",
     },
   ];
-  let active;
+  let active: typeof access[number];
 </script>
 
 <div class="p-12 max-w-xl">
   <a href="/">Link before</a>
-  <RadioGroup
-    value={active}
-    on:updateValue={(event) => (active = event.detail)}
-  >
+  <RadioGroup value={active} on:change={(event) => (active = event.detail)}>
     <fieldset class="space-y-4">
       <legend>
         <h2 class="text-xl">Privacy setting</h2>
diff --git a/src/routes/switch/switch-with-pure-tailwind.svelte b/src/routes/switch/switch-with-pure-tailwind.svelte
index 6f85671..3513655 100644
--- a/src/routes/switch/switch-with-pure-tailwind.svelte
+++ b/src/routes/switch/switch-with-pure-tailwind.svelte
@@ -15,7 +15,7 @@
     <Switch
       as="button"
       checked={state}
-      on:updateValue={(event) => (state = event.detail)}
+      on:change={(event) => (state = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",
diff --git a/src/routes/tabs/tabs-with-pure-tailwind.svelte b/src/routes/tabs/tabs-with-pure-tailwind.svelte
index a21e063..c15a753 100644
--- a/src/routes/tabs/tabs-with-pure-tailwind.svelte
+++ b/src/routes/tabs/tabs-with-pure-tailwind.svelte
@@ -33,7 +33,7 @@
     <Switch
       as="button"
       checked={manual}
-      on:updateValue={(event) => (manual = event.detail)}
+      on:change={(event) => (manual = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",