用途:单选按钮用于从一组互斥选项中精确选择一项,例如选择支付方式、尺寸或配送选项。与复选框不同,同组中选中一项会自动取消其他项。
主要能力:选项互斥,同一组内只能选中一个;相同 name 属性的单选按钮作为一组协同工作;支持键盘访问,用方向键导航、空格键选择;屏幕阅读器可播报当前选择状态;选中与未选中状态有清晰视觉反馈。
使用方式:实现前先确认该模式符合问题与约束,再参考 references/pattern.md 中的结构与示例,选择最小的可行变体。先应用无障碍、性能和交互防护,再进行视觉打磨。使用 fieldset 与 legend 构建语义结构,同一逻辑组使用相同 name 属性;给单选组添加单一事件监听以优化性能,长列表中只渲染可见项,并在快速选择时做防抖更新。
键盘操作:Tab 键将焦点移入单选组,方向键在选项间导航,空格键选择当前聚焦项,再次按 Tab 移到下一个表单元素。
适用场景:需要用户从多个选项中做出单一选择的表单,如支付方式、尺寸、配送选项等。
限制与常见错误:不要用单选按钮实现多选,多选应使用复选框;缺少 fieldset 分组会导致不可访问且易混淆,应始终用 fieldset 包裹并配以描述性 legend;不同 name 的单选按钮散落在表单中会造成混乱,同一逻辑组应使用相同 name。性能目标包括状态变化渲染时间小于 16ms、基础实现包体小于 2KB,并保持 100% 键盘可导航与屏幕阅读器兼容。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/forms/radio。