单选按钮允许用户从一组选项中选择一个选项。
一、概览（Overview）
1. 设计要求
- 当只能从列表中选择一项时，使用单选按钮（而不是开关）。
- 标签应便于扫描。
- 已选项应比未选项更为显眼。
单选按钮可以被选中
2. 更新内容
颜色：新的颜色映射和与动态颜色的兼容性
单选按钮具有新的颜色映射
二、规格（Specs）
① 单选按钮
1. 颜色
颜色值通过设计标记（design tokens）实现。对于设计而言，这意味着使用与标记对应的颜色值。对于实现而言，颜色值将是一个引用具体值的标记。了解更多关于设计标记的信息。
单选按钮在浅色与深色主题中使用的颜色角色：
① 主要颜色
② 表面上的变体色
相邻文本标签颜色
对于相邻的文本标签，使用表面上的颜色角色。即使与标签或组件交互时，颜色也应保持不变。
文本颜色保持不变，无论按钮是否被选中。
2. 状态
状态是用于传达组件或交互元素状态的视觉表现。
① 启用（Enabled）
② 悬停（Hover）
③ 聚焦（Focus）
④ 按下（Pressed）
⑤ 禁用（Disabled）
3. 尺寸
单选按钮尺寸
| 属性（Attribute） | 数值（Value） |
|---|---|
| 图标大小（Icon size） | 20dp |
| 状态层大小（State layer size） | 40dp |
| 目标大小（Target size） | 48dp |
三、指南（Guidelines）
单选按钮
1. 使用
单选按钮是允许用户从一组选项中进行单次选择的推荐方式。
一次只能选择一个单选按钮。
单选按钮应始终配有清晰的内联标签
使用单选按钮来：
- 从一组选项中选择一个选项
- 展示所有可用选项
单选按钮是单选的，不像复选框是多选的
当只能从列表中选择一个选项时，使用单选按钮（左图）。当可以从列表中选择多个选项时，使用复选框（右图）。
避免将单选按钮嵌套使用，也不要用单选按钮选择多个选项。
不要嵌套单选按钮（左图）。 不要允许单选按钮选择多个选项（右图）。
备选选择控件
单选按钮是多种选择控件之一，用于让用户做出选择，例如选择选项或切换设置的开关。
开关和复选框是备选的选择控件，可以用于更改设置或偏好设置。
开关（左图）。 复选框（右图）。
当选项不超过五个时，使用单选按钮。
当屏幕空间有限时，可以考虑使用下拉菜单代替单选按钮。然而，下拉菜单需要额外的操作步骤，包括更多的点击和认知负担。
当选项不超过五个时，使用单选按钮（左图）。当空间受限时，考虑使用下拉菜单代替单选按钮（右图）。
2. 结构
① 已选图标（Selected icon）
② 相邻标签文本（Adjacent label text）
③ 未选图标（Unselected icon）
相邻标签文本
始终将单选按钮与相邻的标签配对，标签应描述单选按钮选择的内容。
由于一次只能选择一个单选按钮，每个选项必须有自己的标签。
单选按钮始终需要标签文本
3. 放置位置
单选按钮通常以堆叠的形式排列
单选按钮应垂直排列，并始终选中一个选项。
单选按钮应始终预选一个选项（左图）。避免使用水平排列的单选按钮列表（右图）
4. 行为
当用户点击或点击单选按钮图标或标签时，单选按钮会成功选中。
单选按钮应立即生效，除非它们位于需要保存的对话框或页面中。
四、无障碍（Accessibility）
1. 使用场景
用户应能够使用辅助技术执行以下操作：
- 导航到单选按钮
- 选择单选按钮
- 根据输入类型获取适当的反馈
2. 交互与样式
单选按钮可以是已选中或未选中状态。选择一个单选按钮会取消选择其他的单选按钮。一个单选组可以从一个已选中的单选按钮开始，或没有任何选项被选中。
一旦单选按钮被选中，该组将不能取消选择。为了让用户取消选择，可以提供一个“不适用”或“否”选项的单选按钮，或者提供另一种方式来取消选择所有单选按钮，比如“清除选择”。
用户应能够通过点击文本标签或单选按钮来选择一个选项。
一次只能选中一个单选按钮
避免默认应用密度
不要默认将密度应用于单选按钮。这会使它们的目标区域低于 Material 推荐的 48x48 CSS 像素。相反，提供一种让用户选择更高密度的方法，比如选择更密集的布局或更改主题。
为了确保在启用该密度设置后能够轻松恢复，所有目标区域的大小应保持在至少 48x48 CSS 像素。
3. 初始焦点
当聚焦在单选组外时，Tab 键会直接将焦点移至已选中的单选按钮，如果没有选中任何按钮，则移至第一个单选按钮。
Shift+Tab 则会将焦点移至最后一个单选按钮，如果没有选中任何按钮。
使用箭头键可以在选项之间导航。
Tab 键将焦点移至最初选中的项目或初始单选项（左图）。箭头键将焦点移至列表中的下一个元素（右图）。
4. 键盘导航
| 按键（Keys） | 操作（Actions） |
|---|---|
| Tab | 将焦点移入单选组并选中已选中的单选按钮，如果没有选中任何按钮，则选中第一个单选按钮（Moves focus into the group to the selected radio button, or the first if none are selected） |
| Shift + Tab | 将焦点移入单选组并选中已选中的单选按钮，如果没有选中任何按钮，则选中最后一个单选按钮（Moves focus into the group to the selected radio button, or the last if none are selected） |
| 箭头键（Arrows） | 移动焦点并选择前一个或下一个单选按钮。焦点和选择在第一个和最后一个单选按钮之间循环。（Moves focus and selects the previous or next radio button. Wraps focus and selection between the first and last radio buttons.） |
| 空格键（Space） | 选中当前焦点的单选按钮。如果该按钮已被选中，则不做任何操作。（Selects a focused radio button. If already selected, does nothing.） |
5. 元素标注
如果 UI 文本与单选按钮正确链接，辅助技术（如屏幕阅读器）将首先读取 UI 文本，然后读取该组件的角色。
一组单选按钮的无障碍标签通常与其标题相同。该角色是“单选组”。
根据类别标题为单选组标注标签
单个单选按钮的无障碍标签通常与其相邻的文本标签相同。
根据标签文本为单选按钮标注标签
有0人收藏了本文
