Changes in CheckBox:

- add disabled state for CheckBox;
- label for CheckBox

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
-      this.$emit('click', this.checked)
+      if (!this.disabled) {
+        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>