1# Radio 2 3The **Radio** component allows users to select from a set of mutually exclusive options. 4 5> **NOTE** 6> 7> Since API version 12, the default indicator type for the **Radio** component changes from **RadioIndicatorType.DOT** to **RadioIndicatorType.TICK**. 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 12## Child Components 13 14Not supported 15 16 17## APIs 18 19Radio(options: RadioOptions) 20 21Creates a radio button. 22 23**Widget capability**: This API can be used in ArkTS widgets since API version 9. 24 25**Atomic service API**: This API can be used in atomic services since API version 11. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29**Parameters** 30 31| Name | Type | Mandatory| Description | 32| ------- | ------------------------------------- | ---- | ------------------ | 33| options | [RadioOptions](#radiooptions) | Yes | Parameters of the radio button.| 34 35## RadioOptions 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39| Name| Type| Mandatory| Description| 40| -------- | -------- | -------- | -------- | 41| value | string | Yes| Current value of the radio button.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 42| group | string | Yes| Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 43| indicatorType<sup>12+</sup> | [RadioIndicatorType](#radioindicatortype12) | No| Indicator type of the radio button. If no value is specified, the value of **RadioIndicatorType.TICK** is used.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 44| indicatorBuilder<sup>12+</sup> | [CustomBuilder](ts-types.md#custombuilder8) | No| Custom component to indicate that the radio button is selected. This custom component is center aligned with the radio button. If this parameter is set to **undefined**, the value of **RadioIndicatorType.TICK** is used as the indicator type.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 45 46## RadioIndicatorType<sup>12+</sup> 47 48**Widget capability**: This API can be used in ArkTS widgets since API version 12. 49 50**Atomic service API**: This API can be used in atomic services since API version 12. 51 52**System capability**: SystemCapability.ArkUI.ArkUI.Full 53 54| Name | Description | 55| --------------- | -------------------------------- | 56| TICK | Default tick icon. | 57| DOT | Default dot icon. | 58| CUSTOM | Custom component.| 59 60## Attributes 61 62In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 63 64### checked 65 66checked(value: boolean) 67 68Sets whether the radio button is selected. 69 70Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 71 72**Widget capability**: This API can be used in ArkTS widgets since API version 9. 73 74**Atomic service API**: This API can be used in atomic services since API version 11. 75 76**System capability**: SystemCapability.ArkUI.ArkUI.Full 77 78**Parameters** 79 80| Name| Type | Mandatory| Description | 81| ------ | ------- | ---- | ------------------------------------ | 82| value | boolean | Yes | Whether the radio button is selected.<br>Default value: **false**| 83 84### radioStyle<sup>10+</sup> 85 86radioStyle(value?: RadioStyle) 87 88Sets the style of the radio button in selected or deselected state. 89 90Since API version 10, this API is supported in ArkTS widgets. 91 92**Atomic service API**: This API can be used in atomic services since API version 11. 93 94**System capability**: SystemCapability.ArkUI.ArkUI.Full 95 96**Parameters** 97 98| Name| Type | Mandatory| Description | 99| ------ | ----------------------------------- | ---- | ---------------------------------- | 100| value | [RadioStyle](#radiostyle10) | No | Style of the radio button in selected or deselected state.| 101 102## contentModifier<sup>12+</sup> 103 104contentModifier(modifier: ContentModifier\<RadioConfiguration>) 105 106Creates a content modifier. 107 108**Atomic service API**: This API can be used in atomic services since API version 12. 109 110**System capability**: SystemCapability.ArkUI.ArkUI.Full 111 112**Parameters** 113 114| Name| Type | Mandatory| Description | 115| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 116| modifier | [ContentModifier\<RadioConfiguration>](#radioconfiguration12) | Yes | Content modifier to apply to the current component.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 117 118## Events 119 120In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 121 122### onChange 123 124onChange(callback: (isChecked: boolean) => void) 125 126Triggered when the selected state of the radio button changes. 127 128**Widget capability**: This API can be used in ArkTS widgets since API version 9. 129 130**Atomic service API**: This API can be used in atomic services since API version 11. 131 132**System capability**: SystemCapability.ArkUI.ArkUI.Full 133 134**Parameters** 135 136| Name | Type | Mandatory| Description | 137| --------- | ------- | ---- | ------------------------------------------------------------ | 138| isChecked | boolean | Yes | Selected state of the radio button.<br>The value **true** means that the radio button changes from unselected to selected, and **false** means that the radio button changes from selected to unselected.| 139 140## RadioStyle<sup>10+</sup> 141 142**Atomic service API**: This API can be used in atomic services since API version 11. 143 144**System capability**: SystemCapability.ArkUI.ArkUI.Full 145 146| Name | Type | Mandatory| Description | 147| ---------------------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 148| checkedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the background when the radio button is selected.<br>Default value: **#007DFF** | 149| uncheckedBorderColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the border when the radio button is deselected.<br>Default value: **#182431** | 150| indicatorColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the indicator when the radio button is selected. Since API version 12, this parameter takes effect only when **indicatorType** is set to **RadioIndicatorType.TICK** or **RadioIndicatorType.DOT**. <br>Default value: **#FFFFFF**| 151 152## RadioConfiguration<sup>12+</sup> 153 154You need a custom class to implement the **ContentModifier** API. 155 156**Atomic service API**: This API can be used in atomic services since API version 12. 157 158**System capability**: SystemCapability.ArkUI.ArkUI.Full 159 160| Name | Type | Read Only| Optional | Description | 161| ------ | ------ |-------------------------------- |-------------------------------- |-------------------------------- | 162| value | string | No| No|Current value of the radio button.| 163| checked | boolean| No| No| Whether the radio button is selected.<br>Default value: **false**| 164| triggerChange |Callback\<boolean>|No|No|Changes the selected state of the radio button.| 165 166 167## Example 168### Example 1 169This example shows how to set the color of the background when the radio button is selected. 170```ts 171// xxx.ets 172@Entry 173@Component 174struct RadioExample { 175 build() { 176 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 177 Column() { 178 Text('Radio1') 179 Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) 180 .radioStyle({ 181 checkedBackgroundColor: Color.Pink 182 }) 183 .height(50) 184 .width(50) 185 .onChange((isChecked: boolean) => { 186 console.log('Radio1 status is ' + isChecked) 187 }) 188 } 189 Column() { 190 Text('Radio2') 191 Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) 192 .radioStyle({ 193 checkedBackgroundColor: Color.Pink 194 }) 195 .height(50) 196 .width(50) 197 .onChange((isChecked: boolean) => { 198 console.log('Radio2 status is ' + isChecked) 199 }) 200 } 201 Column() { 202 Text('Radio3') 203 Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) 204 .radioStyle({ 205 checkedBackgroundColor: Color.Pink 206 }) 207 .height(50) 208 .width(50) 209 .onChange((isChecked: boolean) => { 210 console.log('Radio3 status is ' + isChecked) 211 }) 212 } 213 }.padding({ top: 30 }) 214 } 215} 216``` 217 218### Example 2 219This example shows how to set the indicator of the radio button to an image. 220```ts 221// xxx.ets 222@Entry 223@Component 224struct RadioExample { 225 @Builder 226 indicatorBuilder() { 227 Image($r("app.media.star")) 228 } 229 build() { 230 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 231 Column() { 232 Text('Radio1') 233 Radio({ value: 'Radio1', group: 'radioGroup', 234 indicatorType:RadioIndicatorType.TICK 235 }).checked(true) 236 .height(50) 237 .width(80) 238 .onChange((isChecked: boolean) => { 239 console.log('Radio1 status is ' + isChecked) 240 }) 241 } 242 Column() { 243 Text('Radio2') 244 Radio({ value: 'Radio2', group: 'radioGroup', 245 indicatorType:RadioIndicatorType.DOT 246 }).checked(false) 247 .height(50) 248 .width(80) 249 .onChange((isChecked: boolean) => { 250 console.log('Radio2 status is ' + isChecked) 251 }) 252 } 253 Column() { 254 Text('Radio3') 255 Radio({ value: 'Radio3', group: 'radioGroup', 256 indicatorType:RadioIndicatorType.CUSTOM, 257 indicatorBuilder:()=>{this.indicatorBuilder()} 258 }).checked(false) 259 .height(50) 260 .width(80) 261 .onChange((isChecked: boolean) => { 262 console.log('Radio3 status is ' + isChecked) 263 }) 264 } 265 }.padding({ top: 30 }) 266 } 267} 268``` 269 270### Example 3 271This example shows how to set the style of the radio button in selected or deselected state. 272```ts 273class MyRadioStyle implements ContentModifier<RadioConfiguration> { 274 type: number = 0 275 selectedColor: ResourceColor = Color.Black 276 277 constructor(numberType: number, colorType: ResourceColor) { 278 this.type = numberType 279 this.selectedColor = colorType 280 } 281 282 applyContent(): WrappedBuilder<[RadioConfiguration]> { 283 return wrapBuilder(buildRadio) 284 } 285} 286 287@Builder 288function buildRadio(config: RadioConfiguration) { 289 Row({ space: 30 }) { 290 Circle({ width: 50, height: 50 }) 291 .stroke(Color.Black) 292 .fill(config.checked ? (config.contentModifier as MyRadioStyle).selectedColor : Color.White) 293 Button(config.checked ? "off" : "on") 294 .width(100) 295 .type(config.checked ? (config.contentModifier as MyRadioStyle).type : ButtonType.Normal) 296 .backgroundColor('#2787D9') 297 .onClick(() => { 298 if (config.checked) { 299 config.triggerChange(false) 300 } else { 301 config.triggerChange(true) 302 } 303 }) 304 } 305} 306 307@Entry 308@Component 309struct refreshExample { 310 build() { 311 Column({ space: 50 }) { 312 Row() { 313 Radio({ value: 'Radio1', group: 'radioGroup' }) 314 .contentModifier(new MyRadioStyle(1, '#004AAF')) 315 .checked(false) 316 .width(300) 317 .height(100) 318 } 319 320 Row() { 321 Radio({ value: 'Radio2', group: 'radioGroup' }) 322 .checked(true) 323 .width(300) 324 .height(60) 325 .contentModifier(new MyRadioStyle(2, '#004AAF')) 326 } 327 } 328 } 329} 330``` 331 332
