Radio
NOTE This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The <Radio> component allows users to select from a set of mutually exclusive options.
Required Permissions
None
Child Components
None
APIs
Radio(options: {value: string, group: string})
- Parameters
Name | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
value | string | Yes | - | Value of the current radio button. |
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. |
Attributes
Name | Type | Default Value | Description |
---|---|---|---|
checked | boolean | false | Whether the radio button is selected. |
Events
Name | Description |
---|---|
onChange(callback: (value: boolean) => void) | Triggered when the selected state of the radio button changes. -The value true means that the radio button is selected. -The value false means that the radio button is not selected. |
Example
@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)
.height(50)
.width(50)
.onChange((value: boolean) => {
console.log('Radio1 status is ' + value)
})
}
Column() {
Text('Radio2')
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((value: boolean) => {
console.log('Radio2 status is ' + value)
})
}
Column() {
Text('Radio3')
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((value: boolean) => {
console.log('Radio3 status is ' + value)
})
}
}.padding({ top: 30 })
}
}