Skip to main content
Version: 3.x

Radio

Single-select item.

Reference

Type

ComponentType<RadioProps>

Examples

export default class PageRadio extends Component {
state = {
list: [
{
value: 'USA',
text: 'United States',
checked: false
},
{
value: 'CHN',
text: 'China',
checked: true
},
{
value: 'BRA',
text: 'Brazil',
checked: false
},
{
value: 'JPN',
text: 'Japan',
checked: false
},
{
value: 'ENG',
text: 'United Kingdom',
checked: false
},
{
value: 'TUR',
text: 'France',
checked: false
}
]
}
render () {
return (
<View className='container'>
<Head title='Radio' />
<View className='page-body'>
<View className='page-section'>
<Text>default style</Text>
<Radio value='selected' checked>Selected</Radio>
<Radio style='margin-left: 20rpx' value='not-selected'>Not Selected</Radio>
</View>
<View className='page-section'>
<Text>recommend style</Text>
<View className='radio-list'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
</View>
</View>
</View>
)
}
}

RadioProps

PropertyTypeDefaultRequiredDescription
valuestringNoThe ID of the `radio` component. When this `radio` is selected, the change event for `radio-group` will carry the value of `radio`.
checkedbooleanfalseNoSpecifies whether to select the checkbox.
disabledbooleanfalseNoSpecifies whether to disable the component.
colorstring"#09BB07"NoThe color of the radio. It is the same as the color of the css.

Property Support

PropertyWeChat Mini-ProgramH5React Native
RadioProps.value✔️✔️
RadioProps.checked✔️✔️✔️
RadioProps.disabled✔️✔️✔️
RadioProps.color✔️✔️

API Support

APIWeChat Mini-ProgramH5React Native
Radio✔️✔️✔️