1# Checkbox 2 3The **\<Checkbox>** component is used to enable or disable an option. 4 5> **NOTE** 6> 7> Since API version 11, the default style of the **\<Checkbox>** component is changed from rounded square to circle. 8> 9> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 10 11## Child Components 12 13Not supported 14 15## APIs 16 17Checkbox(options?: CheckboxOptions) 18 19Creates a check box. 20 21**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name | Type | Mandatory| Description | 28| ------- | ------------------------------------------- | ---- | ------------------ | 29| options | [CheckboxOptions](#checkboxoptions) | No | Check box parameters.| 30 31## CheckboxOptions 32 33| Name | Type| Mandatory | Description| 34| --------| --------| ------ | -------- | 35| name | string | No| Name of the check box.| 36| group | string | No| Group name of the check box (that is, the name of the check box group to which the check box belongs).<br>**NOTE**<br>For the settings to take effect, this parameter must be used with the [CheckboxGroup](ts-basic-components-checkboxgroup.md) component.| 37 38## Attributes 39 40In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 41 42 43| Name | Type| Description| 44| ------------- | ------- | -------- | 45| select | boolean | Whether the check box is selected.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 46| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_activated')**<br>An invalid value is handled as the default value.<br>Since API version 9, this API is supported in ArkTS widgets.| 47| unselectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the check box when it is not selected.| 48| mark<sup>10+</sup> | [MarkStyle](#markstyle10) | Internal icon style of the check box.| 49| shape<sup>11+</sup> | [CheckBoxShape](#checkboxshape11) | Shape of the check box.<br>Default value: **CheckBoxShape.CIRCLE**| 50 51## Events 52 53In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported. 54 55| Name | Description | 56| -------------------------------------------- | ------------------------------------------------------------ | 57| onChange(callback: (value: boolean) => void) | Triggered when the selected 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.<br>Since API version 9, this API is supported in ArkTS widgets.| 58 59## MarkStyle<sup>10+</sup> 60 61| Name | Type | Mandatory| Default Value | Description | 62| ----------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------------------------ | 63| strokeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Color of the internal mark. | 64| size | [Length](ts-types.md#length) | No | - | Size of the internal mark, in vp. The default size is the same as the width of the check box.<br>This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| 65| strokeWidth | [Length](ts-types.md#length) | No | 2 | Stroke width of the internal mark, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| 66 67## CheckBoxShape<sup>11+</sup> 68 69| Name | Value| Description | 70| -------------- | ------ | -------- | 71| CIRCLE | 0 | Circle. | 72| ROUNDED_SQUARE | 1 | Rounded square.| 73 74## Example 75 76### Example 1 77 78```ts 79// xxx.ets 80@Entry 81@Component 82struct CheckboxExample { 83 84 build() { 85 Row() { 86 Checkbox({name: 'checkbox1', group: 'checkboxGroup'}) 87 .select(true) 88 .selectedColor(0xed6f21) 89 .shape(CheckBoxShape.ROUNDED_SQUARE) 90 .onChange((value: boolean) => { 91 console.info('Checkbox1 change is'+ value) 92 }) 93 Checkbox({name: 'checkbox2', group: 'checkboxGroup'}) 94 .select(false) 95 .selectedColor(0x39a2db) 96 .shape(CheckBoxShape.ROUNDED_SQUARE) 97 .onChange((value: boolean) => { 98 console.info('Checkbox2 change is'+ value) 99 }) 100 } 101 } 102} 103``` 104 105 106 107 108### Example 2 109 110```ts 111// xxx.ets 112@Entry 113@Component 114struct Index { 115 116 build() { 117 Row() { 118 Column() { 119 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 120 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 121 .selectedColor(0x39a2db) 122 .shape(CheckBoxShape.ROUNDED_SQUARE) 123 .onChange((value: boolean) => { 124 console.info('Checkbox1 change is'+ value) 125 }) 126 .mark({ 127 strokeColor:Color.Black, 128 size: 50, 129 strokeWidth: 5 130 }) 131 .unselectedColor(Color.Red) 132 .width(30) 133 .height(30) 134 Text('Checkbox1').fontSize(20) 135 } 136 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 137 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 138 .selectedColor(0x39a2db) 139 .shape(CheckBoxShape.ROUNDED_SQUARE) 140 .onChange((value: boolean) => { 141 console.info('Checkbox2 change is' + value) 142 }) 143 .width(30) 144 .height(30) 145 Text('Checkbox2').fontSize(20) 146 } 147 } 148 .width('100%') 149 } 150 .height('100%') 151 } 152} 153``` 154 155 156 157 158### Example 3 159 160```ts 161// xxx.ets 162@Entry 163@Component 164struct CheckboxExample { 165 166 build() { 167 Row() { 168 Checkbox({name: 'checkbox1', group: 'checkboxGroup'}) 169 .select(true) 170 .shape(CheckBoxShape.CIRCLE) 171 .onChange((value: boolean) => { 172 console.info('Checkbox1 change is'+ value) 173 }) 174 Checkbox({name: 'checkbox2', group: 'checkboxGroup'}) 175 .select(false) 176 .shape(CheckBoxShape.CIRCLE) 177 .onChange((value: boolean) => { 178 console.info('Checkbox2 change is'+ value) 179 }) 180 } 181 } 182} 183``` 184 185 186 187
