简介

单选框组件用于在一组选项中进行单项选择，支持圆形单选和胶囊单选两种类型，适用于表单、筛选、选项选择等场景。配合 fs-radio-group 可实现分组、横向/竖向排列和单选控制。

使用方法

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

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

代码演示

类型（type 属性）

状态

排列方向（direction 属性）

最大宽度（maxWidth 属性）

最大行数（maxLines 属性）

自定义样式（extStyle 属性）

事件触发机制

演示 fs-radio 在不同使用场景下的事件触发行为：

---

API

fs-radio-group 属性

属性	说明	类型	可选值	默认值
value	当前选中值	any	—	—
direction	排列方向	string	row/column	row

fs-radio 属性

属性	说明	类型	可选值	默认值
checked	是否选中	boolean	true/false	false
disabled	是否禁用	boolean	true/false	false
type	类型	string	circle/capsule/list	circle
label	选项文本	string	—	—
value	单选值	any	—	—
maxWidth	最大宽度	string	支持px、rpx、%等单位	—
maxLines	最大行数	number	正整数，0表示不限制	0
extStyle	外部样式	string	CSS样式字符串	—
tapId	点击标识	string	—	'radio-id'
allowDeselect	是否支持反选	boolean	true/false	true

tapId 说明：fs-radio-group 组件会自动为每个 fs-radio 设置 tapId，命名规则为 radio-{index}（index 从 0 开始）。开发者也可以手动设置 tapId 来覆盖自动生成的标识。

allowDeselect 说明：控制是否允许取消选中状态。当设置为 false 时，已选中的单选框无法通过点击取消选中，确保始终有一个选项被选中。默认值为 true，支持反选功能。

事件

fs-radio-group 事件

事件名	说明	回调参数
change	选中值变化时触发

fs-radio 事件

事件名	说明	回调参数
change	状态切换时触发

注意： 当 fs-radio 被包含在 fs-radio-group 中时，只会触发 fs-radio-group 的 change 事件，不会触发单个 fs-radio 的 change 事件。这样可以避免重复事件触发，统一在组件组层面处理选中状态变化。

事件触发机制说明

在 fs-radio-group 中使用：

<fs-radio-group bind:change="onGroupChange">
  <fs-radio value="option1">选项1</fs-radio>  <!-- 不会触发自己的change事件 -->
  <fs-radio value="option2">选项2</fs-radio>  <!-- 不会触发自己的change事件 -->
</fs-radio-group>

// 只会触发这个事件
onGroupChange(e) {
  console.log('选中值：', e.detail.value);
}

单独使用 fs-radio：

<fs-radio value="single" bind:change="onRadioChange">单独使用</fs-radio>

// 会触发这个事件
onRadioChange(e) {
  console.log('选中值：', e.detail.value);
  console.log('选中状态：', e.detail.checked);
}

Slot

名称	说明
默认	单选项内容

---

设计说明

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

---

预览

打开预览