简介

复选框组件用于在多个选项中进行多选，支持圆形复选框、胶囊复选框和卡片复选框（新样式）等类型，适用于表单、筛选、选项选择等场景。配合 fs-checkbox-group 可实现分组、横向/竖向排列和多选控制。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-checkbox": "ava-ui/fxui/fs-checkbox/index",
  "fs-checkbox-group": "ava-ui/fxui/fs-checkbox-group/index"
}

代码演示

类型（type 属性）

状态

排列方向（direction 属性）

最大宽度（maxWidth 属性）

最大行数（maxLines 属性）

---

API

fs-checkbox-group 属性

属性	说明	类型	可选值	默认值
value	当前选中值	array	—	[]
direction	排列方向	string	row/column	row
disabled	是否禁用	boolean	true/false	false

fs-checkbox 属性

属性	说明	类型	可选值	默认值
checked	是否选中	boolean	true/false	false
indeterminate	是否为半选	boolean	true/false	false
disabled	是否禁用	boolean	true/false	false
type	类型	string	circle/capsule/card	circle
label	选项文本	string	—	—
value	复选框值	any	—	—
maxWidth	最大宽度	string	支持px、rpx、%等单位	—
maxLines	最大行数	number	正整数，0表示不限制	0
extStyle	外部样式	string	CSS样式字符串	—

事件

fs-checkbox-group 事件

事件名	说明	回调参数
change	选中值变化时触发	{ value: Array }

fs-checkbox 事件

事件名	说明	回调参数
change	状态切换时触发	{ value: any, checked: boolean }

---

设计说明

• 颜色、尺寸、间距、icon、禁用态等细节严格参考设计规范。
• 支持 slot 自定义 label 内容。
• 推荐配合 fs-checkbox-group 使用，保证多选组行为。
• 支持半选状态，适用于树形选择等场景。
• 支持 maxWidth 属性，超过最大宽度时文本自动换行，icon 和 text 顶对齐。
• maxWidth 支持多种单位：px、rpx、%等，自动计算 label 的可用宽度。
• 支持 maxLines 属性，限制文本显示行数，超过行数显示省略号（...）。
• 支持 extStyle 属性，可自定义字体大小、高度、颜色、间距等样式。

---

预览

打开预览