Radio 单选框
单选框用于在一组互斥选项中仅选择一个，通过明确的选中状态减少多选困惑，适用于配置项、筛选条件、模式切换等场景。
注意
label 作为 value 来使用已经被 废弃，建议 label 只用来表示展示文字，请使用 value 绑定实际值。
提示
文档示例统一使用 value。如果项目里还存在把 label 当值使用的旧写法，建议逐步迁移。
ts
import { createApp } from 'vue'
import { ElRadio, ElRadioButton, ElRadioGroup } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElRadio)
app.use(ElRadioButton)
app.use(ElRadioGroup)设计规范
- 一组单选框必须有一个默认选中项，通常为最安全或最常用的选项。
- 选项文案保持简洁清晰，长度尽量接近，明确说明选择后的结果。
- 互斥选项数量建议在 2～7 个之间，过多时改用选择器。
- “是/否”或“开/关”类二态场景建议使用 Switch。
- 支持水平排列和垂直排列：选项较少且文案简短时用水平排列，选项较多或文案较长时用垂直排列。
- 单选框分为基础型和按钮型，按钮型支持大 44px、中 32px、小 24px 三种尺寸。
基础用法
单选框不应该有太多的可选项， 如果你有很多的可选项你应该使用选择框而不是单选框。
水平排列
选项较少且文案简短时，建议使用水平排列。
垂直排列
选项较多或文案较长时，建议使用垂直排列。
禁用状态
disabled 属性可以用来控制单选框的禁用状态。
单选框组
适用于在多个互斥的选项中选择的场景
带有边框
Options 属性
单选按钮
带有按钮组视觉效果的单选框
按钮型尺寸
按钮型单选框支持大 44px、中 32px、小 24px 三种尺寸。
品牌色填充按钮
使用 Element Plus 原有的 fill 和 text-color 控制选中项颜色，示例里直接使用数字海南主色。
Radio API
Radio Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 选中项绑定值 | string / number / boolean | — |
| value | 单选框的值 | string / number / boolean | ::: |
| label | 单选框的 label 如果value没有值， label则作为value使用 | string / number / boolean | ::: |
| disabled | 是否禁用单选框 | boolean | false |
| border | 是否显示边框 | boolean | false |
| size | 单选框的尺寸 | enum | — |
| name | 原始 name 属性 | string | — |
Radio Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 绑定值变化时触发的事件 | Function |
Radio Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
RadioGroup API
RadioGroup Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string / number / boolean | — |
| size | 单选框按钮或边框按钮的大小 | string | default |
| disabled | 是否禁用 | boolean | false |
| validate-event | 输入时是否触发表单的校验 | boolean | true |
| text-color | 按钮形式的 Radio 激活时的文本颜色（配合 fill 使用） | string | #FFFFFF |
| fill | 按钮形式的 Radio 激活时的填充色和边框色（不传时默认白底蓝字） | string | #075AED |
| aria-label a11y | 与 RadioGroup 中的 aria-label 属性相同 | string | — |
| name | 原生 name 属性 | string | — |
| id | 原生 id 属性 | string | — |
| label a11y deprecated | 与 RadioGroup 中的 aria-label 属性相同 | string | — |
| options | 选项的数据源， value 的 key 和 label 和 disabled可以通过 props自定义. | array | — |
| props | options 的配置 | object | {value: 'value', label: 'label', disabled: 'disabled'} |
| type | 用于渲染选项的组件类型（例如 'button'） | enum | 'radio' |
RadioGroup Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 绑定值变化时触发的事件 | Function |
RadioGroup Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Radio / RadioButton |
RadioButton API
RadioButton Attributes
| 名称 | 详情 | 类型 | 默认 |
|---|---|---|---|
| value | 单选框的值 | string / number / boolean | — |
| label | 单选框的 label 如果没有 value， label则作为value使用 | string / number / boolean | — |
| disabled | 是否禁用单选框 | boolean | false |
| name | 原生 name 属性 | string | — |
RadioButton Slots
| 插槽名 | 说明 |
|---|---|
| default | 默认插槽内容 |