diff --git a/formkit.config.ts b/formkit.config.ts
index b7fe9de..a4cd4a1 100644
--- a/formkit.config.ts
+++ b/formkit.config.ts
@@ -15,7 +15,6 @@ import FormKitToggle from "./src/headlessui-switch.vue";
 
 const library = createLibraryPlugin({
   text, form, submit, group, checkbox, range, list, number, textarea,
-
   mytoggle: createInput(FormKitToggle)
 })
 const validation = createValidationPlugin(defaultRules)
diff --git a/src/headlessui-switch.vue b/src/headlessui-switch.vue
index 9acca01..5424162 100644
--- a/src/headlessui-switch.vue
+++ b/src/headlessui-switch.vue
@@ -1,12 +1,30 @@
+<script lang="ts">
+import { FormKitFrameworkContext } from '@formkit/core';
+import type { FormKitInputs } from '@formkit/inputs';
+
+declare module '@formkit/inputs' {
+  // https://formkit.com/essentials/custom-inputs#typescript-support
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    // This key and the `type` should match:
+    'mytoggle': {
+      // Define your input `type`:
+      type: 'mytoggle',
+      someProp: string,
+    }
+  }
+}
+</script>
+
 <script setup lang="ts">
 // https://www.ajahandideh.com/articles/formkit-custom-toggle
 // https://headlessui.com/v1/vue
 import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
 import { computed } from 'vue';
 
-const props = defineProps({
-  context: Object,
-});
+const props = defineProps<{
+  context: FormKitFrameworkContext;
+}>();
+
 
 const value = computed({
   get: () => {
@@ -17,15 +35,12 @@ const value = computed({
   },
 });
 
-const label = props.context?.label;
-const name = props.context?.name;
-
 </script>
 
 <template>
-  <SwitchGroup>
+  <SwitchGroup data-switch-group-template-root>
     <div class="flex items-center">
-      <SwitchLabel class="mr-4">{{ label }}</SwitchLabel>
+      <SwitchLabel class="mr-4">{{ context?.label }}</SwitchLabel>
       <Switch
         v-model="value"
         :class='value ? "bg-blue-600" : "bg-gray-200"'