Radio 单选框

使用 fui-radio-group 管理一组选项，使用 fui-radio 表示单项；fui-label 可扩大文字区域的点击范围。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

vue

<!-- 单选组，selected 为页面中的选中值 -->
<fui-radio-group v-model="selected">
  <!-- 可点击文字的单选项 -->
  <fui-label>
    <!-- 单选控件 -->
    <fui-radio value="one" />
    <text>选项一</text>
  </fui-label>
</fui-radio-group>

单选组属性

属性	类型	说明	官网默认值
name	String	表单字段名称	-
value	String	Vue 2 选中值	-
modelValue	String	Vue 3 选中值	-

单选项属性

属性	类型	说明	官网默认值
value	String	该选项的值	-
checked	Boolean	是否选中	false
disabled	Boolean	是否禁用	false
color	String	选中背景色	#465CFF
borderColor	String	未选中边框色	#ccc
borderRadius	String	圆角，nvue 必须使用具体单位	nvue 40rpx，其余 50%
isCheckMark	Boolean	styleType 为 1 时只显示对勾	false
checkMarkColor	String	对勾颜色	#fff
dotColor	String	styleType 为 2 时的圆点颜色	-
scaleRatio	Number / String	缩放比例	1
styleType	Number / String	选中样式：1 对勾、2 圆点	1

事件

事件	说明	回调参数
change（单选组）	选中项变化	`event.detail.value`
input	Vue 2 双向绑定	选中值
update:modelValue	Vue 3 双向绑定	选中值
change（单选项）	独立使用时选中状态变化	`{ value, checked }`

平台说明

非 nvue 默认选中颜色由 --fui-color-primary 控制。本地单选项 value 接受 String 或 Number，官网表格列为 String。

插槽

插槽	说明
—	官网未列出该组件的插槽

Radio 单选框 ​

支持平台 ​

基础用法 ​

单选组属性 ​

单选项属性 ​

事件 ​

平台说明 ​

插槽 ​