diff --git a/src/routes/radio-group/radio-group.svelte b/src/routes/radio-group/radio-group.svelte
index 229bc09..ee41ac0 100644
--- a/src/routes/radio-group/radio-group.svelte
+++ b/src/routes/radio-group/radio-group.svelte
@@ -25,7 +25,7 @@
 
 <div class="p-12 max-w-xl">
   <a href="/">Link before</a>
-  <RadioGroup value={active} on:change={(event) => (active = event.detail)}>
+  <RadioGroup bind:value={active}>
     <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 e3499ae..0d8ade4 100644
--- a/src/routes/switch/switch-with-pure-tailwind.svelte
+++ b/src/routes/switch/switch-with-pure-tailwind.svelte
@@ -14,8 +14,7 @@
 
     <Switch
       as="button"
-      checked={state}
-      on:change={(event) => (state = event.detail)}
+      bind:checked={state}
       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 015a871..f88ce9e 100644
--- a/src/routes/tabs/tabs-with-pure-tailwind.svelte
+++ b/src/routes/tabs/tabs-with-pure-tailwind.svelte
@@ -32,8 +32,7 @@
 
     <Switch
       as="button"
-      checked={manual}
-      on:change={(event) => (manual = event.detail)}
+      bind:checked={manual}
       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",