跳到主要内容
Radio
单选按钮为用户提供了一组互斥的选项,它们允许用户仅从两个或多个选项中选择一个选项。每个选项都由一个单选按钮组成,因此,单选按钮只能成组使用。

构成元素

单选按钮组件由一组可点击的圆圈(输入)组成,文本标签位于右侧。如果有一组单选按钮,可以添加一个组标签。

图片描述

  1. 单选按钮组标签(可选):描述选项组或提供选择指南。
  2. 单选按钮输入:指示适当状态的单选按钮,默认情况下会选择一个选项。
  3. 文本标签:描述要选择或取消选择的信息。

单选组操作有2种类型,一组复选框的默认视图是没有选择任何选项。

  1. selected
  2. unselected

图片描述 单选组selected类型下有两种状态:

  1. Default
  2. 已禁用

单选组unselected类型下有三种状态。

  1. Default
  2. 已禁用
  3. Focus

图片描述

布局

水平

单选组默认以水平方式排列,当任意一个Value有备注信息的时候,当前KV的所有V使用垂直布局。 图片描述

跨端展示

单选组在mobile端仅展示文本标签,无输入项。

  1. 文本标签

图片描述

Radio 的三个尺寸

规格字符宽度
S小于等于6个字符宽度72px
M6-10个字符宽度120px
L最多16个字符宽度192px

用法

什么时候使用

  • 您需要帮助用户在至少两个明显不同的选择之间快速做出选择。
  • 形式上可用于整页、模态或侧面板的表单中。
  • 用于在菜单、页面或组件中从一种设置更改为另一种设置。
  • 用于在数据表或列表中选择单个项目。

什么时候不使用

  • 您需要为用户提供多项选择的情况下,请改用复选框, 因为单选按钮仅用于选择单个选项。
  • 在大多数情况下,建议大多数用户使用默认选项。在这种情况下,请考虑使用下拉列表,它不会立即显示所有选项,从而占用更少的空间。
  • 您需要提供 8 个以上的选项的情况下,请使用下拉框组件。

图片描述

最佳实践

单选按钮组件经常用于表单中。表单可以放置在页面、模态或侧面板中。

图片描述

行为

出现方式

鼠标 用户可以通过直接单击单选按钮输入或单击单选按钮标签来触发项目。让两个区域交互创建一个更容易访问的点击目标。

图片描述

键盘

默认情况下应选择一个单选按钮。用户可以通过按 UpDown 箭头键在单选按钮输入之间导航 。