Radio 单选框

何时使用

• 用于在多个备选项中选中单个状态。
• 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

代码演示

基本

loading

不可用

loading

单选组合

loading

Radio.Group 垂直

loading

Block 单选组合

loading

Radio.Group 组合 - 配置方式

loading

按钮样式

loading

单选组合 - 配合 name 使用

loading

大小

loading

填底的按钮样式

loading

API

Radio/Radio.Button

参数	说明	类型	默认值
autofocus	自动获取焦点	boolean	false
checked(v-model)	指定当前是否选中	boolean	false
disabled	禁用 Radio	boolean	false
value	根据 value 进行比较，判断是否选中	any	-

Radio.Group

单选框组合，用于包裹一组 Radio。

参数	说明	类型	默认值	版本
block	将 RadioGroup 宽度调整为其父宽度的选项	boolean	false	5.21.0
buttonStyle	RadioButton 的风格样式，目前有描边和填色两种风格	outline | solid	outline
disabled	禁选所有子单选器	boolean	false
name	RadioGroup 下所有 input[type="radio"] 的 name 属性。若未设置，则将回退到随机生成的名称	string	-
options	以配置形式设置子元素	string[] | number[] | Array<CheckboxOptionType>	-
optionType	用于设置 Radio options 类型	default | button	default	4.4.0
orientation	排列方向	horizontal | vertical	horizontal
size	大小，只对按钮样式生效	large | middle | small	-
value(v-model)	用于设置当前选中的值	any	-
vertical	值为 true，Radio Group 为垂直方向。与 orientation 同时存在，以 orientation 优先	boolean	false
onChange	选项变化时的回调函数	function(e:Event)	-

CheckboxOptionType

属性	说明	类型	默认值	版本
label	用于作为 Radio 选项展示的文本	string	-	4.4.0
value	关联 Radio 选项的值	string | number | boolean	-	4.4.0
style	应用到 Radio 选项的 style	CSSProperties	-	4.4.0
class	Radio 选项的类名	string	-	5.25.0
disabled	指定 Radio 选项是否要禁用	boolean	false	4.4.0
title	添加 Title 属性值	string	-	4.4.0
id	添加 Radio Id 属性值	string	-	4.4.0
onChange	当 Radio Group 的值发送改变时触发	(e: CheckboxChangeEvent) => void;	-	4.4.0
required	指定 Radio 选项是否必填	boolean	false	4.4.0

方法

Radio

名称	描述
blur()	移除焦点
focus()	获取焦点