Skip to content

Radio 单选框

使用

在一组备选项中进行单选

基础用法

单选框不应该有太多的可选项, 如果你有很多的可选项你应该使用选择框而不是单选框。

要使用 Radio 组件,只需要设置v-model绑定变量, 选中意味着变量的值为相应 Radio value属性的值, value可以是StringNumberBoolean

自定义颜色

使用color属性可以自定义单选框的颜色。

禁用状态

disabled 属性可以用来控制单选框的禁用状态。

你只需要为单选框设置 disabled 属性就能控制其禁用状态。

单选框组

适用于在多个互斥的选项中选择的场景

结合k-radio-group元素和子元素k-radio可以实现单选组, 为 k-radio-group 绑定 v-model,再为 每一个 k-radio 设置好 label 属性即可, 另外,还可以通过 change 事件来响应变化,它会传入一个参数 value 来表示改变之后的值。

按钮样式

你可以让单选框看起来像一个按钮一样。

只需要添加button属性即可, 此外,还提供了 size 属性用来控制单选框的大小。

API

Radio Props

参数名描述类型默认值
model-value/v-model选中项绑定值string | number | boolean-
value单选框的值string | number | boolean-
label单选框的label如果value没有值,label则作为value使用string | number | boolean-
sizeradio尺寸enumbase
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
color自定义填充颜色string#2882FF
button是否显示按钮样式,建议配合KRadioGroup使用booleanfalse
name原生name属性string-

Radio Slots

插槽名描述参数
default默认插槽内容-

RadioGroup Props

参数名描述类型默认值
model-value/v-model绑定值string[] | number[][]
sizeradio尺寸enumbase
disabled是否禁用booleanfalse
colorbutton不为true时自定义填充颜色string#2882FF
button是否显示按钮样式booleanfalse
text-color按钮形式的radio激活时的文本颜色string-
fill按钮形式的radio激活时的填充色和边框色string-
direction复选框组元素标签enumrow

RadioGroup Events

事件名描述类型
change当绑定值变化时触发的事件Function

RadioGroup Slots

插槽名描述参数
default默认插槽内容-