构成元素
单选按钮组件由一组可点击的圆圈(输入)组成,文本标签位于右侧。如果有一组单选按钮,可以添加一个组标签。
- 单选按钮组标签(可选):描述选项组或提供选择指南。
- 单选按钮输入:指示适当状态的单选按钮,默认情况下会选择一个选项。
- 文本标签:描述要选择或取消选择的信息。
单选组操作有2种类型,一组复选框的默认视图是没有选择任何选项。
- selected
- unselected
单选组selected类型下有两种状态:
- Default
- 已禁用
单选组unselected类型下有三种状态。
- Default
- 已禁用
- Focus
布局
水平
单选组默认以水平方式排列,当任意一个Value有备注信息的时候,当前KV的所有V使用垂直布局。
跨端展示
单选组在mobile端仅展示文本标签,无输入项。
- 文本标签
Radio 的三个尺寸
规格 | 字符 | 宽度 |
---|---|---|
S | 小于等于6个字符 | 宽度72px |
M | 6-10个字符 | 宽度120px |
L | 最多16个字符 | 宽度192px |
用法
什么时候使用
- 您需要帮助用户在至少两个明显不同的选择之间快速做出选择。
- 形式上可用于整页、模态或侧面板的表单中。
- 用于在菜单、页面或组件中从一种设置更改为另一种设置。
- 用于在数据表或列表中选择单个项目。
什么时候不使用
- 您需要为用户提供多项选择的情况下,请改用复选框, 因为单选按钮仅用于选择单个选项。
- 在大多数情况下,建议大多数用户使用默认选项。在这种情况下,请考虑使用下拉列表,它不会立即显示所有选项,从而占用更少的空间。
- 您需要提供 8 个以上的选项的情况下,请使用下拉框组件。
最佳实践
单选按钮组件经常用于表单中。表单可以放置在页面、模态或侧面板中。
行为
出现方式
鼠标 用户可以通过直接单击单选按钮输入或单击单选按钮标签来触发项目。让两个区域交互创建一个更容易访问的点击目标。
键盘
默认情况下应选择一个单选按钮。用户可以通过按 Up
或 Down
箭头键在单选按钮输入之间导航 。