用于在多个备选项中选中单个状态。

类型

单选 - 图1

用法详解

选项必须大于等于2个,必须给出默认选中选项
单选框的选项内容不能重叠
单选 - 图2
应避免重叠选择 例如20岁的人进行选择时就会有歧义

如果您没有所有可能选项的完整列表,请添加“其他”选项。
单选 - 图3

标题位置

类型

  • 左右布局(推荐)

  • 上下布局

用法

  • 左右布局:默认选中第一选项。标题文本向右对齐,选项内容向左对齐。适用于一般,或者内容多、信息层级复杂的表单场景

  • 上下布局:默认选中第一选项。标题位于选项上方。这样做优势是可以较好适配响应式页面,但劣势是较占页面空间

单选 - 图4

基于选择的输入

类型

  • 左右布局(推荐)

  • 上下布局

用法

  • 左右布局:默认选项不显示输入框。当选项被选中,在右侧显示对应输入框,后面其余选项位置向右挪动。如果只有一个选项需要输入,则该选项位于最后。

  • 上下布局:默认选项不显示输入框。当选项被选中,在右侧显示对应输入框,不影响其它选项位置。

单选 - 图5

样式

单选 - 图6