diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
index ed99d0137cd965b927013eda6897a0ee0040d528..1eb4e1283c1c98c888489b5dbfa1e75ae33d488d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
@@ -53,45 +53,47 @@ CheckboxGroup( group?: string )
 @Entry
 @Component
 struct CheckboxExample {
-
   build() {
     Scroll() {
       Column() {
-          Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){
-             CheckboxGroup({group : 'checkboxGroup'})
-          	   .selectedColor(0xed6f21)
-               .onChange((itemName:CheckboxGroupResult) => {
-                console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
-          	   })
-             Text('select all').fontSize(20)
-           }
-          Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){
-             Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
-                .select(true)
-                .selectedColor(0x39a2db)
-                .onChange((value: boolean) => {
-                 console.info('Checkbox1 change is' + value)
-                })
-              Text('Checkbox1').fontSize(20)
-            }
-         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){
-            Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
-                .select(false)
-                .selectedColor(0x39a2db)
-                .onChange((value: boolean) => {
-                 console.info('Checkbox2 change is' + value)
-                })
-              Text('Checkbox2').fontSize(20)
-            }
-         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }){
-            Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
-              .select(true)
-              .selectedColor(0x39a2db)
-              .onChange((value: boolean) => {
-               console.info('Checkbox3 change is' + value)
-              })
-            Text('Checkbox3').fontSize(20)
-         }
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          CheckboxGroup({ group: 'checkboxGroup' })
+            .selectedColor(0xed6f21)
+            .onChange((itemName: CheckboxGroupResult) => {
+              console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
+            })
+          Text('select all').fontSize(20)
+        }
+
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
+            .select(true)
+            .selectedColor(0x39a2db)
+            .onChange((value: boolean) => {
+              console.info('Checkbox1 change is' + value)
+            })
+          Text('Checkbox1').fontSize(20)
+        }
+
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
+            .select(false)
+            .selectedColor(0x39a2db)
+            .onChange((value: boolean) => {
+              console.info('Checkbox2 change is' + value)
+            })
+          Text('Checkbox2').fontSize(20)
+        }
+
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
+            .select(true)
+            .selectedColor(0x39a2db)
+            .onChange((value: boolean) => {
+              console.info('Checkbox3 change is' + value)
+            })
+          Text('Checkbox3').fontSize(20)
+        }
       }
     }
   }