单选按钮 Radio
单选按钮允许用户从两个或多个选项中选择一个选项。每个选项都表示为一个单选按钮,用户只能选择单选按钮组中的一个单选按钮。
基本规范
  1. 默认情况下以横向排列展示,若选项数大于 5 或需在表格中展现时,可使用下拉框。
  2. 有为用户推荐默认选项时,可使用下拉框。
  3. 如果两个相互排斥的选项,如“我同意”和“我不同意”,请将其合并使用单个复选框“我同意”。
  4. 如果两个相互排斥的选项,如“开”和“关”,可使用切换开关
示例 Examples
基础用法
  1. 单选按钮平等地强调所有选项。若在大部分情况下为大多数用户推荐默认选项,请使用下拉框展现。
  2. 如果仅有两个相互排斥的选项,请将其合并到单个复选框或切换开关。例如,使用复选框“我同意”而不是两个单选按钮“我同意”和“我不同意”。
  3. 默认情况下,以横向排列 展示。
                        基本属性:width:14px; height:14px; cursor: pointer;border-radius: 3px;

未选中:border:1px solid #ddd;background: #fff;
未选中hover:border-color:#999;

已选中:border-color:#00B29C;background:#00B29C
已选中hover:background:#00A28E; border-color:#00A28E

禁用/未选中:background:#fafafa; border-color:e6e6e6;
禁用/未选中hover:cursor: not-allowed;

禁用/已选中:background:#ddd;
禁用/已选中hover:cursor: not-allowed;
场景 1 - 横向展示
当选项有个别的说明性文案时使用竖向展示。
场景 2 - 竖向展示
当选项有个别的说明性文案时使用竖向展示。