diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index 823ca3d4..ac579b6e 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -1,7 +1,7 @@
 <template>
   <el-checkbox
     :class="computedClasses"
-    :value="value"
+    v-model="model"
     :label="label"
     :disabled="disabled"
     :border="border"
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
 import { CheckboxSize } from './consts'
 
@@ -65,6 +65,19 @@ export default class SCheckbox extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly indeterminate!: boolean
 
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: string | number | boolean): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: string | number | boolean): void {
+    this.$emit('input', value)
+    this.$emit('change', value)
+  }
+
   get computedSize (): string {
     if (this.size === CheckboxSize.BIG ||
       !(Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 7556b584..2c53d75f 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -11,17 +11,25 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SCheckbox, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  components: { SCheckbox },
+  template: `<div class="flex" style="flex: 1; flex-direction: column;">
                <s-checkbox
+                 v-model="vModelValue"
                  :disabled="disabled"
                  :border="border"
                  :size="size"
                  :label="label"
-                 @change="hangleChange"
+                 @change="(value) => changeValue = value"
                >
                </s-checkbox>
-             </s-row>`,
+               <span style="margin-top: 20px;">
+                 v-model="{{ vModelValue }}", @change="{{ changeValue }}"
+               </span>
+             </div>`,
+  data: () => ({
+    vModelValue: true,
+    changeValue: true
+  }),
   props: {
     disabled: {
       default: boolean('Disabled', false)
@@ -35,9 +43,6 @@ export const configurable = () => ({
     size: {
       default: select('Size', Object.values(CheckboxSize), CheckboxSize.MEDIUM)
     }
-  },
-  methods: {
-    hangleChange: (checked: boolean) => console.log(checked ? 'checked!' : 'unchecked!')
   }
 })
 
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 40048b78..685667b9 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -52,6 +52,16 @@
     height: 20px;
   }
 
+  &more-small {
+    position: absolute;
+    background-image: url('~@/assets/icons/more-horizontal.svg');
+    background-size: contain;
+    width: 12px;
+    height: 12px;
+    top: -6px;
+    left: -6px;
+  }
+
   &back-small {
     position: absolute;
     background-image: url('~@/assets/icons/arrow-left.svg');