Clarity Design · 协作产品 UI 设计语言

基本
受控组件
分组
非受限组件
嵌套组件
使用 Grid 布局
无障碍

开发指南

何时使用

单选框允许用户从一个数据集中选择单个选项。如果你觉得用户需要并排看到所有的可选项，使用单选框进行排他操作。此外，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。

分组

使用 <Radio.Group> 渲染 <Radio> 分组。

ApplePearOrange

非受限组件

使用 RadioGroup 渲染的组，通过设置 defaultValue 属性可以让组件变成非受限组件。

Choose fruit

AppleWatermelonOrange

嵌套组件

使用 RadioGroup，通过直接嵌套 Radio 组件来渲染的组。

pythonjavac

无障碍

请参考ARIA and KeyBoard。

API

Radio

参数	说明	类型	默认值
id	组件input的id	String	-
checked	设置radio是否选中	Boolean	-
defaultChecked	设置radio是否默认选中	Boolean	-
label	通过属性配置label	ReactNode	-
onChange	状态变化时触发的事件签名: Function(checked: Boolean, e: Event) => void 参数: checked: {Boolean} 是否选中 e: {Event} Dom 事件对象	Function	func.noop
onMouseEnter	鼠标进入enter事件签名: Function(e: Event) => void 参数: e: {Event} Dom 事件对象	Function	func.noop
onMouseLeave	鼠标离开事件签名: Function(e: Event) => void 参数: e: {Event} Dom 事件对象	Function	func.noop
disabled	radio是否被禁用	Boolean	-
value	radio 的value	String/Number/Boolean	-
name	name	String	-

Radio.Group

参数	说明	类型	默认值
name	name	String	-
size	与 `shape` 属性配套使用，shape设为button时有效可选值: 'large'(大) 'medium'(中) 'small'(小)	Enum	'medium'
shape	可以设置成 button 展示形状可选值: 'button'(按钮状)	Enum	-
value	radio group的选中项的值	String/Number/Boolean	-
defaultValue	radio group的默认值	String/Number/Boolean	-
component	设置标签类型	String/Function	'div'
onChange	选中值改变时的事件签名: Function(value: String/Number, e: Event) => void 参数: value: {String/Number} 选中项的值 e: {Event} Dom 事件对象	Function	() => {}
disabled	表示radio被禁用	Boolean	-
dataSource	可选项列表, 数据项可为 String 或者 Object, 如 `['apple', 'pear', 'orange']`	Array<any>	[]
children	通过子元素方式设置内部radio	Array<ReactElement>/ReactElement	-
itemDirection	子项目的排列方式 - hoz: 水平排列 (default) - ver: 垂直排列可选值: 'hoz', 'ver'	Enum	'hoz'

ARIA and KeyBoard

按键	说明
Tab	获取焦点，如果没有任何选中就是第一个，之后可以空格选中。如果有选中的就聚焦到选中项，然后通过左右键直接选中。