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 | Value | Description | 55| --------------- | -------------------------------- | -------------------------------- | 56| TICK | 0 | Default tick icon. | 57| DOT | 1 | Default dot icon. | 58| CUSTOM | 2 | Custom component.| 59 60## Attributes 61 62In addition to the [universal attributes](ts-component-general-attributes.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). 71Since API version 18, this attribute supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 72 73**Widget capability**: This API can be used in ArkTS widgets since API version 9. 74 75**Atomic service API**: This API can be used in atomic services since API version 11. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79**Parameters** 80 81| Name| Type | Mandatory| Description | 82| ------ | ------- | ---- | ------------------------------------------------------------ | 83| value | boolean | Yes | Whether the radio button is selected.<br>Default value: **false**<br>**true**: The radio button is selected. **false**: The radio button is not selected.| 84 85### checked<sup>18+</sup> 86 87checked(isChecked: Optional\<boolean>) 88 89Sets whether the radio button is selected. Compared to [checked](#checked), this API supports the **undefined** type for the **isChecked** parameter. 90 91This attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md). 92Since API version 18, this attribute supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 93 94**Widget capability**: This API can be used in ArkTS widgets since API version 18. 95 96**Atomic service API**: This API can be used in atomic services since API version 18. 97 98**System capability**: SystemCapability.ArkUI.ArkUI.Full 99 100**Parameters** 101 102| Name | Type | Mandatory| Description | 103| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 104| isChecked | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | Yes | Whether the radio button is selected.<br>If **isChecked** is set to **undefined**, the default value **false** is used.<br>**true**: The radio button is selected. **false**: The radio button is not selected.| 105 106### radioStyle<sup>10+</sup> 107 108radioStyle(value?: RadioStyle) 109 110Sets the style of the radio button in selected or deselected state. 111 112Since API version 10, this API is supported in ArkTS widgets. 113 114**Atomic service API**: This API can be used in atomic services since API version 11. 115 116**System capability**: SystemCapability.ArkUI.ArkUI.Full 117 118**Parameters** 119 120| Name| Type | Mandatory| Description | 121| ------ | ----------------------------------- | ---- | ---------------------------------- | 122| value | [RadioStyle](#radiostyle10) | No | Style of the radio button in selected or deselected state.| 123 124### contentModifier<sup>12+</sup> 125 126contentModifier(modifier: ContentModifier\<RadioConfiguration>) 127 128Creates a content modifier. 129 130**Atomic service API**: This API can be used in atomic services since API version 12. 131 132**System capability**: SystemCapability.ArkUI.ArkUI.Full 133 134**Parameters** 135 136| Name| Type | Mandatory| Description | 137| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 138| 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.| 139 140### contentModifier<sup>18+</sup> 141 142contentModifier(modifier: Optional<ContentModifier\<RadioConfiguration>>) 143 144Creates a content modifier. Compared to [contentModifier](#contentmodifier12)<sup>12+</sup>, this API supports the **undefined** type for the **modifier** parameter. 145 146**Atomic service API**: This API can be used in atomic services since API version 18. 147 148**System capability**: SystemCapability.ArkUI.ArkUI.Full 149 150**Parameters** 151 152| Name | Type | Mandatory| Description | 153| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 154| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[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.<br>If **modifier** is set to **undefined**, no content modifier is used.| 155 156## Events 157 158In addition to the [universal events](ts-component-general-events.md), the following events are supported. 159 160### onChange 161 162onChange(callback: (isChecked: boolean) => void) 163 164Triggered when the selected state of the radio button changes. 165 166**Widget capability**: This API can be used in ArkTS widgets since API version 9. 167 168**Atomic service API**: This API can be used in atomic services since API version 11. 169 170**System capability**: SystemCapability.ArkUI.ArkUI.Full 171 172**Parameters** 173 174| Name | Type | Mandatory| Description | 175| --------- | ------- | ---- | -------------------------------- | 176| isChecked | boolean | Yes | Selected state of the radio button.| 177 178### onChange<sup>18+</sup> 179 180onChange(callback: Optional\<OnRadioChangeCallback>) 181 182Triggered when the selected state of the radio button changes. Compared to [onChange](#onchange), this API supports the **undefined** type for the **callback** parameter. 183 184**Widget capability**: This API can be used in ArkTS widgets since API version 18. 185 186**Atomic service API**: This API can be used in atomic services since API version 18. 187 188**System capability**: SystemCapability.ArkUI.ArkUI.Full 189 190**Parameters** 191 192| Name | Type | Mandatory| Description | 193| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 194| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[OnRadioChangeCallback](#onradiochangecallback18)> | Yes | Called invoked when the selected state of the radio button changes.<br>If **callback** is set to **undefined**, the callback function is not used.| 195 196## OnRadioChangeCallback<sup>18+</sup> 197 198type OnRadioChangeCallback = (isChecked: boolean) => void 199 200Triggered when the selected state of the radio button changes. 201 202**Atomic service API**: This API can be used in atomic services since API version 18. 203 204**System capability**: SystemCapability.ArkUI.ArkUI.Full 205 206**Parameters** 207 208| Name | Type | Mandatory| Description | 209| --------- | ------- | ---- | ------------------------------------------------------------ | 210| 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.| 211 212## RadioStyle<sup>10+</sup> 213 214**Atomic service API**: This API can be used in atomic services since API version 11. 215 216**System capability**: SystemCapability.ArkUI.ArkUI.Full 217 218| Name | Type | Mandatory| Description | 219| ---------------------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 220| checkedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the background when the radio button is selected.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_activated')** | 221| uncheckedBorderColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the border when the radio button is deselected.<br>Default value: **$r('sys.color.ohos_id_color_switch_outline_off')** | 222| 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: **$r('sys.color.ohos_id_color_foreground_contrary')**| 223 224## RadioConfiguration<sup>12+</sup> 225 226You need a custom class to implement the **ContentModifier** API. 227 228**Atomic service API**: This API can be used in atomic services since API version 12. 229 230**System capability**: SystemCapability.ArkUI.ArkUI.Full 231 232| Name | Type | Read Only| Optional | Description | 233| ------ | ------ |-------------------------------- |-------------------------------- |-------------------------------- | 234| value | string | No| No|Current value of the radio button.| 235| checked | boolean| No| No| Whether the radio button is selected.<br>Default value: **false**<br>**true**: The radio button is selected. **false**: The radio button is not selected.| 236| triggerChange |Callback\<boolean>|No|No|Changes the 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.| 237 238 239## Example 240### Example 1: Setting the Background Color 241This example demonstrates how to set **checkedBackgroundColor** to customize the background color of a radio button. 242```ts 243// xxx.ets 244@Entry 245@Component 246struct RadioExample { 247 build() { 248 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 249 Column() { 250 Text('Radio1') 251 Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) 252 .radioStyle({ 253 checkedBackgroundColor: Color.Pink 254 }) 255 .height(50) 256 .width(50) 257 .onChange((isChecked: boolean) => { 258 console.log('Radio1 status is ' + isChecked) 259 }) 260 } 261 Column() { 262 Text('Radio2') 263 Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) 264 .radioStyle({ 265 checkedBackgroundColor: Color.Pink 266 }) 267 .height(50) 268 .width(50) 269 .onChange((isChecked: boolean) => { 270 console.log('Radio2 status is ' + isChecked) 271 }) 272 } 273 Column() { 274 Text('Radio3') 275 Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) 276 .radioStyle({ 277 checkedBackgroundColor: Color.Pink 278 }) 279 .height(50) 280 .width(50) 281 .onChange((isChecked: boolean) => { 282 console.log('Radio3 status is ' + isChecked) 283 }) 284 } 285 }.padding({ top: 30 }) 286 } 287} 288``` 289 290### Example 2: Setting the Indicator Type 291This example shows how to customize the appearance of a radio button when it is selected by configuring **indicatorType** and **indicatorBuilder**. 292```ts 293// xxx.ets 294@Entry 295@Component 296struct RadioExample { 297 @Builder 298 indicatorBuilder() { 299 Image($r("app.media.star")) 300 } 301 build() { 302 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 303 Column() { 304 Text('Radio1') 305 Radio({ value: 'Radio1', group: 'radioGroup', 306 indicatorType:RadioIndicatorType.TICK 307 }).checked(true) 308 .height(50) 309 .width(80) 310 .onChange((isChecked: boolean) => { 311 console.log('Radio1 status is ' + isChecked) 312 }) 313 } 314 Column() { 315 Text('Radio2') 316 Radio({ value: 'Radio2', group: 'radioGroup', 317 indicatorType:RadioIndicatorType.DOT 318 }).checked(false) 319 .height(50) 320 .width(80) 321 .onChange((isChecked: boolean) => { 322 console.log('Radio2 status is ' + isChecked) 323 }) 324 } 325 Column() { 326 Text('Radio3') 327 Radio({ value: 'Radio3', group: 'radioGroup', 328 indicatorType:RadioIndicatorType.CUSTOM, 329 indicatorBuilder:()=>{this.indicatorBuilder()} 330 }).checked(false) 331 .height(50) 332 .width(80) 333 .onChange((isChecked: boolean) => { 334 console.log('Radio3 status is ' + isChecked) 335 }) 336 } 337 }.padding({ top: 30 }) 338 } 339} 340``` 341 342### Example 3: Implementing a Custom Radio Button 343This example illustrates how to implement a custom radio button using the **contentModifier** API. 344```ts 345class MyRadioStyle implements ContentModifier<RadioConfiguration> { 346 type: number = 0 347 selectedColor: ResourceColor = Color.Black 348 349 constructor(numberType: number, colorType: ResourceColor) { 350 this.type = numberType 351 this.selectedColor = colorType 352 } 353 354 applyContent(): WrappedBuilder<[RadioConfiguration]> { 355 return wrapBuilder(buildRadio) 356 } 357} 358 359@Builder 360function buildRadio(config: RadioConfiguration) { 361 Row({ space: 30 }) { 362 Circle({ width: 50, height: 50 }) 363 .stroke(Color.Black) 364 .fill(config.checked ? (config.contentModifier as MyRadioStyle).selectedColor : Color.White) 365 Button(config.checked ? "off" : "on") 366 .width(100) 367 .type(config.checked ? (config.contentModifier as MyRadioStyle).type : ButtonType.Normal) 368 .backgroundColor('#2787D9') 369 .onClick(() => { 370 if (config.checked) { 371 config.triggerChange(false) 372 } else { 373 config.triggerChange(true) 374 } 375 }) 376 } 377} 378 379@Entry 380@Component 381struct refreshExample { 382 build() { 383 Column({ space: 50 }) { 384 Row() { 385 Radio({ value: 'Radio1', group: 'radioGroup' }) 386 .contentModifier(new MyRadioStyle(1, '#004AAF')) 387 .checked(false) 388 .width(300) 389 .height(100) 390 } 391 392 Row() { 393 Radio({ value: 'Radio2', group: 'radioGroup' }) 394 .checked(true) 395 .width(300) 396 .height(60) 397 .contentModifier(new MyRadioStyle(2, '#004AAF')) 398 } 399 } 400 } 401} 402``` 403 404
