Radio
The Radio component allows users to select from a set of mutually exclusive options.
NOTE
Since API version 12, the default indicator type for the Radio component changes from RadioIndicatorType.DOT to RadioIndicatorType.TICK.
This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
Not supported
APIs
Radio(options: RadioOptions)
Creates a radio button.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| options | RadioOptions | Yes | Parameters of the radio button. |
RadioOptions
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | string | Yes | Current value of the radio button. Widget capability: This API can be used in ArkTS widgets since API version 9. Atomic service API: This API can be used in atomic services since API version 11. |
| 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. Widget capability: This API can be used in ArkTS widgets since API version 9. Atomic service API: This API can be used in atomic services since API version 11. |
| indicatorType12+ | RadioIndicatorType | No | Indicator type of the radio button. If no value is specified, the value of RadioIndicatorType.TICK is used. Widget capability: This API can be used in ArkTS widgets since API version 12. Atomic service API: This API can be used in atomic services since API version 12. |
| indicatorBuilder12+ | CustomBuilder | 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. Widget capability: This API can be used in ArkTS widgets since API version 12. Atomic service API: This API can be used in atomic services since API version 12. |
RadioIndicatorType12+
Widget capability: This API can be used in ArkTS widgets since API version 12.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Description |
|---|---|
| TICK | Default tick icon. |
| DOT | Default dot icon. |
| CUSTOM | Custom component. |
Attributes
In addition to the universal attributes, the following attributes are supported.
checked
checked(value: boolean)
Sets whether the radio button is selected.
Since API version 10, this attribute supports two-way binding through $$.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | Yes | Whether the radio button is selected. Default value: false |
radioStyle10+
radioStyle(value?: RadioStyle)
Sets the style of the radio button in selected or deselected state.
Since API version 10, this API is supported in ArkTS widgets.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | RadioStyle | No | Style of the radio button in selected or deselected state. |
contentModifier12+
contentModifier(modifier: ContentModifier<RadioConfiguration>)
Creates a content modifier.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| modifier | ContentModifier<RadioConfiguration> | Yes | Content modifier to apply to the current component. modifier: content modifier. You need a custom class to implement the ContentModifier API. |
Events
In addition to the universal events, the following events are supported.
onChange
onChange(callback: (isChecked: boolean) => void)
Triggered when the selected state of the radio button changes.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| isChecked | boolean | Yes | Selected state of the radio button. 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. |
RadioStyle10+
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| checkedBackgroundColor | ResourceColor | No | Color of the background when the radio button is selected. Default value: #007DFF |
| uncheckedBorderColor | ResourceColor | No | Color of the border when the radio button is deselected. Default value: #182431 |
| indicatorColor | 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. Default value: #FFFFFF |
RadioConfiguration12+
You need a custom class to implement the ContentModifier API.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Read Only | Optional | Description |
|---|---|---|---|---|
| value | string | No | No | Current value of the radio button. |
| checked | boolean | No | No | Whether the radio button is selected. Default value: false |
| triggerChange | Callback<boolean> | No | No | Changes the selected state of the radio button. |
Example
Example 1
This example shows how to set the color of the background when the radio button is selected.
// xxx.ets
@Entry
@Component
struct RadioExample {
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Column() {
Text('Radio1')
Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
.radioStyle({
checkedBackgroundColor: Color.Pink
})
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio1 status is ' + isChecked)
})
}
Column() {
Text('Radio2')
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
.radioStyle({
checkedBackgroundColor: Color.Pink
})
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio2 status is ' + isChecked)
})
}
Column() {
Text('Radio3')
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
.radioStyle({
checkedBackgroundColor: Color.Pink
})
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio3 status is ' + isChecked)
})
}
}.padding({ top: 30 })
}
}
Example 2
This example shows how to set the indicator of the radio button to an image.
// xxx.ets
@Entry
@Component
struct RadioExample {
@Builder
indicatorBuilder() {
Image($r("app.media.star"))
}
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Column() {
Text('Radio1')
Radio({ value: 'Radio1', group: 'radioGroup',
indicatorType:RadioIndicatorType.TICK
}).checked(true)
.height(50)
.width(80)
.onChange((isChecked: boolean) => {
console.log('Radio1 status is ' + isChecked)
})
}
Column() {
Text('Radio2')
Radio({ value: 'Radio2', group: 'radioGroup',
indicatorType:RadioIndicatorType.DOT
}).checked(false)
.height(50)
.width(80)
.onChange((isChecked: boolean) => {
console.log('Radio2 status is ' + isChecked)
})
}
Column() {
Text('Radio3')
Radio({ value: 'Radio3', group: 'radioGroup',
indicatorType:RadioIndicatorType.CUSTOM,
indicatorBuilder:()=>{this.indicatorBuilder()}
}).checked(false)
.height(50)
.width(80)
.onChange((isChecked: boolean) => {
console.log('Radio3 status is ' + isChecked)
})
}
}.padding({ top: 30 })
}
}
Example 3
This example shows how to set the style of the radio button in selected or deselected state.
class MyRadioStyle implements ContentModifier<RadioConfiguration> {
type: number = 0
selectedColor: ResourceColor = Color.Black
constructor(numberType: number, colorType: ResourceColor) {
this.type = numberType
this.selectedColor = colorType
}
applyContent(): WrappedBuilder<[RadioConfiguration]> {
return wrapBuilder(buildRadio)
}
}
@Builder
function buildRadio(config: RadioConfiguration) {
Row({ space: 30 }) {
Circle({ width: 50, height: 50 })
.stroke(Color.Black)
.fill(config.checked ? (config.contentModifier as MyRadioStyle).selectedColor : Color.White)
Button(config.checked ? "off" : "on")
.width(100)
.type(config.checked ? (config.contentModifier as MyRadioStyle).type : ButtonType.Normal)
.backgroundColor('#2787D9')
.onClick(() => {
if (config.checked) {
config.triggerChange(false)
} else {
config.triggerChange(true)
}
})
}
}
@Entry
@Component
struct refreshExample {
build() {
Column({ space: 50 }) {
Row() {
Radio({ value: 'Radio1', group: 'radioGroup' })
.contentModifier(new MyRadioStyle(1, '#004AAF'))
.checked(false)
.width(300)
.height(100)
}
Row() {
Radio({ value: 'Radio2', group: 'radioGroup' })
.checked(true)
.width(300)
.height(60)
.contentModifier(new MyRadioStyle(2, '#004AAF'))
}
}
}
}
