создал toggle

src/components/kit/KitToggle.vue

@@ -0,0 +1,74 @@
+<template lang="pug">
+  base-input-container(:label="label")
+    label.switch
+      input(type="checkbox", v-model="value")
+      span.slider
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+export default {
+  name: "KitToggle",
+  components: { BaseInputContainer },
+  props: {
+    label: String,
+    modelValue: Object,
+  },
+  computed: {
+    value: {
+      get() {
+        return !!this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", !!value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.switch
+  position: relative
+  display: inline-block
+  width: 60px
+  height: 34px
+  input
+    opacity: 0
+    width: 0
+    height: 0
+
+.slider
+  position: absolute
+  cursor: pointer
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-color: #ccc
+  -webkit-transition: .4s
+  transition: .4s
+  border-radius: 34px
+  &:before
+    position: absolute
+    content: ""
+    height: 26px
+    width: 26px
+    left: 4px
+    bottom: 4px
+    background-color: white
+    -webkit-transition: .4s
+    transition: .4s
+    border-radius: 50%
+
+input:checked + .slider
+  background-color: var(--btn-blue-color)
+
+input:focus + .slider
+  box-shadow: 0 0 1px var(--btn-blue-color)
+
+input:checked + .slider:before
+  -webkit-transform: translateX(26px)
+  -ms-transform: translateX(26px)
+  transform: translateX(26px)
+</style>