用途
Radio（单选按钮）是一种表单控件模式，用于让用户从一组互斥的选项中恰好选择一个选项。它解决的核心问题是：当用户必须从多个选项中做出单一选择时，提供清晰、可访问且符合直觉的交互方式。典型场景包括选择支付方式、选择尺码、选择配送选项等。
与复选框不同，单选按钮以组为单位工作，选中其中一个会自动取消同组内其他选项的选中状态。
主要能力
- 互斥性：同一时间只能选中一个选项。
- 分组行为：具有相同 name 属性的所有单选按钮协同工作。
- 键盘可访问：使用方向键导航，使用空格键选择。
- 屏幕阅读器友好：正确播报当前选中状态。
- 视觉反馈：清晰指示选中与未选中状态。
使用方式
实现工作流如下：
- 在复制示例前，先确认该模式与当前问题及约束匹配。
- 从 references/pattern.md 中的结构和示例入手，然后选择最小的可行变体。
- 在叠加视觉细节之前，先应用无障碍、性能和交互防护措施。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍防护措施
键盘导航：
- Tab 键：将焦点移动到单选按钮组。
- 方向键：在组内选项之间导航。
- 空格键：选中当前聚焦的选项。
- 再次按 Tab：移动到下一个表单元素。
屏幕阅读器支持：
- 语义化 HTML：使用正确的 fieldset 和 legend 结构。
- ARIA 属性：确保正确的标签和状态播报。
- 组上下文：屏幕阅读器播报组上下文和当前选中项。
- 状态变化：选中变化会立即播报。
性能防护措施
目标指标：
- 渲染时间：单选按钮状态变更小于 16ms。
- 包体积：基础单选按钮实现小于 2KB。
- 内存占用：标准单选按钮组影响极小。
- 无障碍：100% 键盘可导航，兼容屏幕阅读器。
优化策略：
- 事件委托：为单选按钮组使用单个事件监听器。
- 懒渲染：在长列表中只渲染可见的单选按钮。
- 防抖更新：防止快速选择期间过度重渲染。
适用场景
适用于用户必须从多个互斥选项中做出单一选择的表单场景，例如选择支付方式、选择尺码、选择配送选项等。
限制与常见错误
- 用单选按钮实现多选：当用户需要选择多个选项时使用单选按钮会混淆交互模型。修复方式：多选使用复选框，单选按钮仅用于单一选择。
- 缺少 fieldset 结构：没有正确 fieldset 分组的单选按钮不可访问且令人困惑。修复方式：始终将单选按钮组包裹在带有描述性 legend 的 fieldset 中。
- 分组不一致：不同 name 的单选按钮散落在表单中会造成混淆。修复方式：为逻辑组中的所有单选按钮使用相同的 name 属性。
相关模式
- https://uxpatterns.dev/patterns/forms/checkbox
- https://uxpatterns.dev/patterns/forms/form-validation
- https://uxpatterns.dev/patterns/forms/selection-input
- https://uxpatterns.dev/patterns/forms/toggle
完整实现细节、示例和测试说明请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/forms/radio