单选框

Radio

UI 组件也叫：单选按钮、单选钮、Radio Button、单选组

一句话：一组圆形的选项，只能选中其中一个，选了新的会自动取消原来的，适合 2~5 个互斥选项。

详细解释

单选框总是成组出现，一组里只能选中一项：选了「按月付」，「按年付」就自动取消。每个选项是左边一个小圆圈、右边一段文字，选中时圆圈中间出现实心圆点。一组单选框通常有一个默认选中项，选中后不能再点一次取消。

它和 复选框 的区别是只能单选，形状是圆的而不是方的；和 下拉选择 相比，单选框把所有选项平铺出来，用户不用点开就能对比，适合 2~5 个选项。只有开和关两种状态、并且立即生效的设置用开关。选项做成几个并排的切换按钮样式时，通常叫 分段控制器。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

「付款周期」用一组横向排列的单选框：按月付、按季付、按年付，默认选中按年付，并在它后面加一个「省 20%」的小标签。选中项圆圈内显示实心圆点、文字加粗，点击文字也能选中，用键盘方向键可以在选项间切换。

由一组小圆圈加文字标签组成，选中项的圆圈中间是实心圆点，同组选项共用一个名称来保证互斥。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。