输入类 · Radio
单选框
用户使用单选框来从少量的选项集合中选择单个选项
使用场景
单选框(Radio)也叫单选按钮,它允许用户在一组选项中选择其中一个。
当选项很多时,单选下拉菜单(Select)可能比较适合,因为它所占用的画面空间比单选按钮来得要少。
当选项很多时,单选下拉菜单(Select)可能比较适合,因为它所占用的画面空间比单选按钮来得要少。
代码演示
如何引入
基本用法
带辅助文本
通过
extra
设置辅助文本,可以是任意类型的 ReactNode禁用
Radio 不可用
高级模式
高级模式(mode='advanced')checked 可以通过点击转换为 unchecked。
单选组合
一组互斥的 Radio 配合使用
垂直排列
可通过给 RadioGroup 设置
direction
属性来决定 组内的 radio 元素水平排列或者垂直排列按钮样式
version: >=1.26.0
可以利用
type='button'
来设置 button 样式类型的单选器,并且,button 类型单选器支持三种尺寸大小。需要注意的是: button 类型的单选器暂不支持辅助文本(
extra
)和垂直排列(direction='vertical'
)。卡片样式
version: >=1.30.0
可以给
RadioGroup
设置 type='card'
实现带有背景的卡片样式。无 radio 的纯卡片样式
version: >=1.30.0
可以给
RadioGroup
设置 type='pureCard'
实现带有背景且无 radio 的纯卡片样式。配置 options
通过配置 options 参数来渲染单选框
API 参考
Radio
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
addonClassName | 包裹内容容器的样式类名 v1.16.0 后提供 | string | |
addonId | addon 节点 id,aria-labelledby 指向这个 id,若无设置会随机生成一个 id v2.11.0 后提供 | string | |
addonStyle | 包裹内容容器的内联样式 v1.16.0 后提供 | CSSProperties | |
aria-label | Radio 的 label | string | - |
autoFocus | 自动获取焦点 | boolean | false |
checked | 指定当前是否选中 | boolean | false |
className | 样式类名 | string | |
defaultChecked | 初始是否选中 | boolean | false |
disabled | 禁选单选框 | boolean | false |
extra | 副文本,只对type='default'生效 | ReactNode | - |
extraId | 副文本的 id,aria-describedby 指向这个 id,若无设置会随机生成一个 id v2.11.0 后提供 | ReactNode | - |
mode | 高级和普通模式,高级模式可以在 checked 时点击变成 unchecked,可选值 advanced | string | - |
name | Radio组件中input[type="radio"] 的name 属性,具有相同name 的Radio属于同一个RadioGroup,name 属性可参考 MDN Radio | string | - |
preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素,作用于组件内的 focus 方法 | boolean | |
style | 内联样式 | CSSProperties | |
type | 设置 radio的样式类型,可选值为:default 、button 、card 、pureCard 该 api 在 v2.18.0 后提供 | string | default |
value | 根据 value 进行比较,判断是否选中 | string | number | - |
onChange | 选项变化时的回调函数 | function(e:Event) | - |
onMouseEnter | 鼠标移入选项时的回调函数 | function(e:Event) | - |
onMouseLeave | 鼠标移出选项时的回调函数 | function(e:Event) | - |
RadioGroup
单选框组合,用于包裹一组
Radio
。属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
aria-label | RadioGroup 的 label | string | - |
buttonSize | type='button'的radio的尺寸大小,可选值为:small 、middle 、large v1.26.0 后提供 | string | middle |
className | 样式类名 | string | |
defaultValue | 默认选中的值 | string | number | - |
direction | radio 排列方向, 只对type='default'生效,可选值horizontal 、vertical v0.31.0 后提供 | string | horizontal |
disabled | 禁选所有子单选器 | boolean | false |
mode | 高级和普通模式,可以在 checked 时点击变成 unchecked,可选值 advanced v1.9.0 后提供 | string | - |
name | RadioGroup 下所有 input[type="radio"] 的 name 属性 | string | - |
options | 以配置形式设置子元素 | Array | - |
style | 内联样式 | CSSProperties | |
value | 用于设置当前选中的值 | string | number | - |
type | 设置所有radio的样式类型,可选值为:default 、button 、card 、pureCard 该 api 在 v1.26.0 后提供,其中 card 和 pureCard 在 v1.30.0 后提供 | string | default |
onChange | 选项变化时的回调函数 | function(e:Event) | - |
Methods
Radio
名称 | 描述 |
---|---|
blur() | 移除焦点 |
focus() | 获取焦点 |
Accessibility
ARIA
aria-label
:用于解释 Radio 或 RadioGroup 的作用aria-labelledby
默认指向 addon 节点,用于解释 Radio 的内容aria-describedby
默认指向 extra 节点,用于补充解释 Radio 的内容
键盘和焦点
- RadioGroup 可以被获取焦点,初始焦点设置:
- 当 RadioGroup 中没有被选择项时,初始焦点为第一个 Radio 项上
- 当 RadioGroup 中有选中项时,初始焦点为选中的 Radio 项上
- 在同一个 radiogroup 内
- 可以通过
右箭头
或下箭头
将焦点移动到下一个 Radio 项上,同时取消先前的 Radio 项的选中状态,并选中当前聚焦的 Radio 项 - 可以通过
左箭头
或上箭头
将焦点移动到上一个 Radio 项上,同时取消先前的 Radio 项的选中状态,并选中当前聚焦的 Radio 项
- 可以通过
- 若 RadioGroup 中没有选中项,可以
Space
键选中初始焦点
文案规范
- 首字母大写
- 不使用标点符号