Radio 单选

用于单选场景。

通用原则

• 常用于单选场景，且选项需成组出现（大于 2 个选项）
• 若用户可以不选择任何一项，请提供一个值为「空」的选项
• 推荐默认选中第 1 个
• 选项数量不宜超过 7 个

构成

1. 选择框
2. 选项名称
   1. 字数过多的时候，建议使用结构化表达
   2. 可配合其他辅助文字使用（比如灰色说明文字）

行为

四大状态

选择

• 热区：选择框，选项名称或自定义背景热区
• 选择操作
  • 选项间互斥：选择任意一个选项，其他选项将取消选择
  • 已经选中的选项不可再点击

样式

布局

• 单个选项：按钮与文本首行呈水平顶部对齐
• 横向：间距 20px, 容器宽度不足时选项自动换行
• 横向：间距 16px

<div class="radio">
  <label>
    <input type="radio">
    <span class="text">单选项目</span>
  </label>
</div>