COMPONENT 30 · Selection & Values

单选按钮组

Radio Group

也叫Radio ButtonsOption Group单选框NSButton radio

从一组互斥且通常可见的选项中选择一个。

Selects one mutually exclusive option from a visible group.

ANATOMY & USAGE

结构与使用建议

组成部分

组标题
圆形控件
选项标签

适合使用

选项数量少且需要同时比较时。

不建议使用

允许多选、选项很多或需要输入自定义值时。

键盘与无障碍

使用 fieldset/legend 或 radiogroup 名称；方向键移动，所有选项有可见标签。

DESCRIBE IT TO AI

这样告诉编程助手

实现单选按钮组（Radio Group）：从一组互斥且通常可见的选项中选择一个。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<fieldset class="demo row">
  <legend>单选按钮组</legend>
  <label>
    <input type="radio" name="choice"> 开启通知</label>
  <label>
    <input type="radio" name="choice"> 每周摘要</label>
</fieldset>