Skip to content

Radio 单选框

用于在备选项中选择一个,支持单独使用与配合 RadioGroup 使用;支持禁用与不同尺寸,具备无障碍(A11y)语义。

基础用法(配合 RadioGroup)

通过 RadioGroup 管理一组单选,v-model 为当前选中值。

单独使用

不依赖 RadioGroup,通过比较 modelValue 与当前 label 判断选中。

尺寸

通过 size 调整尺寸:largedefaultsmall

禁用

设置 disabled 后不可交互。

块状选择

设置 block 属性可以让单选框以块状形式显示。

按钮样式

设置 type="button" 可以让单选框以按钮的形式显示。

Radio Props

属性名说明类型可选值默认值
modelValue绑定值(与 label 比较;单独使用时为当前值)string | number | booleanundefined
label当前单选的值(用于与 modelValue 比较)string | number | booleanundefined
size尺寸'large' | 'default' | 'small'large/default/smalldefault
disabled是否禁用booleanfalse
block是否为块状选择样式booleanfalse
type单选框类型'radio' | 'button'radio/buttonradio

Radio Events

事件名说明参数类型
update:modelValue值变化(v-model)string | number | boolean
change值变化(同上,便于监听)string | number | boolean

RadioGroup Props

属性名说明类型可选值默认值
modelValue当前选中值string | number | booleanundefined
size尺寸'large' | 'default' | 'small'large/default/smalldefault
disabled是否禁用booleanfalse
block是否为块状选择样式booleanfalse
type单选框类型'radio' | 'button'radio/buttonradio

RadioGroup Events

事件名说明参数类型
update:modelValue当前选中值变化(v-model)string | number | boolean
change当前选中值变化(同上)string | number | boolean