Changes in CheckBox:

- add disabled state for CheckBox;
- label for CheckBox

src/assets/images/checkbox_checked_disabled.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="17" height="17" rx="2.5" fill="#DFE8F3" stroke="#C8D4E3"/>
+<g filter="url(#filter0_d)">
+<path d="M15.75 5.25L6.75 14.25L2.625 10.125L3.6825 9.0675L6.75 12.1275L14.6925 4.1925L15.75 5.25Z" fill="#A2B1C6"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0.625" y="3.1925" width="17.125" height="14.0575" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.164706 0 0 0 0 0.247059 0 0 0 0 0.372549 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

src/components/CheckBox.vue

@@ -1,12 +1,20 @@
 <template>
-  <div class="checkbox-container" @click.stop="onClick">
+  <div
+    :class="['checkbox-container', { 'checked': checked }, {'disabled': disabled}]"
+    @click.stop="onClick"
+  >
     <div v-show="!checked" class="unchecked" />
     <img
-      v-show="checked"
+      v-show="checked && !disabled"
       :src="theme === 'light'
         ? require('@/assets/images/checkbox_checked_light.svg')
         : require('@/assets/images/checkbox_checked.svg')"
     />
+    <img
+      v-show="checked && disabled"
+      :src="require('@/assets/images/checkbox_checked_disabled.svg')"
+    />
+    <span v-if="label" class="label">{{ label }}</span>
   </div>
 </template>
 
@@ -26,6 +34,16 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
@@ -35,8 +53,10 @@ export default {
   },
   methods: {
     onClick () {
-      this.checked = !this.checked
+      if (!this.disabled) {
-      this.$emit('click', this.checked)
+        this.checked = !this.checked
+        this.$emit('click', this.checked)
+      }
     }
   }
 }
@@ -44,7 +64,7 @@ export default {
 
 <style scoped>
 .checkbox-container {
-  display: inline-block;
+  display: inline-flex;
   cursor: pointer;
 }
 .unchecked {
@@ -62,4 +82,24 @@ export default {
 img {
     display: block;
 }
+.label {
+  margin-left: 6px;
+  color: var(--color-text-base);
+}
+.checked .label {
+  color: var(--color-text-active);
+}
+
+.disabled.checkbox-container {
+  cursor: default;
+}
+
+.disabled .label {
+  color: var(--color-text-light-2);
+}
+
+.disabled .unchecked,
+.disabled .unchecked:hover {
+  background-color:  var(--color-bg-light-2);
+}
 </style>