Radio 单选框

开发指南

单选框

何时使用

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

Without Label






With Label



基本

使用 Radio 渲染的基本组件。

normal:



disabled:

受限组件

使用 RadioGroup 渲染的组,通过设置 value 属性可以让组件变成受限组件

Choose an align-type of the item

Rendered Result

分组

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

非受限组件

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



嵌套组件

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

Grid Layout


Just simple context

使用 Grid 布局

使用 Grid 布局 RadioGroup 中的选项。

Programming language :

无障碍

请参考ARIA and KeyBoard

API

Radio

参数说明类型默认值
id组件input的idString-
checked设置radio是否选中Boolean-
defaultChecked设置radio是否默认选中Boolean-
label通过属性配置labelReactNode-
onChange状态变化时触发的事件

签名:
Function(checked: Boolean, e: Event) => void
参数:
checked: {Boolean} 是否选中
e: {Event} Dom 事件对象
Functionfunc.noop
onMouseEnter鼠标进入enter事件

签名:
Function(e: Event) => void
参数:
e: {Event} Dom 事件对象
Functionfunc.noop
onMouseLeave鼠标离开事件

签名:
Function(e: Event) => void
参数:
e: {Event} Dom 事件对象
Functionfunc.noop
disabledradio是否被禁用Boolean-
valueradio 的valueString/Number/Boolean-
namenameString-

Radio.Group

参数说明类型默认值
namenameString-
sizeshape 属性配套使用,shape设为button时有效

可选值:
'large'(大)
'medium'(中)
'small'(小)
Enum'medium'
shape可以设置成 button 展示形状

可选值:
'button'(按钮状)
Enum-
valueradio group的选中项的值String/Number/Boolean-
defaultValueradio 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通过子元素方式设置内部radioArray<ReactElement>/ReactElement-
itemDirection子项目的排列方式
- hoz: 水平排列 (default)
- ver: 垂直排列

可选值:
'hoz', 'ver'
Enum'hoz'

ARIA and KeyBoard

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