add docs

Signed-off-by: Nesterzhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md

+# 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)

en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md

+# 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)