Checkbox 复选框

使用 fui-checkbox-group 管理多个选中值，fui-checkbox 表示单个选项。

支持平台

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

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

基础用法

<!-- 多选组，selectedValues 为页面中的数组 -->
<fui-checkbox-group v-model="selectedValues">
  <!-- 可点击文字的复选项 -->
  <fui-label>
    <!-- 复选控件 -->
    <fui-checkbox value="one" />
    <text>选项一</text>
  </fui-label>
</fui-checkbox-group>

复选组属性

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

复选项属性

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

事件

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

平台说明

非 nvue 默认选中颜色由 --fui-color-primary 控制。

插槽

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