diff --git a/lib/components/base/Toggle.vue b/lib/components/base/Toggle.vue
index aeb01433f..7fe412d88 100644
--- a/lib/components/base/Toggle.vue
+++ b/lib/components/base/Toggle.vue
@@ -3,33 +3,32 @@
     :id="id"
     type="checkbox"
     class="switch stylized-toggle"
+    :disabled="disabled"
     :checked="checked"
     @change="toggle"
   />
 </template>
 
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    modelValue: {
-      type: Boolean,
-    },
-    checked: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['update:modelValue'],
-  methods: {
-    toggle() {
-      if (!this.disabled) {
-        this.$emit('update:modelValue', !this.modelValue)
-      }
-    },
-  },
+<script setup lang="ts">
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    modelValue: boolean
+    checked: boolean
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  }
+)
+
+function toggle() {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue)
+  }
 }
 </script>