diff --git a/docs/components/checkbox/index.md b/docs/components/checkbox/index.md
index a0acd62a70a7c26b904ba2dda2a328de4fdfa547..035224a437642bc4ad4f117e8224fb227d201f98 100644
--- a/docs/components/checkbox/index.md
+++ b/docs/components/checkbox/index.md
@@ -8,21 +8,45 @@
 2. 单独使用可以表示在两个状态之间切换，可以和提交操作结合。
 
 ### 基本用法
+:::demo
 
-<d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
-<d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
+```vue
+<template>
+  <d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
+  <d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
+</template>
 
-```html
-<d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
-<d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const checked = ref(true)
+    const unchecked = ref(false)
+    return {
+      checked,
+      unchecked
+    }
+  }
+})
+</script>
 ```
+:::
+
 
 #### 使用 CheckboxGroup
-<d-checkbox-group v-model="checkedValues" label="爱好">
-  <d-checkbox label="篮球" value="basketball" />
-  <d-checkbox label="足球" value="football" />
-</d-checkbox-group>
-<div>{{ checkedValues.reduce((prev, current) => `${current} ${prev}`, '') }}</div>
+:::demo
+
+```vue
+<template>
+  <d-checkbox-group v-model="checkedValues" label="爱好">
+    <d-checkbox label="篮球" value="basketball" />
+    <d-checkbox label="足球" value="football" />
+  </d-checkbox-group>
+  <div>
+    {{ checkedValues.reduce((prev, current) => `${current} ${prev}`, '') }}
+  </div>
+</template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
@@ -39,4 +63,6 @@ export default defineComponent({
     }
   }
 })
-</script>
\ No newline at end of file
+</script>
+```
+:::
\ No newline at end of file