跳到主要内容
版本:3.x

Radio

单选项目

支持情况:

参考文档

类型

ComponentType<RadioProps>

示例代码

export default class PageRadio extends Component {
state = {
list: [
{
value: '美国',
text: '美国',
checked: false
},
{
value: '中国',
text: '中国',
checked: true
},
{
value: '巴西',
text: '巴西',
checked: false
},
{
value: '日本',
text: '日本',
checked: false
},
{
value: '英国',
text: '英国',
checked: false
},
{
value: '法国',
text: '法国',
checked: false
}
]
}
render () {
return (
<View className='container'>
<Head title='Radio' />
<View className='page-body'>
<View className='page-section'>
<Text>默认样式</Text>
<Radio value='选中' checked>选中</Radio>
<Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
</View>
<View className='page-section'>
<Text>推荐展示样式</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

参数类型默认值必填说明
valuestring<Radio/> 标识。当该<Radio/> 选中时,<RadioGroup/>的 change 事件会携带<Radio/>的 value
checkedbooleanfalse当前是否选中
disabledbooleanfalse是否禁用
colorstring"#09BB07"Radio 的颜色,同 css 的 color
namestringRadio 的名字
nativePropsRecord<string, unknown>用于透传 WebComponents 上的属性到内部 H5 标签上
ariaLabelstring无障碍访问,(属性)元素的额外描述
onChangeCommonEventFunction<{ value?: string; }> 中的选中项发生变化时触发 change 事件

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
RadioProps.value✔️✔️✔️✔️✔️✔️✔️✔️✔️
RadioProps.checked✔️✔️✔️✔️✔️✔️✔️✔️✔️
RadioProps.disabled✔️✔️✔️✔️✔️✔️✔️✔️✔️
RadioProps.color✔️✔️✔️✔️✔️✔️✔️
RadioProps.name✔️✔️✔️
RadioProps.nativeProps✔️✔️
RadioProps.ariaLabel✔️
RadioProps.onChange✔️✔️✔️