Radio 单选框
在一组备选项中进行单选。
基础用法
单选框组由 yh-radio-group 包裹一组 yh-radio，绑定 v-model 即可实现单选功能。
当前选中值: 1
基础用法
禁用状态
使用 disabled 属性来控制单选框的禁用状态。
整组禁用：
单个禁用：
禁用状态
单独使用
Radio 也可以单独使用，不使用 RadioGroup 包裹。
当前选中值: 1
单独使用
带边框
使用 border 属性可以渲染为带有边框的单选框。
带边框
不同尺寸
使用 size 属性来设置单选框的尺寸。
不同尺寸
组统一尺寸
在 yh-radio-group 上设置 size 属性可以统一控制组内所有单选框的尺寸。
Large:
Default:
Small:
组统一尺寸
按钮样式
使用 yh-radio-button 组件可以实现按钮形态的单选框。
按钮样式
按钮样式自定义颜色
通过 fill 和 text-color 属性可以自定义按钮选中时的填充色和文字颜色。
按钮样式自定义颜色
按钮样式禁用
按钮样式禁用
按钮样式不同尺寸
Large:
Default:
Small:
按钮样式不同尺寸
在 Nuxt 中使用
Radio 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入。
Nuxt 中使用
SSR 注意事项：
- ✅ 基础单选、按钮样式、单选组完全支持
- ✅ 样式及选中状态在 SSR 环境中渲染准确
- ✅ 自定义颜色（fill、text-color）支持
SSR 安全性
Radio 组件已通过完整的 SSR 测试，确保在服务端预选状态与客户端激活后保持一致。
API
Radio Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string | number | boolean | — |
| value | 单选框的值 | string | number | boolean | — |
| label | 显示的文本内容 | string | — |
| disabled | 是否禁用 | boolean | false |
| border | 是否显示边框 | boolean | false |
| size | 单选框尺寸 | 'large' | 'default' | 'small' | 'default' |
| name | 原生 name 属性 | string | — |
Radio Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发 | (value: string | number | boolean) => void |
Radio Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
RadioButton Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string | number | boolean | — |
| value | 单选按钮的值 | string | number | boolean | — |
| label | 显示的文本内容 | string | — |
| disabled | 是否禁用 | boolean | false |
| size | 单选按钮尺寸 | 'large' | 'default' | 'small' | 'default' |
| name | 原生 name 属性 | string | — |
RadioButton Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发 | (value: string | number | boolean) => void |
RadioButton Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
RadioGroup Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string | number | boolean | — |
| size | 单选框组尺寸 | 'large' | 'default' | 'small' | — |
| disabled | 是否禁用 | boolean | false |
| name | 原生 name 属性 | string | — |
| text-color | 按钮激活时的文字颜色 | string | #fff |
| fill | 按钮激活时的填充色和边框色 | string | var(--yh-color-primary) |
RadioGroup Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发 | (value: string | number | boolean) => void |
RadioGroup Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
主题变量
Radio 主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-radio-font-size | 字体大小 | var(--yh-font-size-base) |
--yh-radio-text-color | 文字颜色 | var(--yh-text-color-regular) |
--yh-radio-input-size | 单选框大小 | 14px |
--yh-radio-checked-dot-color | 选中圆点色 | var(--yh-color-primary) |
--yh-radio-disabled-bg-color | 禁用背景色 | var(--yh-fill-color-light) |
RadioButton 主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-radio-button-font-size | 字体大小 | var(--yh-font-size-base) |
--yh-radio-button-text-color | 文字颜色 | var(--yh-text-color-regular) |
--yh-radio-button-checked-bg-color | 选中背景色 | var(--yh-color-primary) |
--yh-radio-button-checked-text-color | 选中文字色 | var(--yh-fill-color-blank) |
--yh-radio-button-disabled-bg-color | 禁用背景色 | var(--yh-fill-color-light) |