diff --git a/en/application-dev/reference/arkui-ts/figures/checkbox.gif b/en/application-dev/reference/arkui-ts/figures/checkbox.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6ae7061dcc7106fdd172e4008a4d82cb5568ab44
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/checkbox.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/checkboxgroup.gif b/en/application-dev/reference/arkui-ts/figures/checkboxgroup.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5d4c6e059f96d3f021f100ffb7c9899630f982ee
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/checkboxgroup.gif differ
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
new file mode 100644
index 0000000000000000000000000000000000000000..eb073ee796e4815caa38f610fc7e9f7111476c2c
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
@@ -0,0 +1,69 @@
+# Checkbox
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **\<Checkbox>** component is used to enable or disable an option.
+
+## Required Permissions
+
+None
+
+## Child Components
+
+None
+
+## APIs
+
+Checkbox( name?: string,  group?: string )
+
+- Parameters
+  | Name | Type| Mandatory | Default Value| Description|
+  | --------| --------| ------ | -------- | -------- |
+  | name    | string | No| - | Name of the check box.|
+  | group   | string | No| - | Group name of the check box.|
+
+
+## Attributes
+
+
+| Name         | Type| Default Value| Description|
+| ------------- | ------- | ------ | -------- |
+| select        | bool   | false | Whether the check box is selected.|
+| selectedColor | Color | - | Color of the check box when it is selected.|
+
+## Events
+
+| Name     | Description| 
+| ----------| -------- |
+|onChange(callback: (value: boolean) => void) | Triggered when the selection status of the check box changes.<br>- The value **true** means that the check box is selected.<br>- The value **false** means that the check box is not selected.| 
+ 
+## Example
+
+```
+@Entry'
+@Component
+struct CheckboxExample {
+
+  build() {
+    Row() {
+      Checkbox({name: 'checkbox1',  group: 'checkboxGroup'})
+        .select(true)
+        .selectedColor(0xed6f21)
+        .onChange((value: boolean) => {
+          console.info('Checkbox1 change is'+ value)
+        })
+      Checkbox({name: 'checkbox2',  group: 'checkboxGroup'})
+        .select(false)
+        .selectedColor(0x39a2db)
+        .onChange((value: boolean) => {
+          console.info('Checkbox2 change is'+ value)
+        })
+    }
+  }
+}
+```
+
+
+![](figures/checkbox.gif)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
new file mode 100644
index 0000000000000000000000000000000000000000..c84392d085212ca08859ce0d641276f41a4a5e59
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
@@ -0,0 +1,87 @@
+# CheckboxGroup
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<CheckboxGroup>** component is used to select or deselect all check boxes in a group.
+
+## Required Permissions
+
+None
+
+## Child Components
+
+None
+
+## APIs
+
+CheckboxGroup( group?: string )
+
+Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group.
+
+- Parameters
+  | Name| Type| Mandatory| Default Value| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | group | string | No| - | Group name.|
+
+
+## Attributes
+
+| Name| Type| Default Value| Description| 
+| -------- | -------- | -------- | -------- |
+| selectAll | bool | false | Whether to select all.| 
+| selectedColor | Color | - | Color of the selected check box.| 
+
+## Events
+
+| Name| Description| 
+| -------- | -------- |
+| onChange (callback: (names: Array&lt;string&gt;, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.<br>- **names**: names of all selected check boxes in the group.<br>- **status**: selection status.| 
+
+- SelectStatus enums
+  | Name | Description| 
+  | ----- | -------------------- |
+  | All   | All check boxes in the group are selected.|
+  | Part  | Some check boxes in the group are selected.|
+  | None  | None of the check boxes in the group are selected.|
+
+
+## Example
+
+```
+@Entry
+@Component
+struct CheckboxExample {
+
+  build() {
+    Scroll() {
+      Column() {
+        CheckboxGroup({group : 'checkboxGroup'})
+          .selectedColor(0xed6f21)
+          .onChange((itemName:CheckboxGroupResult) => {
+            console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
+          })
+        Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
+          .select(true)
+          .selectedColor(0x39a2db)
+          .onChange((value: boolean) => {
+            console.info('Checkbox1 change is' + value)
+          })
+        Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
+          .select(false)
+          .selectedColor(0x39a2db)
+          .onChange((value: boolean) => {
+            console.info('Checkbox2 change is' + value)
+          })
+        Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
+          .select(true)
+          .selectedColor(0x39a2db)
+          .onChange((value: boolean) => {
+            console.info('Checkbox3 change is' + value)
+          })
+      }
+    }
+  }
+}
+```
+![](figures/checkboxgroup.gif)